@julseb-lib/react 0.1.19 → 0.1.20

package/dist/lib/components/Key/Key.tsx

@@ -1,84 +0,0 @@
-import { Children, Fragment, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { clsx, genBgColor50, genBorderColorShort } from "../../utils"
-import type { ILibKey } from "./types"
-
-/**
- * Key component for displaying keyboard keys or shortcuts.
- *
- * @component
- *
- * @example
- * <Key keys={["Ctrl", "C"]} size="large" accentColor="blue" />
- *
- * @prop {Array<string>} keys - The list of keys to display.
- * @prop {boolean} [withSeparator] - If true, displays a separator between keys.
- * @prop {"default" | "large" | "form"} [size] - The size of the key component.
- * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray"} [accentColor] - Accent color for the key, excluding black, white, transparent, background, and current.
- *
- * @returns {JSX.Element} The rendered Key component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/layouts/key
- */
-export const Key: FC<ILibKey> = ({
-	className,
-	element = "span",
-	ref,
-	children,
-	withSeparator,
-	size = "small",
-	accentColor = "primary",
-	...rest
-}) => {
-	const Element = element
-	const childrenArray = Children.toArray(
-		children?.toString().replaceAll(",", "").split(""),
-	)
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"justify-self-start self-start border text-black",
-				genBorderRadius[size],
-				genFontSize[size],
-				genPadding[size],
-				genBgColor50[accentColor],
-				genBorderColorShort[accentColor],
-				genBorderBottom[size],
-				"key",
-				className,
-			)}
-			{...rest}
-		>
-			{childrenArray.map((child, i) => (
-				<Fragment key={uuid()}>
-					{child}
-					{withSeparator && i !== childrenArray.length - 1 && " + "}
-				</Fragment>
-			))}
-		</Element>
-	)
-}
-
-type Gen = Record<"small" | "large", string>
-
-const genBorderRadius: Gen = {
-	small: "rounded-xs",
-	large: "rounded-sm",
-}
-
-const genFontSize: Gen = {
-	small: "text-sm",
-	large: "text-base",
-}
-
-const genPadding: Gen = {
-	small: "py-0 px-1",
-	large: "py-1 px-2",
-}
-
-const genBorderBottom: Gen = {
-	small: "border-b-3",
-	large: "border-b-4",
-}

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

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

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

@@ -1,16 +0,0 @@
-import type {
-	LibColorsShort,
-	LibComponentBase,
-	LibKeySize,
-	ReactChildren,
-} from "../../types"
-
-export interface ILibKey extends LibComponentBase<HTMLSpanElement> {
-	children: ReactChildren
-	withSeparator?: boolean
-	size?: LibKeySize
-	accentColor?: Exclude<
-		LibColorsShort,
-		"black" | "white" | "transparent" | "background" | "current"
-	>
-}

package/dist/lib/components/Linkify/Linkify.tsx

