@julseb-lib/react 0.1.18 → 0.1.20

package/dist/lib/components/Input/Input.tsx

@@ -1,130 +0,0 @@
-import { type FC } from "react"
-import { InputContainer } from "../InputContainer"
-import { ColorInput } from "./templates/ColorInput"
-import { DateInput } from "./templates/DateInput"
-import { FileInput } from "./templates/FileInput"
-import { PasswordInput } from "./templates/PasswordInput"
-import { SearchInput } from "./templates/SearchInput"
-import { SelectInput } from "./templates/SelectInput"
-import { TextareaInput } from "./templates/TextareaInput"
-import { TextInput } from "./templates/TextInput"
-import { TimeInput } from "./templates/TimeInput"
-import type { LibInputType } from "../../types"
-import type { ILibInput } from "./types"
-
-const renderComponent = (props: any, type: LibInputType) => {
-	switch (type) {
-		case "color":
-			return <ColorInput type={type} {...props} />
-		case "date":
-		case "datetime-local":
-		case "week":
-		case "month":
-			return <DateInput type={type} {...props} />
-		case "file":
-			return <FileInput type={type} {...props} />
-		case "password":
-			return <PasswordInput type={type} {...props} />
-		case "search":
-			return <SearchInput type={type} {...props} />
-		case "select":
-			return <SelectInput type={type} {...props} />
-		case "textarea":
-			return <TextareaInput type={type} {...props} />
-		case "time":
-			return <TimeInput type={type} {...props} />
-		case "text":
-		case "email":
-		case "number":
-		case "tel":
-		case "url":
-		default:
-			return <TextInput type={type} {...props} />
-	}
-}
-
-// @ts-ignore
-const InputFunction: FC<ILibInput> = ({ type, ...rest }) =>
-	renderComponent(rest, type as LibInputType)
-
-/**
- * Input component with multiple types and variants for form data collection.
- *
- * @component
- *
- * @example
- * <Input type="text" label="Name" placeholder="Enter your name" />
- * <Input type="email" label="Email" validation={{ status: true }} />
- * <Input type="select" label="Country">
- *   <option value="us">United States</option>
- *   <option value="ca">Canada</option>
- * </Input>
- *
- * @extends HTMLInputElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the input.
- * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input element.
- * @prop {string} [props.id] - Unique identifier for the input 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 {"color" | "date" | "datetime-local" | "month" | "week" | "file" | "password" | "search" | "email" | "number" | "tel" | "text" | "url" | "time" | "select" | "textarea"} [props.type="text"] - Type of input to render.
- * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {string | number} [props.value] - Current value of the input.
- * @prop {boolean | object} [props.counter] - Whether to show character counter or counter configuration.
- * @prop {number} [props.maxLength] - Maximum number of characters allowed.
- * @prop {"rounded" | "pill"} [props.inputVariant] - Visual variant of the input.
- * @prop {"light" | "dark"} [props.inputBackground] - Background theme of the input.
- * @prop {React.ReactNode} [props.icon] - Icon element to display inside the input.
- * @prop {string} [props.placeholder] - Placeholder text for the input.
- * @prop {boolean} [props.disabled] - Whether the input is disabled.
- * @prop {React.ReactNode} [props.children] - Child elements for select and textarea types.
- * @prop {any} [props.rest] - Additional props spread to the input element.
- *
- * @returns {JSX.Element} The rendered Input component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/input
- */
-export const Input: FC<ILibInput> = ({
-	className,
-	ref,
-	id,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	// @ts-ignore
-	validation,
-	value,
-	// @ts-ignore
-	counter,
-	// @ts-ignore
-	maxLength,
-	...rest
-}) => {
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			validation={validation}
-			value={value}
-			counter={counter as any}
-			maxLength={maxLength}
-			id={id}
-		>
-			<InputFunction
-				ref={ref}
-				value={value}
-				maxLength={maxLength as any}
-				className={className}
-				id={id}
-				// @ts-ignore
-				validation={validation as any}
-				{...rest}
-			/>
-		</InputContainer>
-	)
-}

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

