@julseb-lib/react 0.1.3 → 0.1.4

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

@@ -0,0 +1,42 @@
+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/src/lib/components/Input/templates/PasswordInput.tsx

@@ -0,0 +1,73 @@
+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/src/lib/components/Input/templates/SearchInput.tsx

@@ -0,0 +1,89 @@
+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/src/lib/components/Input/templates/SelectInput.tsx

@@ -0,0 +1,79 @@
+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>
+	)
+}

package/src/lib/components/Input/templates/TextInput.tsx

@@ -0,0 +1,58 @@
+import { type FC } from "react"
+import { clsx } from "../../../utils"
+import {
+	InputPrefix,
+	InputValidation,
+	InputSuffix,
+	InputIcon,
+	InputWrapper,
+	INPUT_COMMON_CLASSES,
+} from "../../InputComponents"
+import type { ILibTextInput } from "../subtypes"
+
+export const TextInput: FC<ILibTextInput> = ({
+	className,
+	validation,
+	inputBackground,
+	inputVariant,
+	prefix,
+	suffix,
+	type = "text",
+	icon,
+	disabled,
+	...rest
+}) => {
+	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-text"
+				)}
+				type={type}
+				disabled={disabled}
+			/>
+
+			<InputValidation validation={validation} />
+
+			<InputSuffix suffix={suffix} />
+		</InputWrapper>
+	)
+}

package/src/lib/components/Input/templates/TextareaInput.tsx

@@ -0,0 +1,27 @@
+import { type FC } from "react"
+import { clsx } from "../../../utils"
+import { INPUT_CONTAINER_CLASSES } from "../../InputComponents/classes"
+import type { ILibTextareaInput } from "../subtypes"
+
+export const TextareaInput: FC<ILibTextareaInput> = ({
+	className,
+	validation,
+	inputBackground,
+	...rest
+}) => {
+	return (
+		<textarea
+			{...rest}
+			className={clsx(
+				INPUT_CONTAINER_CLASSES({
+					validation,
+					inputBackground,
+					inputVariant: undefined,
+				}),
+				"min-h-[80px] max-h-[160px] field-sizing-content h-fit resize-y p-1",
+				"input-textarea",
+				className,
+			)}
+		/>
+	)
+}

package/src/lib/components/Input/templates/TimeInput.tsx

@@ -0,0 +1,67 @@
+import { useRef, type FC } from "react"
+import { BiTime } from "react-icons/bi"
+import { clsx } from "../../../utils"
+import { useMergeRefs } from "../../../hooks"
+import {
+	InputValidation,
+	InputButton,
+	InputIcon,
+	InputPrefix,
+	InputWrapper,
+	INPUT_COMMON_CLASSES,
+} from "../../InputComponents"
+import type { ILibTimeInput } from "../subtypes"
+
+export const TimeInput: FC<ILibTimeInput> = ({
+	ref,
+	className,
+	validation,
+	inputBackground,
+	inputVariant,
+	type = "time",
+	icon,
+	iconClock = <BiTime size={16} />,
+	disabled,
+	prefix,
+	...rest
+}) => {
+	const el = useRef<HTMLInputElement>(null)
+	const showPicker = () => el.current?.showPicker()
+
+	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,
+					}),
+					"[&::-webkit-calendar-picker-indicator]:opacity-0",
+					"[&::-webkit-calendar-picker-indicator]:absolute",
+					"input-time",
+				)}
+				ref={useMergeRefs([el, ref])}
+				type={type}
+				disabled={disabled}
+			/>
+
+			<InputButton onClick={showPicker}>{iconClock}</InputButton>
+
+			<InputValidation validation={validation} />
+		</InputWrapper>
+	)
+}

package/src/lib/components/Input/types.ts