@@ -1,67 +0,0 @@
-import { Fragment, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { Text } from "../Text"
-import { clsx } from "../../utils"
-import type { ILibLinkify } from "./types"
-
-const URL_REGEX =
-	/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm
-
-/**
- * Linkify component that automatically detects URLs in the provided text and wraps them in anchor tags.
- *
- * @component
- *
- * @example
- * <Linkify>
- *   Visit https://github.com for more information.
- * </Linkify>
- *
- * @extends ILibText
- *
- * @prop {string} [props.className] - Additional class names to apply to the container element.
- * @prop {ElementType} [props.element=Text] - The HTML element or React component to render as the container. Default is `Text`.
- * @prop {RefObject<HTMLHeadingElement | HTMLParagraphElement | HTMLQuoteElement | HTMLDListElement | HTMLOListElement | HTMLUListElement>} [props.ref] - Ref for the container element.
- * @prop {string} props.children - The text content to parse and linkify.
- * @prop {boolean} [props.blank] - If true, links open in a new tab (`_blank`). Default is `false`.
- * @prop {string} [props.linkClasses] - Additional class names to apply to the generated anchor tags.
- * @prop {object} [props.rest] - Additional props spread to the container element.
- *
- * @returns {ReactElement} The rendered Linkify component with URLs converted to clickable links.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/linkify
- */
-export const Linkify: FC<ILibLinkify> = ({
-	className,
-	element = Text,
-	ref,
-	children,
-	blank,
-	linkClasses,
-	...rest
-}) => {
-	const Element = element
-
-	const words: Array<string> = children ? children.split(" ") : []
-
-	return (
-		<Element ref={ref} className={clsx("linkify",className)} {...rest}>
-			{words?.map((word: string) =>
-				word.match(URL_REGEX) ? (
-					<Fragment key={uuid()}>
-						<a
-							href={word}
-							target={blank ? "_blank" : undefined}
-							rel={blank ? "noreferrer noopener" : undefined}
-							className={clsx(linkClasses, "linkify-link")}
-						>
-							{word}
-						</a>{" "}
-					</Fragment>
-				) : (
-					word + " "
-				),
-			)}
-		</Element>
-	)
-}

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

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

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

@@ -1,8 +0,0 @@
-import type { ClassNames } from "../../types"
-import type { ILibText } from "../Text/types"
-
-export type ILibLinkify = ILibText & {
-	blank?: boolean
-	children?: string
-	linkClasses?: ClassNames
-}

package/dist/lib/components/ListGroup/ListGroup.tsx

@@ -1,96 +0,0 @@
-import { useRef, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { clsx } from "../../utils"
-import { useMergeRefs } from "../../hooks"
-import { ListGroupTitle } from "./ListGroupTitle"
-import { ListGroupItem } from "./ListGroupItem"
-import type { ILibListGroup } from "./types"
-
-/**
- * ListGroup component for displaying a structured list of items with optional title, numbering, and separators.
- *
- * @component
- *
- * @example
- * <ListGroup
- *   title="My List"
- *   items={[
- *     { title: "Item 1", body: "Description 1" },
- *     { title: "Item 2", body: "Description 2" }
- *   ]}
- *   showNumbers
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the list group container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the list group container element.
- * @prop {React.ReactNode} [props.children] - Child components to render inside the list group.
- * @prop {string | object} [props.title] - Title text or configuration object for the list group header.
- * @prop {boolean} [props.noSeparator] - Whether to hide separators between list items.
- * @prop {boolean} [props.showNumbers] - Whether to display numbers next to each list item.
- * @prop {Array} [props.items] - Array of item objects to render as list items.
- *
- * @returns {JSX.Element} The rendered ListGroup component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/list-group
- */
-export const ListGroup: FC<ILibListGroup> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	title,
-	noSeparator,
-	showNumbers,
-	items,
-	...rest
-}) => {
-	const Element = element
-	const listRef = useRef<HTMLDivElement>(null)
-
-	return (
-		<Element
-			ref={useMergeRefs([ref, listRef])}
-			className={clsx(
-				"border border-gray-200 rounded-lg overflow-y-scroll",
-				"list-group-container",
-				className,
-			)}
-			{...rest}
-		>
-			{title && (
-				<ListGroupTitle
-					{...(title as any)}
-					isFixed={typeof title === "object" ? title.isFixed : false}
-					noSeparator={noSeparator}
-					listRef={listRef}
-					className={typeof title === "object" && title.className}
-					ref={typeof title === "object" ? title.ref : null}
-					shadow={
-						typeof title === "object"
-							? title.shadowOnScroll
-							: undefined
-					}
-				>
-					{typeof title === "object" ? title.text : title}
-				</ListGroupTitle>
-			)}
-
-			{items
-				? items.map((item, i) => (
-						<ListGroupItem
-							{...(item as any)}
-							key={uuid()}
-							title={item.title}
-							number={showNumbers ? i + 1 : undefined}
-							body={item.body}
-							contentRight={item.contentRight}
-							noSeparator={noSeparator}
-						/>
-					))
-				: children}
-		</Element>
-	)
-}

package/dist/lib/components/ListGroup/ListGroupItem.tsx

@@ -1,86 +0,0 @@
-import { type FC } from "react"
-import { Text } from "../Text"
-import { clsx } from "../../utils"
-import type { ILibListGroupItem } from "./types"
-
-/**
- * ListGroupItem component for rendering individual items within a list group with optional numbering, content, and separators.
- *
- * @component
- *
- * @example
- * <ListGroupItem
- *   title="Item Title"
- *   body="Item description"
- *   number={1}
- *   contentRight={<Button>Action</Button>}
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the list item container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the list item container element.
- * @prop {React.ReactNode} [props.children] - Child components to render inside the list item.
- * @prop {string} [props.title] - Title text to display for the list item.
- * @prop {string} [props.body] - Body text or description to display below the title.
- * @prop {React.ReactNode} [props.contentRight] - Content to display on the right side of the list item.
- * @prop {boolean} [props.noSeparator] - Whether to hide the separator border between list items.
- * @prop {number} [props.number] - Number to display before the title when using numbered lists.
- *
- * @returns {JSX.Element} The rendered ListGroupItem component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/list-group
- */
-export const ListGroupItem: FC<ILibListGroupItem> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	title,
-	body,
-	contentRight,
-	noSeparator,
-	number,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex justify-between gap-2 p-2 w-full",
-				!noSeparator &&
-					"[&:not(:last-child)]:border-b [&:not(:last-child)]:border-b-gray-200",
-				"disabled:bg-gray-200 disabled:text-gray-500",
-				"list-group-item",
-				className,
-			)}
-			{...rest}
-		>
-			{children ?? (
-				<>
-					<div className="flex flex-col gap-0.5 content-wrapper grow">
-						{number ? (
-							<span className="inline-flex gap-2 title-wrapper">
-								<span className="number">{number}</span>
-								<Text tag="h6" className="title">
-									{title}
-								</Text>
-							</span>
-						) : (
-							<Text tag="h6" className="title">
-								{title}
-							</Text>
-						)}
-
-						{body && <Text className="body">{body}</Text>}
-					</div>
-
-					{contentRight}
-				</>
-			)}
-		</Element>
-	)
-}