@@ -1 +0,0 @@
-export const INPUT_VALIDATION_CONTAINER = []

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

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

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

@@ -1,173 +0,0 @@
-import type {
-	InputHTMLAttributes,
-	MouseEventHandler,
-	Ref,
-	SelectHTMLAttributes,
-	TextareaHTMLAttributes,
-} from "react"
-import type { ReactChildren, ReactElement } from "../../types"
-import type {
-	ILibInputCommon,
-	ILibInputExtended,
-	ILibInputWithIcon,
-	ILibInputWithValidation,
-	ILibInputWithPrefix,
-	ILibInputWithSuffix,
-} from "../InputComponents"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN INPUT COMPONENTS
-
-/*====================== Color ======================*/
-
-export type ILibColorInput = Omit<
-	InputHTMLAttributes<HTMLInputElement>,
-	"prefix"
-> &
-	ILibInputCommon &
-	ILibInputWithValidation & {
-		type: "color"
-	}
-
-/*====================== Date ======================*/
-
-export type ILibDateInput = Omit<
-	InputHTMLAttributes<HTMLInputElement>,
-	"prefix"
-> &
-	ILibInputCommon &
-	ILibInputWithIcon &
-	ILibInputWithValidation & {
-		type: "date" | "datetime-local" | "month" | "week"
-		iconCalendar?: ReactElement
-	}
-
-/*====================== File ======================*/
-
-export type ILibFileInput = Omit<
-	InputHTMLAttributes<HTMLInputElement>,
-	"prefix"
-> &
-	ILibInputCommon &
-	ILibInputWithValidation & {
-		type: "file"
-	}
-
-/*====================== Password ======================*/
-
-type ILibPasswordInputBase = Omit<
-	InputHTMLAttributes<HTMLInputElement>,
-	"prefix"
-> &
-	ILibInputExtended &
-	ILibInputWithIcon &
-	ILibInputWithValidation &
-	ILibInputWithPrefix & {
-		type: "password"
-	}
-
-type PasswordInputWithButtonIcon = ILibPasswordInputBase & {
-	hideButton?: false
-	button?: {
-		iconShow?: ReactElement
-		iconHide?: ReactElement
-		textShow?: never
-		textHide?: never
-	}
-}
-
-type PasswordWithButtonText = ILibPasswordInputBase & {
-	hideButton?: false
-	button?: {
-		iconShow?: never
-		iconHide?: never
-		textShow?: string
-		textHide?: string
-	}
-}
-
-type PasswordWithoutButton = ILibPasswordInputBase & {
-	hideButton?: true
-	button?: never
-}
-
-export type ILibPasswordInput =
-	| PasswordInputWithButtonIcon
-	| PasswordWithButtonText
-	| PasswordWithoutButton
-
-/*====================== Search ======================*/
-
-type ILibSearchInputBase = Omit<
-	InputHTMLAttributes<HTMLInputElement>,
-	"prefix"
-> &
-	ILibInputExtended &
-	ILibInputWithIcon &
-	ILibInputWithPrefix & {
-		type: "search"
-		clearSearch?: MouseEventHandler<HTMLButtonElement>
-		iconClear?: ReactElement
-	}
-
-type SearchInputShowKeys = ILibSearchInputBase & {
-	focusKeys?: Array<string>
-	showKeys?: boolean
-}
-
-type SearchInputHideKeys = ILibSearchInputBase & {
-	focusKeys?: undefined
-	showKeys?: never
-}
-
-export type ILibSearchInput = SearchInputShowKeys | SearchInputHideKeys
-
-/*====================== Select ======================*/
-
-export type ILibSelectInput = Omit<
-	SelectHTMLAttributes<HTMLSelectElement>,
-	"prefix"
-> &
-	ILibInputCommon &
-	ILibInputWithIcon &
-	ILibInputWithValidation & {
-		type: "select"
-		iconSelect?: ReactElement
-		children?: ReactChildren
-	}
-
-/*====================== Textarea ======================*/
-
-export type ILibTextareaInput = TextareaHTMLAttributes<HTMLTextAreaElement> &
-	Omit<ILibInputCommon, "inputVariant"> &
-	ILibInputWithValidation & {
-		ref?: Ref<HTMLTextAreaElement>
-		type: "textarea"
-	}
-
-/*====================== Text ======================*/
-
-export type ILibTextInput = Omit<
-	InputHTMLAttributes<HTMLInputElement>,
-	"prefix"
-> &
-	ILibInputExtended &
-	ILibInputWithIcon &
-	ILibInputWithValidation &
-	ILibInputWithPrefix &
-	ILibInputWithSuffix & {
-		type?: "email" | "number" | "tel" | "text" | "url" | undefined
-	}
-
-/*====================== Time ======================*/
-
-export type ILibTimeInput = Omit<
-	InputHTMLAttributes<HTMLInputElement>,
-	"prefix"
-> &
-	ILibInputCommon &
-	ILibInputWithIcon &
-	ILibInputWithValidation &
-	ILibInputWithPrefix & {
-		type: "time"
-		iconClock?: ReactElement
-	}

