@julseb-lib/react 0.1.18 → 0.1.20

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

@@ -1,6 +0,0 @@
-import type { LibAllColors, LibAsideSize, LibComponentBase } from "../../types"
-
-export interface ILibAside extends LibComponentBase<HTMLDivElement> {
-	size?: LibAsideSize
-	backgroundColor?: LibAllColors
-}

package/dist/lib/components/Autocomplete/Autocomplete.tsx

@@ -1,222 +0,0 @@
-import { useRef, useMemo, type FC } from "react"
-import Fuse from "fuse.js"
-import { BiX } from "react-icons/bi"
-import { uuid } from "@julseb-lib/utils"
-import { useTouchScreen, useKeyPress, useMergeRefs } from "../../hooks"
-import { transformSearchKeys, useKeyboardNavigation } from "../../lib-utils"
-import { Key } from "../Key"
-import { Highlight } from "../Highlight"
-import { Text } from "../Text"
-import { InputContainer } from "../InputContainer"
-import {
-	InputWrapper,
-	InputWithListWrapper,
-	InputIcon,
-	InputButton,
-	InputValidation,
-	InputList,
-	INPUT_COMMON_CLASSES,
-	InputListItem,
-} from "../InputComponents"
-import { clsx } from "../../utils"
-import type { ILibAutocomplete } from "./types"
-
-/**
- * Autocomplete component for text input with fuzzy search functionality, keyboard navigation, and customizable dropdown results.
- *
- * @component
- *
- * @example
- * <Autocomplete
- *   value={searchValue}
- *   setValue={setSearchValue}
- *   listResults={["React", "Vue", "Angular", "Svelte"]}
- *   label="Framework"
- *   placeholder="Search frameworks..."
- *   focusKeys={["cmd+k"]}
- * />
- *
- * @extends HTMLInputElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the autocomplete container.
- * @prop {React.Ref<HTMLInputElement>} [props.ref] - Ref to the input element.
- * @prop {string} [props.label] - Label text to display above the autocomplete.
- * @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 autocomplete.
- * @prop {string} [props.value] - Current input value for searching.
- * @prop {function} [props.setValue] - Function to update the input value.
- * @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.id] - Unique identifier for the input element.
- * @prop {string[]} [props.listResults] - Array of items to search through and display as results.
- * @prop {"up" | "down"} [props.listDirection] - Direction for the dropdown results to appear.
- * @prop {object} [props.fuzzyOptions={}] - Configuration options for Fuse.js fuzzy search.
- * @prop {object} [props.icons] - Icon configuration object with left icon and clear icon.
- * @prop {string[]} [props.focusKeys=[""]] - Array of keyboard shortcuts to focus the input.
- * @prop {boolean} [props.showKeys] - Whether to display the keyboard shortcut keys.
- * @prop {string} [props.textNoResult="No result."] - Text to display when no search results are found.
- * @prop {boolean} [props.disabled] - Whether the autocomplete is disabled.
- * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {any} [props.rest] - Additional props spread to the input element.
- *
- * @returns {JSX.Element} The rendered Autocomplete component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/autocomplete
- */
-export const Autocomplete: FC<ILibAutocomplete> = ({
-	className,
-	ref,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	value,
-	setValue,
-	inputVariant,
-	inputBackground,
-	id,
-	listResults,
-	listDirection,
-	fuzzyOptions = {},
-	icons,
-	focusKeys = [""],
-	showKeys,
-	textNoResult = "No result.",
-	disabled,
-	validation,
-	...rest
-}) => {
-	const isTouchScreen = useTouchScreen()
-	const inputRef = useRef<HTMLInputElement>(null)
-
-	const keys = focusKeys
-	useKeyPress(keys, () => inputRef?.current?.focus())
-
-	const fuzzyResults = useMemo(() => {
-		const fuse = new Fuse(listResults, fuzzyOptions) as any
-
-		return fuse
-			?.search(value)
-			?.slice(0, 20)
-			?.map((res: any) => res.item)
-	}, [fuzzyOptions, listResults, value])
-
-	const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation<
-		typeof fuzzyResults
-	>({
-		data: fuzzyResults,
-		value,
-		setValue,
-	})
-
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			value={validation}
-			id={id}
-			validation={validation}
-			hasListOpen={isOpen}
-		>
-			<InputWithListWrapper isOpen={isOpen}>
-				<InputWrapper
-					validation={validation}
-					inputBackground={inputBackground}
-					inputVariant={inputVariant}
-					className={clsx(className)}
-					hasListOpen={isOpen}
-				>
-					<InputIcon
-						icon={icons?.left}
-						inputVariant={inputVariant}
-						disabled={disabled}
-					/>
-
-					<input
-						ref={useMergeRefs([ref, inputRef])}
-						className={clsx(
-							INPUT_COMMON_CLASSES({
-								inputBackground,
-								validationStatus: validation?.status,
-							}),
-							"autocomplete-input",
-							className,
-						)}
-						id={id}
-						value={value}
-						onChange={e => setValue(e.target.value)}
-						disabled={disabled}
-						onFocus={() => setIsOpen(true)}
-						onBlur={() => setTimeout(() => setIsOpen(false), 100)}
-						{...rest}
-					/>
-
-					{value?.length ? (
-						<InputButton
-							onClick={() => setValue("")}
-							className="input-clear-button"
-						>
-							{icons?.clear ?? (
-								<BiX size={16} className="input-clear-icon" />
-							)}
-						</InputButton>
-					) : null}
-
-					{!isTouchScreen && showKeys && !disabled && (
-						<span className="inline-flex items-center px-2 input-key-container">
-							<Key size="small" className="input-key">
-								{transformSearchKeys(keys)}
-							</Key>
-						</span>
-					)}
-
-					<InputValidation validation={validation} />
-				</InputWrapper>
-
-				<InputList
-					isOpen={isOpen && value.length}
-					listDirection={listDirection}
-					inputBackground={inputBackground}
-					inputVariant={inputVariant}
-					validation={validation}
-					ref={listRef}
-				>
-					{fuzzyResults?.length ? (
-						<>
-							{fuzzyResults.map((result: string, i: number) => (
-								<InputListItem
-									key={uuid()}
-									onClick={() => setValue(result)}
-									cursor={cursor}
-									validationStatus={validation?.status}
-									content={undefined}
-									value={result}
-									index={i}
-									aria-label={result}
-								>
-									<Highlight
-										className="autocomplete-result"
-										highlightedText={value}
-									>
-										{result}
-									</Highlight>
-								</InputListItem>
-							))}
-						</>
-					) : (
-						<Text
-							tag="em"
-							color="gray-500"
-							className={clsx("p-2", "autocomplete-no-result")}
-						>
-							{textNoResult}
-						</Text>
-					)}
-				</InputList>
-			</InputWithListWrapper>
-		</InputContainer>
-	)
-}

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

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

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

