@julseb-lib/react 0.1.19 → 0.1.21

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

@@ -1,58 +0,0 @@
-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/dist/lib/components/Input/templates/TextareaInput.tsx

@@ -1,27 +0,0 @@
-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/dist/lib/components/Input/templates/TimeInput.tsx

@@ -1,67 +0,0 @@
-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/dist/lib/components/Input/types.ts

@@ -1,22 +0,0 @@
-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/dist/lib/components/InputCheck/InputCheck.tsx

@@ -1,161 +0,0 @@
-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<HTMLInputElement>} [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 outline-none 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>
-	)
-}

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

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

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

@@ -1,27 +0,0 @@
-import type { Ref, InputHTMLAttributes } from "react"
-import type {
-	LibCheckInputVariant,
-	LibComponentBase,
-	ReactElement,
-} from "../../types"
-import type { ILibValidationStatus } from "../InputComponents"
-
-type ILibInputCheckBase = Omit<LibComponentBase<HTMLInputElement>, "element"> &
-	InputHTMLAttributes<HTMLInputElement> & {
-		ref?: Ref<HTMLLabelElement>
-		id: string
-		validation?: ILibValidationStatus
-		variant?: LibCheckInputVariant
-	}
-
-interface InputCheckbox extends ILibInputCheckBase {
-	type?: "checkbox"
-	iconCheck?: ReactElement
-}
-
-interface InputRadio extends ILibInputCheckBase {
-	type?: "radio"
-	iconCheck?: never
-}
-
-export type ILibInputCheck = InputCheckbox | InputRadio

package/dist/lib/components/InputComponents/InputButton.tsx

@@ -1,31 +0,0 @@
-import type { FC, MouseEventHandler } from "react"
-import { clsx, genRingColor } from "../../utils"
-import { INPUT_BUTTON_CLASSES } from "./classes"
-import type { ClassNames, ReactChildren } from "../../types"
-
-export const InputButton: FC<IInputButton> = ({
-	onClick,
-	children,
-	className,
-}) => {
-	return (
-		<button
-			onClick={onClick}
-			className={clsx(
-				INPUT_BUTTON_CLASSES,
-				genRingColor["primary"],
-				"input-button",
-				className,
-			)}
-			type="button"
-		>
-			{children}
-		</button>
-	)
-}
-
-interface IInputButton {
-	onClick?: MouseEventHandler<HTMLButtonElement>
-	children?: ReactChildren
-	className?: ClassNames
-}

package/dist/lib/components/InputComponents/InputIcon.tsx

@@ -1,28 +0,0 @@
-import type { FC } from "react"
-import { INPUT_ICON_CONTAINER_CLASSES } from "./classes"
-import { clsx } from "../../utils"
-import type { ReactElement, LibInputVariant } from "../../types"
-
-export const InputIcon: FC<IInputIcon> = ({ icon, inputVariant, disabled }) => {
-	if (!icon) return null
-
-	return (
-		<span
-			className={clsx(
-				"text-primary-500",
-				INPUT_ICON_CONTAINER_CLASSES,
-				inputVariant === "pill" && "ml-1",
-				disabled && "text-gray-500",
-				"input-icon-container",
-			)}
-		>
-			{icon}
-		</span>
-	)
-}
-
-interface IInputIcon {
-	icon: ReactElement | undefined
-	inputVariant: LibInputVariant | undefined
-	disabled: boolean | undefined
-}

package/dist/lib/components/InputComponents/InputList.tsx

@@ -1,53 +0,0 @@
-import type { Ref, FC } from "react"
-import { clsx } from "../../utils"
-import { INPUT_LIST_CLASSES } from "./classes"
-import type {
-	ClassNames,
-	LibInputBackground,
-	LibInputListDirection,
-	LibInputValidation,
-	LibInputVariant,
-	ReactChildren,
-} from "../../types"
-
-export const InputList: FC<IInputList> = ({
-	ref,
-	className,
-	listDirection,
-	inputVariant,
-	inputBackground,
-	validation,
-	children,
-	isOpen,
-}) => {
-	return (
-		<div
-			className={clsx(
-				INPUT_LIST_CLASSES({
-					isOpen,
-					listDirection,
-					inputVariant,
-					inputBackground,
-					validation,
-				}),
-				"z-0",
-				"input-list",
-				className,
-			)}
-			ref={ref}
-		>
-			{children}
-		</div>
-	)
-}
-
-interface IInputList {
-	ref?: Ref<HTMLDivElement>
-	className?: ClassNames
-	listDirection: LibInputListDirection | undefined
-	inputVariant: LibInputVariant | undefined
-	inputBackground: LibInputBackground | undefined
-	validation: LibInputValidation | undefined
-	children?: ReactChildren
-	isOpen: boolean
-}

package/dist/lib/components/InputComponents/InputListItem.tsx