package/dist/lib/components/Input/templates/ColorInput.tsx

@@ -1,44 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../../utils"
-import {
-	InputValidation,
-	InputWrapper,
-	INPUT_COMMON_CLASSES,
-} from "../../InputComponents"
-import type { ILibColorInput } from "../subtypes"
-
-export const ColorInput: FC<ILibColorInput> = ({
-	className,
-	type = "color",
-	validation,
-	inputBackground,
-	inputVariant,
-	value,
-	...rest
-}) => {
-	return (
-		<InputWrapper
-			className={className}
-			validation={validation}
-			inputBackground={inputBackground}
-			inputVariant={inputVariant}
-		>
-			{value && <span className="pl-2">{value}</span>}
-
-			<input
-				{...rest}
-				type={type}
-				className={clsx(
-					INPUT_COMMON_CLASSES({
-						inputBackground,
-						validationStatus: validation?.status,
-					}),
-					"input-color",
-				)}
-				value={value}
-			/>
-
-			<InputValidation validation={validation} />
-		</InputWrapper>
-	)
-}

package/dist/lib/components/Input/templates/DateInput.tsx

@@ -1,63 +0,0 @@
-import { useRef, type FC } from "react"
-import { BiCalendar } from "react-icons/bi"
-import { clsx } from "../../../utils"
-import { useMergeRefs } from "../../../hooks"
-import {
-	InputValidation,
-	InputButton,
-	InputIcon,
-	InputWrapper,
-	INPUT_COMMON_CLASSES,
-} from "../../InputComponents"
-import type { ILibDateInput } from "../subtypes"
-
-export const DateInput: FC<ILibDateInput> = ({
-	ref,
-	className,
-	type = "date",
-	validation,
-	inputBackground,
-	inputVariant,
-	icon,
-	iconCalendar = <BiCalendar size={16} />,
-	disabled,
-	...rest
-}) => {
-	const el = useRef<HTMLInputElement>(null)
-	const showPicker = () => el.current?.showPicker()
-
-	return (
-		<InputWrapper
-			className={className}
-			validation={validation}
-			inputBackground={inputBackground}
-			inputVariant={inputVariant}
-		>
-			<InputIcon
-				icon={icon}
-				inputVariant={inputVariant}
-				disabled={disabled}
-			/>
-
-			<input
-				{...rest}
-				type={type}
-				ref={useMergeRefs([ref, el])}
-				className={clsx(
-					INPUT_COMMON_CLASSES({
-						inputBackground,
-						validationStatus: validation?.status,
-					}),
-					"cursor-pointer",
-					"[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-					"input-date",
-				)}
-				disabled={disabled}
-			/>
-
-			<InputButton onClick={showPicker}>{iconCalendar}</InputButton>
-
-			<InputValidation validation={validation} />
-		</InputWrapper>
-	)
-}

package/dist/lib/components/Input/templates/FileInput.tsx