@@ -1,35 +0,0 @@
-import type { InputHTMLAttributes } from "react"
-import type { IFuseOptions } from "fuse.js"
-import type { DispatchState, LibComponentBase, ReactElement } from "../../types"
-import type {
-	ILibInputCommon,
-	ILibInputWithValidation,
-	ILibInputWithList,
-} from "../InputComponents"
-
-type ILibAutocompleteBase = InputHTMLAttributes<HTMLInputElement> &
-	Omit<LibComponentBase<HTMLInputElement>, "element"> &
-	ILibInputCommon &
-	ILibInputWithValidation &
-	ILibInputWithList & {
-		value: string
-		setValue: DispatchState<string>
-		listResults: Array<string>
-		textNoResult?: string
-		fuzzyOptions?: IFuseOptions<string>
-		icons?: { left?: ReactElement; clear?: ReactElement }
-		children?: never
-		type?: never
-	}
-
-type AutocompleteWithKeys = ILibAutocompleteBase & {
-	focusKeys?: Array<string>
-	showKeys?: boolean
-}
-
-type AutocompleteWithoutKeys = ILibAutocompleteBase & {
-	focusKeys?: undefined
-	showKeys?: never
-}
-
-export type ILibAutocomplete = AutocompleteWithKeys | AutocompleteWithoutKeys

package/dist/lib/components/Avatar/Avatar.tsx