@@ -0,0 +1,22 @@
+import type {
+	ILibColorInput,
+	ILibDateInput,
+	ILibFileInput,
+	ILibPasswordInput,
+	ILibSearchInput,
+	ILibSelectInput,
+	ILibTextInput,
+	ILibTextareaInput,
+	ILibTimeInput,
+} from "./subtypes"
+
+export type ILibInput =
+	| ILibColorInput
+	| ILibDateInput
+	| ILibFileInput
+	| ILibPasswordInput
+	| ILibSearchInput
+	| ILibSelectInput
+	| ILibTextInput
+	| ILibTextareaInput
+	| ILibTimeInput

package/src/lib/components/InputCheck/InputCheck.tsx

@@ -0,0 +1,161 @@
+import { type FC } from "react"
+import { BiCheck } from "react-icons/bi"
+import { Text } from "../Text"
+import { clsx } from "../../utils"
+import type { ILibInputCheck } from "./types"
+
+/**
+ * InputCheck component for creating interactive checkbox, radio, and toggle inputs with multiple visual variants.
+ *
+ * @component
+ *
+ * @example
+ * <InputCheck id="terms" type="checkbox">
+ *   I agree to the terms and conditions
+ * </InputCheck>
+ * <InputCheck id="newsletter" type="checkbox" variant="tile">
+ *   Subscribe to newsletter
+ * </InputCheck>
+ * <InputCheck id="notifications" variant="toggle">
+ *   Enable notifications
+ * </InputCheck>
+ *
+ * @extends HTMLInputElement
+ *
+ * @prop {string} [props.className] - Additional CSS classes to apply to the input check container.
+ * @prop {React.Ref<any>} [props.ref] - Ref to the label element.
+ * @prop {React.ReactNode} [props.children] - Content to display next to the input check.
+ * @prop {string} [props.id] - Unique identifier for the input element.
+ * @prop {"checkbox" | "radio"} [props.type="checkbox"] - Type of input check to render.
+ * @prop {React.ReactElement} [props.iconCheck=<BiCheck size={16} />] - Icon element to display in checkbox variant.
+ * @prop {"tile" | "toggle" | "selector"} [props.variant] - Visual variant style of the input check.
+ * @prop {boolean} [props.validation] - Validation state for error styling.
+ * @prop {boolean} [props.disabled] - Whether the input check is disabled.
+ * @prop {boolean} [props.checked] - Whether the input check is checked (controlled).
+ * @prop {boolean} [props.defaultChecked] - Whether the input check is initially checked (uncontrolled).
+ * @prop {any} [props.rest] - Additional props spread to the input element.
+ *
+ * @returns {JSX.Element} The rendered InputCheck component.
+ *
+ * @see https://doc-julseb-lib-react.vercel.app/components/input-check
+ */
+export const InputCheck: FC<ILibInputCheck> = ({
+	className,
+	ref,
+	children,
+	id,
+	type = "checkbox",
+	iconCheck = <BiCheck size={16} className="input-check-icon" />,
+	variant,
+	validation,
+	disabled,
+	checked,
+	defaultChecked,
+	...rest
+}) => {
+	return (
+		<label
+			ref={ref}
+			htmlFor={id}
+			className={clsx(
+				"inline-flex items-start gap-1 cursor-pointer",
+				variant === "tile" && [
+					"w-full border-gray-200 border p-2 rounded-lg",
+					"has-[input:checked]:border-primary-500",
+					validation === false &&
+						"has-[input:checked]:border-danger-500",
+					disabled && "has-[input:checked]:border-gray-500",
+				],
+				variant === "toggle" && [
+					"has-[input:checked]:[&_.toggle]:border-success-500 has-[input:checked]:[&_.toggle]:bg-success-500 has-[input:checked]:[&_.toggle]:after:left-2.5 has-[input:checked]:[&_.toggle]:after:bg-white",
+					validation === false &&
+						"has-[input:checked]:[&_.toggle]:bg-danger-500 has-[input:checked]:[&_.toggle]:border-danger-500",
+					disabled &&
+						"has-[input:checked]:[&_.toggle]:bg-gray-500 has-[input:checked]:[&_.toggle]:border-gray-500",
+				],
+				variant === "selector" && [
+					"bg-gray-100 py-1 px-3 rounded-full hover:bg-primary-300 hover:text-white active:bg-primary-600 transition-all duration-200 ease-in-out",
+					"has-[input:checked]:bg-primary-500 has-[input:checked]:text-white has-[input:checked]:hover:bg-primary-300 has-[input:checked]:active:bg-primary-600",
+					validation === false && [
+						"bg-danger-50 hover:bg-danger-300 active:bg-danger-600",
+						"has-[input:checked]:bg-danger-500 has-[input:checked]:hover:bg-danger-300 has-[input:checked]:active:bg-danger-600 has-[input:checked]:text-white",
+					],
+					disabled && [
+						"bg-gray-50 text-gray-500 hover:bg-gray-50 active:bg-gray-50 hover:text-gray-500",
+						"has-[input:checked]:bg-gray-200 has-[input:checked]:text-gray-500 has-[input:checked]:hover:bg-gray-200 has-[input:checked]:active:bg-gray-200",
+					],
+				],
+				"has-[input:checked]:[&_.radio]:after:opacity-100",
+				"has-[:not(input:checked)]:[&_.checkbox>svg]:opacity-0",
+				"has-[input:checked]:[&_.checkbox>svg]:opacity-100 has-[input:checked]:[&_.checkbox]:bg-primary-500 has-[input:checked]:[&_.checkbox]:border-primary-500",
+				validation === false &&
+					"has-[input:checked]:[&_.checkbox]:bg-danger-500 has-[input:checked]:[&_.checkbox]:border-danger-500",
+				disabled && [
+					"cursor-not-allowed",
+					"has-[input:checked]:[&_.checkbox]:border-gray-500 has-[input:checked]:[&_.checkbox]:bg-gray-500",
+				],
+				"input-check-container",
+				className,
+			)}
+		>
+			<input
+				type={type}
+				id={id}
+				className="hidden input-check"
+				disabled={disabled}
+				checked={checked}
+				defaultChecked={defaultChecked}
+				{...rest}
+			/>
+
+			{variant !== "selector" && (
+				<span className="inline-flex items-center h-6 check-container">
+					{variant === "toggle" ? (
+						<span
+							className={clsx(
+								"toggle",
+								"w-6 h-4 rounded-full border-2 border-primary-500 relative",
+								"after:size-2 after:bg-primary-500 after:absolute after:rounded-full after:top-0.5 after:left-0.5 after:duration-200 after:ease-in-out after:transition-all",
+								validation === false &&
+									"border-danger-500 after:bg-danger-500",
+								disabled && "border-gray-500 after:bg-gray-500",
+								"input-toggle",
+							)}
+						/>
+					) : type === "radio" ? (
+						<span
+							className={clsx(
+								"radio",
+								"size-4 rounded-full relative",
+								"after:absolute after:size-2 after:bg-primary-500 after:rounded-full after:top-0.5 after:left-0.5 after:opacity-0",
+								"border-2 border-primary-500",
+								validation === false &&
+									"border-danger-500 after:bg-danger-500",
+								disabled && "border-gray-500 after:bg-gray-500",
+								"input-radio",
+							)}
+						/>
+					) : (
+						type === "checkbox" && (
+							<span
+								className={clsx(
+									"checkbox",
+									"size-4 rounded-sm relative text-white",
+									"border-2 border-primary-500",
+									"inline-flex items-center justify-center",
+									validation === false && "border-danger-500",
+									disabled && "border-gray-500",
+									"input-checkbox",
+								)}
+							>
+								{iconCheck}
+							</span>
+						)
+					)}
+				</span>
+			)}
+
+			<Text className="input-check-content">{children}</Text>
+		</label>
+	)
+}