@@ -1,68 +0,0 @@
-import type { FC, MouseEventHandler } from "react"
-import { clsx } from "../../utils"
-import type {
-	ClassNames,
-	LibValidationStatus,
-	ReactChildren,
-} from "../../types"
-
-export const InputListItem: FC<IInputListItem> = ({
-	onClick,
-	content,
-	cursor,
-	index,
-	validationStatus,
-	value,
-	"aria-label": ariaLabel,
-	children,
-	isActive,
-	className,
-}) => {
-	return (
-		<button
-			role="button"
-			onClick={onClick}
-			className={clsx(
-				"flex items-center gap-2 p-2 w-full text-left",
-				validationStatus === false
-					? "hover:bg-danger-300 active:bg-danger-600"
-					: validationStatus === true
-						? "hover:bg-success-300 active:bg-success-600"
-						: "hover:bg-primary-300 active:bg-primary-600",
-				(cursor === index || isActive) &&
-					(validationStatus === false
-						? "bg-danger-300"
-						: validationStatus === true
-							? "bg-success-300"
-							: "bg-primary-300"),
-				(content === value || isActive) && "text-white",
-				(content === value || isActive) &&
-					(validationStatus === false
-						? "bg-danger-500"
-						: validationStatus === true
-							? "bg-success-500"
-							: "bg-primary-500"),
-				"input-list-item",
-				className,
-			)}
-			aria-label={ariaLabel}
-			type="button"
-		>
-			{content}
-			{children}
-		</button>
-	)
-}
-
-interface IInputListItem {
-	onClick: MouseEventHandler<HTMLButtonElement>
-	content: string | undefined
-	value: string
-	cursor: number | undefined
-	index: number | undefined
-	validationStatus: LibValidationStatus | undefined
-	"aria-label": string
-	isActive?: boolean
-	children?: ReactChildren
-	className?: ClassNames
-}

package/dist/lib/components/InputComponents/InputPrefix.tsx

@@ -1,15 +0,0 @@
-import type { FC } from "react"
-import { clsx } from "../../utils"
-import { PREFIX_CLASSES } from "./classes"
-
-export const InputPrefix: FC<IInputPrefix> = ({ prefix }) => {
-	if (!prefix) return null
-
-	return (
-		<span className={clsx(PREFIX_CLASSES, "input-prefix")}>{prefix}</span>
-	)
-}
-
-interface IInputPrefix {
-	prefix: string | undefined
-}

package/dist/lib/components/InputComponents/InputSuffix.tsx

@@ -1,15 +0,0 @@
-import type { FC } from "react"
-import { clsx } from "../../utils"
-import { SUFFIX_CLASSES } from "./classes"
-
-export const InputSuffix: FC<IInputSuffix> = ({ suffix }) => {
-	if (!suffix) return null
-
-	return (
-		<span className={clsx(SUFFIX_CLASSES, "input-suffix")}>{suffix}</span>
-	)
-}
-
-interface IInputSuffix {
-	suffix: string | undefined
-}

package/dist/lib/components/InputComponents/InputValidation.tsx

@@ -1,32 +0,0 @@
-import { BiXCircle, BiCheckCircle } from "react-icons/bi"
-import { clsx } from "../../utils"
-import { INPUT_VALIDATION_CONTAINER } from "./classes"
-import type { LibInputValidation } from "../../types"
-
-export const InputValidation: FC<IInputValidation> = ({ validation }) => {
-	if (!validation || validation.status === undefined) return null
-
-	return (
-		<span
-			className={clsx(
-				INPUT_VALIDATION_CONTAINER,
-				validation.status === false
-					? "text-danger-500"
-					: "text-success-500",
-				"input-validation-container",
-			)}
-		>
-			{validation.status === false
-				? (validation.iconNotPassed ?? (
-						<BiXCircle className="input-validation-icon" />
-					))
-				: (validation.iconPassed ?? (
-						<BiCheckCircle className="input-validation-icon" />
-					))}
-		</span>
-	)
-}
-
-interface IInputValidation {
-	validation: LibInputValidation | undefined
-}

package/dist/lib/components/InputComponents/InputWithListWrapper.tsx

@@ -1,29 +0,0 @@
-import type { FC, Ref } from "react"
-import { clsx } from "../../utils"
-import type { ReactChildren } from "../../types"
-
-export const InputWithListWrapper: FC<IInputWithListWrapper> = ({
-	isOpen,
-	children,
-	ref,
-}) => {
-	return (
-		<div
-			ref={ref}
-			className={clsx(
-				"z-10 relative",
-				isOpen && "open",
-				"[&.open]:z-20",
-				"input-with-list-wrapper",
-			)}
-		>
-			{children}
-		</div>
-	)
-}
-
-interface IInputWithListWrapper {
-	ref?: Ref<HTMLDivElement>
-	isOpen: boolean
-	children?: ReactChildren
-}

package/dist/lib/components/InputComponents/InputWrapper.tsx

@@ -1,45 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../utils"
-import { INPUT_CONTAINER_CLASSES } from "./classes"
-import type {
-	ClassNames,
-	LibInputBackground,
-	LibInputValidation,
-	LibInputVariant,
-	ReactChildren,
-} from "../../types"
-
-export const InputWrapper: FC<IInputWrapper> = ({
-	children,
-	validation,
-	inputBackground,
-	inputVariant,
-	className,
-	hasListOpen,
-}) => {
-	return (
-		<div
-			className={clsx(
-				INPUT_CONTAINER_CLASSES({
-					validation,
-					inputBackground,
-					inputVariant,
-					hasListOpen,
-				}),
-				"input-wrapper",
-				className,
-			)}
-		>
-			{children}
-		</div>
-	)
-}
-
-interface IInputWrapper {
-	children?: ReactChildren
-	validation: LibInputValidation | undefined
-	inputBackground: LibInputBackground | undefined
-	inputVariant: LibInputVariant | undefined
-	className: ClassNames | undefined
-	hasListOpen?: boolean
-}