@@ -1,93 +0,0 @@
-import { type FC } from "react"
-import { Badge } from "../Badge"
-import { clsx } from "../../utils"
-import { AvatarFn } from "./AvatarFn"
-import type { ILibAvatar } from "./types"
-
-/**
- * Avatar component for displaying a user image, initials, or icon, with optional badge and custom styles.
- *
- * @component
- *
- * @example
- * <Avatar backgroundColor="primary" contentColor="white" borderRadius="full" badge="New">JS</Avatar>
- *
- * @extends HTMLSpanElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the avatar.
- * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the avatar.
- * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the avatar element.
- * @prop {React.ReactNode} [props.children] - Content to display inside the avatar (image, initials, or icon).
- * @prop {string | { content?: React.ReactNode; backgroundColor?: string; contentColor?: string; className?: string }} [props.badge] - Badge to display on the avatar, can be a string or an object with content and colors.
- * @prop {React.CSSProperties} [props.containerStyle] - Inline styles for the avatar container.
- * @prop {string} [props.containerClassName] - Additional CSS classes for the avatar container.
- * @prop {string} [props.borderRadius] - Border radius of the avatar.
- * @prop {string} [props.borderColor] - Border color of the avatar.
- * @prop {string} [props.backgroundColor] - Background color of the avatar.
- * @prop {string} [props.contentColor] - Text color of the avatar.
- * @prop {any} [props.rest] - Additional props spread to the avatar element.
- *
- * @returns {JSX.Element} The rendered Avatar component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/avatar
- */
-export const Avatar: FC<ILibAvatar> = ({
-	className,
-	element = "span",
-	ref,
-	children,
-	badge,
-	containerStyle,
-	containerClassName,
-	borderRadius,
-	borderColor,
-	backgroundColor,
-	contentColor,
-	...rest
-}) => {
-	const Element = element
-
-	const avatarProps = {
-		className,
-		ref,
-		children,
-		borderRadius,
-		borderColor,
-		backgroundColor,
-		contentColor,
-		...rest,
-	}
-
-	if (badge) {
-		return (
-			<Element
-				className={clsx(
-					"relative w-fit h-fit",
-					"avatar-container",
-					containerClassName,
-				)}
-				style={containerStyle}
-			>
-				<Badge
-					contentColor={
-						typeof badge === "object" ? badge.contentColor : "white"
-					}
-					color={typeof badge === "object" ? badge.color : "primary"}
-					className={clsx(
-						"top-0 right-0 absolute -translate-y-2 translate-x-2",
-						typeof badge === "object"
-							? badge.className
-							: (undefined as any),
-						"avatar-badge",
-					)}
-				>
-					{typeof badge === "object" ? badge.content : badge}
-				</Badge>
-
-				<AvatarFn {...avatarProps} />
-			</Element>
-		)
-	}
-
-	return <AvatarFn {...avatarProps} />
-}

package/dist/lib/components/Avatar/AvatarFn.tsx