package/dist/lib/components/ListGroup/ListGroupTitle.tsx

@@ -1,84 +0,0 @@
-import { useEffect, useState, type FC } from "react"
-import { Text } from "../Text"
-import { clsx, genBoxShadow } from "../../utils"
-import type { ILibListGroupTitle } from "./types"
-
-/**
- * ListGroupTitle component for rendering a styled header/title for list groups with optional fixed positioning and shadow effects.
- *
- * @component
- *
- * @example
- * <ListGroupTitle
- *   isFixed
- *   shadow="lg"
- *   listRef={listRef}
- * >
- *   My List Title
- * </ListGroupTitle>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the title container.
- * @prop {React.ElementType} [props.element=Text] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the title element.
- * @prop {React.ReactNode} [props.children] - Content to display inside the title.
- * @prop {boolean} [props.isFixed] - Whether the title should be sticky positioned at the top.
- * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "none"} [props.shadow] - Shadow variant to apply when scrolled.
- * @prop {React.RefObject} [props.listRef] - Ref to the scrollable list container for scroll detection.
- * @prop {boolean} [props.noSeparator] - Whether to hide the bottom border separator.
- *
- * @returns {JSX.Element} The rendered ListGroupTitle component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/list-group
- */
-export const ListGroupTitle: FC<ILibListGroupTitle> = ({
-	className,
-	element = Text,
-	ref,
-	children,
-	isFixed,
-	shadow,
-	listRef,
-	noSeparator,
-	...rest
-}) => {
-	const Element = element
-	const [isScrolled, setIsScrolled] = useState(false)
-
-	useEffect(() => {
-		if (listRef && typeof listRef !== "function" && listRef.current) {
-			const handleScroll = () => {
-				const scroll = listRef.current?.scrollTop
-
-				if (scroll && scroll >= 24) {
-					setIsScrolled(true)
-				} else {
-					setIsScrolled(false)
-				}
-			}
-			listRef.current.addEventListener("scroll", handleScroll)
-			return () => {
-				listRef.current?.removeEventListener("scroll", handleScroll)
-			}
-		}
-	}, [])
-
-	return (
-		<Element
-			ref={ref}
-			tag="h6"
-			className={clsx(
-				"bg-primary-500 p-3 w-full font-black text-white text-left transition-shadow duration-200",
-				!noSeparator && "border-b-gray-200 border-b",
-				isFixed && "sticky top-0 left-0",
-				isScrolled && shadow && genBoxShadow[shadow],
-				"list-group-title",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

@@ -1,3 +0,0 @@
-export * from "./ListGroup"
-export * from "./ListGroupTitle"
-export * from "./ListGroupItem"

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

@@ -1,69 +0,0 @@
-import type { Ref } from "react"
-import type {
-	ClassNames,
-	LibComponentBase,
-	LibListGroupItem,
-	LibShadows,
-	ReactChildren,
-} from "../../types"
-
-/*====================== ListGroup ======================*/
-
-interface ILibListGroupBase
-	extends Omit<LibComponentBase<HTMLDivElement>, "title"> {
-	title?:
-		| string
-		| {
-				text: string
-				isFixed?: boolean
-				className?: ClassNames
-				ref?: Ref<HTMLDivElement>
-				shadowOnScroll?: LibShadows
-		  }
-	noSeparator?: boolean
-	showNumbers?: boolean
-}
-
-interface ListGroupWithItems extends ILibListGroupBase {
-	items: Array<LibListGroupItem>
-	children?: never
-}
-
-interface ListGroupWithChildren extends ILibListGroupBase {
-	items?: never
-	children?: ReactChildren
-}
-
-export type ILibListGroup = ListGroupWithItems | ListGroupWithChildren
-
-/*====================== ListGroupTitle ======================*/
-
-interface ILibListGroupTitleBase extends LibComponentBase<HTMLDivElement> {
-	isFixed?: boolean
-	noSeparator?: boolean
-}
-
-interface ListGroupTitleWithShadow extends ILibListGroupTitleBase {
-	shadow?: LibShadows
-	listRef: Ref<HTMLDivElement>
-}
-
-interface ListGroupTitleWithoutShadow extends ILibListGroupTitleBase {
-	shadow?: null | undefined
-	listRef?: Ref<HTMLDivElement>
-}
-
-export type ILibListGroupTitle =
-	| ListGroupTitleWithShadow
-	| ListGroupTitleWithoutShadow
-
-/*====================== ListGroupItem ======================*/
-
-export interface ILibListGroupItem
-	extends Omit<LibComponentBase<HTMLDivElement>, "title"> {
-	title: ReactChildren
-	body?: ReactChildren
-	contentRight?: ReactChildren
-	noSeparator?: boolean
-	number?: number
-}

package/dist/lib/components/Loader/Loader.tsx

@@ -1,38 +0,0 @@
-import { type FC } from "react"
-import { LoaderOne } from "./templates/LoaderOne"
-import { LoaderTwo } from "./templates/LoaderTwo"
-import { LoaderThree } from "./templates/LoaderThree"
-import type { ILibLoader } from "./types"
-
-/**
- * Loader component for displaying a loading indicator with multiple style variants and color options.
- *
- * @component
- *
- * @example
- * <Loader variant={2} color="primary" />
- *
- * @extends HTMLSpanElement
- *
- * @prop {1 | 2 | 3} [props.variant=1] Possible values: 1, 2, 3. - Loader variant style.
- * @prop {string} [props.color="primary"] Any color from the library. - Loader color.
- * @prop {string} [props.className] - Additional CSS classes to apply to the loader.
- * @prop {keyof JSX.IntrinsicElements} [props.element="span"] - The HTML element to render as the loader.
- * @prop {React.Ref<HTMLSpanElement>} [props.ref] - Ref to the loader element.
- * @prop {any} [props.rest] - Additional props spread to the loader element.
- *
- * @returns {JSX.Element} The rendered Loader component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/loader
- */
-export const Loader: FC<ILibLoader> = ({ variant, ...rest }) => {
-	switch (variant) {
-		case 2:
-			return <LoaderTwo {...rest} />
-		case 3:
-			return <LoaderThree {...rest} />
-		case 1:
-		default:
-			return <LoaderOne {...rest} />
-	}
-}

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

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

package/dist/lib/components/Loader/templates/LoaderOne.tsx

@@ -1,27 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../../utils"
-import { genBorderBottomColor } from "../utils/gen-border-bottom"
-import type { ILibLoader } from "../types"
-
-export const LoaderOne: FC<Omit<ILibLoader, "variant">> = ({
-	className,
-	element = "span",
-	ref,
-	color = "primary",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-block relative border-8 border-transparent rounded-full size-12 animate-[spin_1200ms_linear_infinite]",
-				genBorderBottomColor[color],
-				"loader loader-1",
-				className,
-			)}
-			{...rest}
-		/>
-	)
-}

package/dist/lib/components/Loader/templates/LoaderThree.tsx

@@ -1,47 +0,0 @@
-import { type FC } from "react"
-import { clsx, genBgAllColors } from "../../../utils"
-import type { ILibLoader } from "../types"
-
-export const LoaderThree: FC<Omit<ILibLoader, "variant">> = ({
-	className,
-	element = "div",
-	ref,
-	color = "primary",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-flex items-center gap-2 w-fit h-4",
-				"loader loader-3",
-				className,
-			)}
-			{...rest}
-		>
-			<span
-				className={clsx(
-					"block rounded-full size-4 animate-[loader-pulse_1200ms_linear_infinite_100ms] dot [--dot-delay:100ms]",
-					genBgAllColors[color],
-					"loader-3-dot",
-				)}
-			/>
-			<span
-				className={clsx(
-					"block rounded-full size-4 animate-[loader-pulse_1200ms_linear_infinite_300ms] dot [--dot-delay:300ms]",
-					genBgAllColors[color],
-					"loader-3-dot",
-				)}
-			/>
-			<span
-				className={clsx(
-					"block rounded-full size-4 animate-[loader-pulse_1200ms_linear_infinite_500ms] dot [--dot-delay:500ms]",
-					genBgAllColors[color],
-					"loader-3-dot",
-				)}
-			/>
-		</Element>
-	)
-}