@@ -1,42 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../../utils"
-import {
-	InputValidation,
-	InputWrapper,
-	INPUT_COMMON_CLASSES,
-} from "../../InputComponents"
-import type { ILibFileInput } from "../subtypes"
-
-export const FileInput: FC<ILibFileInput> = ({
-	className,
-	type = "file",
-	validation,
-	inputBackground,
-	inputVariant,
-	...rest
-}) => {
-	return (
-		<InputWrapper
-			className={className}
-			validation={validation}
-			inputBackground={inputBackground}
-			inputVariant={inputVariant}
-		>
-			<input
-				{...rest}
-				type={type}
-				className={clsx(
-					INPUT_COMMON_CLASSES({
-						inputBackground,
-						validationStatus: validation?.status,
-					}),
-					"cursor-pointer px-0",
-					"[&::file-selector-button]:bg-gray-200 [&::file-selector-button]:px-2 hover:[&::file-selector-button]:bg-gray-300 [&::file-selector-button]:cursor-pointer [&::file-selector-button]:transition-all [&::file-selector-button]:duration-200 [&::file-selector-button]:ease-in-out [&::file-selector-button]:h-8 [&::file-selector-button]:mr-2 [&::file-selector-button]:text-black",
-					"input-file",
-				)}
-			/>
-
-			<InputValidation validation={validation} />
-		</InputWrapper>
-	)
-}

package/dist/lib/components/Input/templates/PasswordInput.tsx

@@ -1,73 +0,0 @@
-import { useState, type FC } from "react"
-import { BiShow, BiHide } from "react-icons/bi"
-import { clsx } from "../../../utils"
-import {
-	InputValidation,
-	InputButton,
-	InputPrefix,
-	InputIcon,
-	InputWrapper,
-	INPUT_COMMON_CLASSES,
-} from "../../InputComponents"
-import type { ILibPasswordInput } from "../subtypes"
-
-export const PasswordInput: FC<ILibPasswordInput> = ({
-	className,
-	validation,
-	inputBackground,
-	inputVariant,
-	hideButton,
-	button,
-	prefix,
-	icon,
-	disabled,
-	...rest
-}) => {
-	const [inputType, setInputType] = useState<"password" | "text">("password")
-
-	return (
-		<InputWrapper
-			className={className}
-			validation={validation}
-			inputBackground={inputBackground}
-			inputVariant={inputVariant}
-		>
-			<InputPrefix prefix={prefix} />
-
-			<InputIcon
-				icon={icon}
-				inputVariant={inputVariant}
-				disabled={disabled}
-			/>
-
-			<input
-				{...rest}
-				className={clsx(
-					INPUT_COMMON_CLASSES({
-						inputBackground,
-						validationStatus: validation?.status,
-					}),
-					"input-password",
-				)}
-				type={inputType}
-				disabled={disabled}
-			/>
-
-			{!hideButton && (
-				<InputButton
-					onClick={() =>
-						setInputType(
-							inputType === "password" ? "text" : "password",
-						)
-					}
-				>
-					{inputType === "password"
-						? (button?.textShow ?? button?.iconShow ?? <BiHide />)
-						: (button?.textHide ?? button?.iconHide ?? <BiShow />)}
-				</InputButton>
-			)}
-
-			<InputValidation validation={validation} />
-		</InputWrapper>
-	)
-}

package/dist/lib/components/Input/templates/SearchInput.tsx