@@ -1,44 +0,0 @@
-import { type FC } from "react"
-import {
-	clsx,
-	genBorderRadius,
-	genBorderAllColors,
-	genBgAllColors,
-	genTextAllColor,
-} from "../../utils"
-import type { ILibAvatar } from "./types"
-
-export const AvatarFn: FC<
-	Omit<ILibAvatar, "badge" | "containerStyle" | "containerClassName">
-> = ({
-	className,
-	element = "span",
-	ref,
-	children,
-	borderRadius = "full",
-	backgroundColor = "primary",
-	borderColor = "transparent",
-	contentColor = "white",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-flex justify-center items-center rounded-full size-12 overflow-hidden font-bold text-xl",
-				borderColor !== "transparent" && "border",
-				genBorderRadius[borderRadius],
-				genBorderAllColors[borderColor],
-				genBgAllColors[backgroundColor],
-				genTextAllColor[contentColor],
-				"avatar",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

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

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

@@ -1,37 +0,0 @@
-import type {
-	ClassNames,
-	LibAllColors,
-	LibComponentBase,
-	LibRadiuses,
-	ReactChildren,
-	CSSProperties,
-} from "../../types"
-
-interface ILibAvatarBase extends LibComponentBase<HTMLSpanElement> {
-	borderRadius?: LibRadiuses
-	borderColor?: LibAllColors
-	backgroundColor?: LibAllColors
-	contentColor?: LibAllColors
-}
-
-interface AvatarWithBadge extends ILibAvatarBase {
-	badge?:
-		| boolean
-		| number
-		| {
-				content?: ReactChildren
-				contentColor?: LibAllColors
-				color?: LibAllColors
-				className?: ClassNames
-		  }
-	containerStyle?: CSSProperties
-	containerClassName?: ClassNames
-}
-
-interface AvatarWithoutBadge extends ILibAvatarBase {
-	badge?: undefined | false
-	containerStyle?: never
-	containerClassName?: never
-}
-
-export type ILibAvatar = AvatarWithBadge | AvatarWithoutBadge

package/dist/lib/components/BackToTop/BackToTop.tsx

@@ -1,96 +0,0 @@
-import { useEffect, useState, type FC } from "react"
-import { BiUpArrowAlt } from "react-icons/bi"
-import { scrollToTop } from "@julseb-lib/utils"
-import { ButtonIcon } from "../ButtonIcon"
-import { clsx, genRingColor } from "../../utils"
-import type { ILibBackToTop } from "./types"
-
-/**
- * BackToTop component for providing a smooth scroll-to-top functionality with customizable styling and positioning.
- *
- * @component
- *
- * @example
- * <BackToTop
- *   color="primary"
- *   tooltip="Back to top"
- *   showTooltip={{ position: "left" }}
- * />
- *
- * @extends ILibButtonIcon
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the back-to-top button.
- * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
- * @prop {React.ReactElement} [props.icon=<BiUpArrowAlt />] - Custom icon for the back-to-top button.
- * @prop {LibColorsShort} [props.color="primary"] - Color theme for the button styling.
- * @prop {string} [props.tooltip="Back to top"] - Tooltip text displayed on hover.
- * @prop {LibTooltipPositionOptions} [props.showTooltip] - Configuration for tooltip positioning and styling.
- *
- * @returns {JSX.Element} The rendered BackToTop component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/back-to-top
- */
-export const BackToTop: FC<ILibBackToTop> = ({
-	className,
-	ref,
-	icon = <BiUpArrowAlt />,
-	color = "primary",
-	tooltip = "Back to top",
-	showTooltip,
-	...rest
-}) => {
-	const [isVisible, setIsVisible] = useState(false)
-
-	useEffect(() => {
-		const scrollFn = () => {
-			if (window.scrollY >= 200) {
-				setIsVisible(true)
-			} else {
-				setIsVisible(false)
-			}
-		}
-
-		window.addEventListener("scroll", scrollFn)
-
-		return () => window.removeEventListener("scroll", scrollFn)
-	}, [])
-
-	const smoothScroll = () => {
-		document.body.classList.add("smooth")
-		document.documentElement.classList.add("smooth")
-
-		setTimeout(() => scrollToTop(), 100)
-
-		setTimeout(() => {
-			document.body.classList.remove("smooth")
-			document.documentElement.classList.remove("smooth")
-		}, 1000)
-	}
-
-	return (
-		<ButtonIcon
-			ref={ref}
-			className={clsx(
-				isVisible ? "opacity-100 visible " : "opacity-0 invisible",
-				genRingColor[color],
-				"back-to-top",
-				className,
-			)}
-			icon={icon}
-			color={color}
-			tooltip={tooltip as any}
-			showTooltip={
-				showTooltip && {
-					position: "left",
-					className: [
-						"fixed bottom-5 right-5 [&_.tooltip]:translate-y-[10px] [&_.tooltip]:translate-x-[-50%] transition-all duration-200 ease-in-out",
-						isVisible ? "opacity-100" : "opacity-0",
-					],
-					...(showTooltip as any),
-				}
-			}
-			onClick={smoothScroll}
-			{...rest}
-		/>
-	)
-}

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

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

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

@@ -1,9 +0,0 @@
-import type { ILibButtonIcon } from "../ButtonIcon/types"
-import type { ReactElement } from "../../types"
-
-export type ILibBackToTop = Omit<
-	Partial<ILibButtonIcon>,
-	"icon" | "isLoading" | "loaderVariant" | "loaderClasses"
-> & {
-	icon?: ReactElement
-}

package/dist/lib/components/Badge/Badge.tsx

@@ -1,61 +0,0 @@
-import { type FC } from "react"
-import {
-	clsx,
-	genBgAllColors,
-	genTextAllColor,
-	genBorderRadius,
-} from "../../utils"
-import type { ILibBadge } from "./types"
-
-/**
- * Badge component for displaying a colored label or status.
- *
- * @component
- *
- * @example
- * <Badge backgroundColor="primary" contentColor="white" borderRadius="full">New</Badge>
- *
- * @extends HTMLSpanElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the badge.
- * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the badge.
- * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the badge element.
- * @prop {React.ReactNode} [props.children] - Content to display inside the badge.
- * @prop {LibAllColors} [props.color="primary"] - Background color of the badge.
- * @prop {LibAllColors} [props.contentColor="white"] - Text color of the badge.
- * @prop {LibRadius} [props.borderRadius="full"] - Border radius of the badge.
- * @prop {any} [props.rest] - Additional props spread to the badge element.
- *
- * @returns {JSX.Element} The rendered Badge component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/badge
- */
-export const Badge: FC<ILibBadge> = ({
-	className,
-	element = "span",
-	ref,
-	children,
-	color = "primary",
-	contentColor = "white",
-	borderRadius = "full",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-flex justify-center items-center w-fit min-w-6 h-6",
-				genBgAllColors[color],
-				genTextAllColor[contentColor],
-				genBorderRadius[borderRadius],
-				"badge",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

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

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

@@ -1,7 +0,0 @@
-import type { LibAllColors, LibComponentBase, LibRadiuses } from "../../types"
-
-export interface ILibBadge extends LibComponentBase<HTMLSpanElement> {
-	color?: LibAllColors
-	contentColor?: LibAllColors
-	borderRadius?: LibRadiuses
-}