@@ -1,89 +0,0 @@
-import { useRef, type FC } from "react"
-import { BiX } from "react-icons/bi"
-import { clsx } from "../../../utils"
-import { transformSearchKeys } from "../../../lib-utils"
-import { Key } from "../../Key"
-import {
-	InputButton,
-	InputIcon,
-	InputPrefix,
-	InputWrapper,
-	INPUT_COMMON_CLASSES,
-} from "../../InputComponents"
-import { useTouchScreen, useMergeRefs, useKeyPress } from "../../../hooks"
-import type { ILibSearchInput } from "../subtypes"
-
-export const SearchInput: FC<ILibSearchInput> = ({
-	ref,
-	className,
-	inputBackground,
-	inputVariant,
-	type = "search",
-	clearSearch,
-	icon,
-	iconClear,
-	focusKeys,
-	showKeys,
-	value,
-	prefix,
-	disabled,
-	...rest
-}) => {
-	const isTouchScreen = useTouchScreen()
-
-	const el = useRef<HTMLInputElement>(null)
-
-	const handleFocus = () => el?.current?.focus()
-	const keys = focusKeys ?? [""]
-	useKeyPress(keys, handleFocus)
-
-	return (
-		<InputWrapper
-			className={className}
-			validation={undefined}
-			inputBackground={inputBackground}
-			inputVariant={inputVariant}
-		>
-			<InputPrefix prefix={prefix} />
-
-			<InputIcon
-				icon={icon}
-				inputVariant={inputVariant}
-				disabled={disabled}
-			/>
-
-			<input
-				{...rest}
-				ref={useMergeRefs([ref, el])}
-				className={clsx(
-					INPUT_COMMON_CLASSES({
-						inputBackground,
-						validationStatus: undefined,
-					}),
-					"[&::-webkit-search-cancel-button]:appearance-none",
-					"[&::-webkit-search-cancel-button]:hidden",
-					"[&::-webkit-search-decoration]:appearance-none",
-					"[&::-webkit-search-decoration]:hidden",
-					"input-search",
-				)}
-				type={type}
-				disabled={disabled}
-				value={value}
-			/>
-
-			{clearSearch && value?.length > 0 && (
-				<InputButton onClick={clearSearch}>
-					<BiX className="input-clear-icon" />
-				</InputButton>
-			)}
-
-			{!isTouchScreen && showKeys && (
-				<span className="inline-flex items-center px-2 input-key-container">
-					<Key size="small" className="input-key">
-						{transformSearchKeys(keys)}
-					</Key>
-				</span>
-			)}
-		</InputWrapper>
-	)
-}

package/dist/lib/components/Input/templates/SelectInput.tsx

@@ -1,79 +0,0 @@
-import { useRef, type FC, type MouseEvent } from "react"
-import { BiChevronDown } from "react-icons/bi"
-import { clsx } from "../../../utils"
-import { useMergeRefs } from "../../../hooks"
-import {
-	InputIcon,
-	InputValidation,
-	InputButton,
-	InputWrapper,
-	INPUT_COMMON_CLASSES,
-} from "../../InputComponents"
-import type { ILibSelectInput } from "../subtypes"
-
-export const SelectInput: FC<ILibSelectInput> = ({
-	ref,
-	children,
-	className,
-	validation,
-	inputBackground,
-	inputVariant,
-	icon,
-	iconSelect = <BiChevronDown size={16} />,
-	disabled,
-	...rest
-}) => {
-	const el = useRef<HTMLSelectElement>(null)
-
-	const handleContainerClick = () => {
-		if (!disabled && el.current) {
-			el.current.focus()
-
-			if ("showPicker" in el.current) {
-				el.current.showPicker()
-			}
-		}
-	}
-
-	const handleIconClick = (e: MouseEvent) => {
-		e.preventDefault()
-		handleContainerClick()
-	}
-
-	return (
-		<InputWrapper
-			className={className}
-			validation={validation}
-			inputBackground={inputBackground}
-			inputVariant={inputVariant}
-		>
-			<InputIcon
-				icon={icon}
-				inputVariant={inputVariant}
-				disabled={disabled}
-			/>
-
-			<select
-				{...rest}
-				ref={useMergeRefs([ref, el])}
-				className={clsx(
-					"appearance-none cursor-pointer",
-					INPUT_COMMON_CLASSES({
-						inputBackground,
-						validationStatus: validation?.status,
-					}),
-					"input-select",
-				)}
-				disabled={disabled}
-			>
-				{children}
-			</select>
-
-			<InputValidation validation={validation} />
-
-			<InputButton className="text-gray-500" onClick={handleIconClick}>
-				{iconSelect}
-			</InputButton>
-		</InputWrapper>
-	)
-}