@julseb-lib/react 0.1.18 → 0.1.20

package/dist/lib/components/ButtonIcon/ButtonIcon.tsx

@@ -1,134 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../utils"
-import { Tooltip } from "../Tooltip"
-import { ButtonIconFn } from "./ButtonFn"
-import type { ILibButtonIcon } from "./types"
-
-/**
- * ButtonIcon component for displaying an icon button with optional tooltip and loading states.
- *
- * @component
- *
- * @example
- * <ButtonIcon
- *   icon={<BiUser />}
- *   color="primary"
- *   variant="plain"
- *   tooltip="User profile"
- *   showTooltip
- * />
- *
- * @extends HTMLButtonElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the button.
- * @prop {keyof JSX.IntrinsicElements} [props.element="button"] - The HTML element to render as the button.
- * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the button element.
- * @prop {React.ReactNode} [props.icon] - Icon element to display inside the button.
- * @prop {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "white"} [props.color="primary"] - Button color theme.
- * @prop {string} [props.borderRadius="full"] - Border radius of the button.
- * @prop {"plain" | "ghost" | "outline" | "transparent"} [props.variant="plain"] - Button variant style.
- * @prop {boolean} [props.isLoading] - Whether the button is in a loading state.
- * @prop {1 | 2 | 3} [props.loaderVariant=1] - Loader variant to display when loading.
- * @prop {string} [props.loaderClasses] - Additional CSS classes for the loader.
- * @prop {string} [props.tooltip] - Tooltip text to display.
- * @prop {boolean | object} [props.showTooltip] - Whether to show tooltip or tooltip configuration object.
- * @prop {React.CSSProperties} [props.containerStyle] - Inline styles for the container.
- * @prop {string} [props.containerClasses] - Additional CSS classes for the container.
- * @prop {string} [props.aria-label] - ARIA label for accessibility, defaults to tooltip value.
- * @prop {string} [props.type="button"] - Button type attribute.
- * @prop {any} [props.rest] - Additional props spread to the button element.
- *
- * @returns {JSX.Element} The rendered ButtonIcon component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/button-icon
- */
-export const ButtonIcon: FC<ILibButtonIcon> = ({
-	className,
-	element = "button",
-	ref,
-	icon,
-	color = "primary",
-	borderRadius = "full",
-	variant = "plain",
-	isLoading,
-	loaderVariant = 1,
-	loaderClasses,
-	tooltip,
-	showTooltip,
-	containerStyle,
-	containerClasses,
-	"aria-label": ariaLabel = tooltip,
-	type = "button",
-	...rest
-}) => {
-	const buttonProps = {
-		element,
-		className,
-		ref,
-		icon,
-		color,
-		borderRadius,
-		variant,
-		isLoading,
-		loaderVariant,
-		"aria-label": ariaLabel,
-		type,
-		...rest,
-	}
-
-	if (tooltip && showTooltip) {
-		return (
-			<Tooltip
-				tooltip={tooltip}
-				position={
-					typeof showTooltip === "object"
-						? showTooltip.position
-						: "top"
-				}
-				offset={
-					typeof showTooltip === "object" ? showTooltip.offset : "0px"
-				}
-				backgroundColor={
-					typeof showTooltip === "object"
-						? showTooltip.backgroundColor
-						: "black-80"
-				}
-				textColor={
-					typeof showTooltip === "object"
-						? showTooltip.textColor
-						: "white"
-				}
-				hideArrow={
-					typeof showTooltip === "object"
-						? showTooltip.hideArrow
-						: false
-				}
-				className={clsx(
-					typeof showTooltip === "object"
-						? (showTooltip.className as any)
-						: undefined,
-					"button-icon-tooltip",
-				)}
-				style={
-					typeof showTooltip === "object"
-						? showTooltip.style
-						: undefined
-				}
-				tooltipClasses={
-					typeof showTooltip === "object"
-						? showTooltip.tooltipClassName
-						: undefined
-				}
-				tooltipStyle={
-					typeof showTooltip === "object"
-						? showTooltip.tooltipStyle
-						: undefined
-				}
-			>
-				<ButtonIconFn {...(buttonProps as any)} />
-			</Tooltip>
-		)
-	}
-
-	return <ButtonIconFn {...(buttonProps as any)} />
-}

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

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

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

@@ -1,52 +0,0 @@
-import type { ButtonHTMLAttributes } from "react"
-import type {
-	LibColorsHover,
-	LibComponentBase,
-	LibRadiuses,
-	ReactElement,
-	LibButtonVariant,
-	LibLoaderVariant,
-	ClassNames,
-	CSSProperties,
-	LibTooltipPositionOptions,
-} from "../../types"
-
-interface ILibButtonIconBase
-	extends LibComponentBase<HTMLButtonElement>,
-		ButtonHTMLAttributes<HTMLButtonElement> {
-	children?: never
-	icon: ReactElement
-	color?: LibColorsHover
-	borderRadius?: LibRadiuses
-	variant?: LibButtonVariant
-}
-
-interface ButtonIconLoading extends ILibButtonIconBase {
-	isLoading?: boolean
-	loaderVariant?: LibLoaderVariant
-	loaderClasses?: ClassNames
-}
-
-interface ButtonIconNotLoading extends ILibButtonIconBase {
-	isLoading?: undefined | null
-	loaderVariant?: never
-	loaderClasses?: never
-}
-
-type ButtonIconLoader = ButtonIconLoading | ButtonIconNotLoading
-
-type ButtonIconWithTooltip = ButtonIconLoader & {
-	tooltip?: string
-	showTooltip?: boolean | LibTooltipPositionOptions
-	containerStyle?: CSSProperties
-	containerClasses?: ClassNames
-}
-
-type ButtonIconWithoutTooltip = ButtonIconLoader & {
-	tooltip?: undefined | null
-	showTooltip?: never
-	containerStyle?: never
-	containerClasses?: never
-}
-
-export type ILibButtonIcon = ButtonIconWithTooltip | ButtonIconWithoutTooltip

package/dist/lib/components/CodeContainer/CodeContainer.tsx

@@ -1,108 +0,0 @@
-import { useState, type FC } from "react"
-import SyntaxHighlighter from "react-syntax-highlighter"
-import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
-import { BiCheck, BiClipboard } from "react-icons/bi"
-import { ButtonIcon } from "../ButtonIcon"
-import { clsx, genRingColor, genTextAllColor } from "../../utils"
-import type { ILibCodeContainer } from "./types"
-
-/**
- * CodeContainer component for displaying syntax-highlighted code with optional copy functionality.
- *
- * @component
- *
- * @example
- * <CodeContainer>
- *   const hello = "world";
- *   console.log(hello);
- * </CodeContainer>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the code container.
- * @prop {React.ElementType} [props.element] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the code container element.
- * @prop {React.ReactNode} [props.children] - Code content to display and highlight.
- * @prop {object} [props.highlighterProps] - Additional props to pass to the syntax highlighter.
- * @prop {LibAllColors} [props.textColor] - Text color for the code content.
- * @prop {LibAllColors} [props.backgroundColor] - Background color for the code content.
- * @prop {object} [props.style=atomOneDark] - Custom styles for the syntax highlighter.
- * @prop {boolean} [props.hideCopyButton] - Whether to hide the copy to clipboard button.
- * @prop {object} [props.tooltipTexts] - Custom tooltip texts for copy button states.
- * @prop {object} [props.icons] - Custom icons for copy button states.
- *
- * @returns {JSX.Element} The rendered CodeContainer component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/code-container
- */
-export const CodeContainer: FC<ILibCodeContainer> = ({
-	className,
-	element,
-	ref,
-	children,
-	highlighterProps,
-	textColor,
-	backgroundColor,
-	style = atomOneDark,
-	hideCopyButton,
-	tooltipTexts,
-	icons,
-	...rest
-}) => {
-	const Element = element ?? (textColor || backgroundColor ? "pre" : "div")
-
-	const [hasCopied, setHasCopied] = useState(false)
-
-	const copyToClipboard = () => {
-		if (children) {
-			let copyString = children.toString()
-
-			if (copyString[0] === "$") {
-				copyString = copyString.replace("$ ", "")
-			}
-
-			navigator.clipboard.writeText(copyString)
-			setHasCopied(true)
-		}
-
-		setTimeout(() => setHasCopied(false), 1000)
-	}
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"relative outline-none",
-				"code-container-wrapper",
-				"[&>pre]:bg-gray-800! [&>pre]:p-4!",
-				textColor && genTextAllColor[textColor],
-				genRingColor["primary"],
-				className,
-			)}
-			{...rest}
-		>
-			<SyntaxHighlighter style={style}>
-				{children as any}
-			</SyntaxHighlighter>
-
-			{!hideCopyButton && (
-				<ButtonIcon
-					className={clsx("size-8", "copy-button")}
-					onClick={copyToClipboard}
-					icon={
-						hasCopied
-							? (icons?.copied ?? <BiCheck size={16} />)
-							: (icons?.copy ?? <BiClipboard size={16} />)
-					}
-					tooltip={
-						hasCopied
-							? (tooltipTexts?.copied ?? "Copied!")
-							: (tooltipTexts?.copy ?? "Copy")
-					}
-					color={hasCopied ? "success" : "primary"}
-					showTooltip={{ className: "absolute top-4 right-4" }}
-				/>
-			)}
-		</Element>
-	)
-}

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

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

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

@@ -1,230 +0,0 @@
-import type { SyntaxHighlighterProps } from "react-syntax-highlighter"
-import type {
-	LibAllColors,
-	LibComponentBase,
-	CSSProperties,
-	ReactElement,
-} from "../../types"
-
-interface HighlighterLangs extends Omit<SyntaxHighlighterProps, "children"> {
-	language?:
-		| "oneC (1c)"
-		| "abnf"
-		| "accesslog"
-		| "actionscript"
-		| "ada"
-		| "angelscript"
-		| "apache"
-		| "applescript"
-		| "arcade"
-		| "arduino"
-		| "armasm"
-		| "asciidoc"
-		| "aspectj"
-		| "autohotkey"
-		| "autoit"
-		| "avrasm"
-		| "awk"
-		| "axapta"
-		| "bash"
-		| "basic"
-		| "bnf"
-		| "brainfuck"
-		| "cLike (c-like)"
-		| "c"
-		| "cal"
-		| "capnproto"
-		| "ceylon"
-		| "clean"
-		| "clojureRepl (clojure-repl)"
-		| "clojure"
-		| "cmake"
-		| "coffeescript"
-		| "coq"
-		| "cos"
-		| "cpp"
-		| "crmsh"
-		| "crystal"
-		| "csharp"
-		| "csp"
-		| "css"
-		| "d"
-		| "dart"
-		| "delphi"
-		| "diff"
-		| "django"
-		| "dns"
-		| "dockerfile"
-		| "dos"
-		| "dsconfig"
-		| "dts"
-		| "dust"
-		| "ebnf"
-		| "elixir"
-		| "elm"
-		| "erb"
-		| "erlangRepl (erlang-repl)"
-		| "erlang"
-		| "excel"
-		| "fix"
-		| "flix"
-		| "fortran"
-		| "fsharp"
-		| "gams"
-		| "gauss"
-		| "gcode"
-		| "gherkin"
-		| "glsl"
-		| "gml"
-		| "go"
-		| "golo"
-		| "gradle"
-		| "groovy"
-		| "haml"
-		| "handlebars"
-		| "haskell"
-		| "haxe"
-		| "hsp"
-		| "htmlbars"
-		| "http"
-		| "hy"
-		| "inform7"
-		| "ini"
-		| "irpf90"
-		| "isbl"
-		| "java"
-		| "javascript"
-		| "jbossCli (jboss-cli)"
-		| "json"
-		| "juliaRepl (julia-repl)"
-		| "julia"
-		| "kotlin"
-		| "lasso"
-		| "latex"
-		| "ldif"
-		| "leaf"
-		| "less"
-		| "lisp"
-		| "livecodeserver"
-		| "livescript"
-		| "llvm"
-		| "lsl"
-		| "lua"
-		| "makefile"
-		| "markdown"
-		| "mathematica"
-		| "matlab"
-		| "maxima"
-		| "mel"
-		| "mercury"
-		| "mipsasm"
-		| "mizar"
-		| "mojolicious"
-		| "monkey"
-		| "moonscript"
-		| "n1ql"
-		| "nginx"
-		| "nim"
-		| "nix"
-		| "nodeRepl (node-repl)"
-		| "nsis"
-		| "objectivec"
-		| "ocaml"
-		| "openscad"
-		| "oxygene"
-		| "parser3"
-		| "perl"
-		| "pf"
-		| "pgsql"
-		| "phpTemplate (php-template)"
-		| "php"
-		| "plaintext"
-		| "pony"
-		| "powershell"
-		| "processing"
-		| "profile"
-		| "prolog"
-		| "properties"
-		| "protobuf"
-		| "puppet"
-		| "purebasic"
-		| "pythonRepl (python-repl)"
-		| "python"
-		| "q"
-		| "qml"
-		| "r"
-		| "reasonml"
-		| "rib"
-		| "roboconf"
-		| "routeros"
-		| "rsl"
-		| "ruby"
-		| "ruleslanguage"
-		| "rust"
-		| "sas"
-		| "scala"
-		| "scheme"
-		| "scilab"
-		| "scss"
-		| "shell"
-		| "smali"
-		| "smalltalk"
-		| "sml"
-		| "sqf"
-		| "sql"
-		| "sqlMore (sql_more)"
-		| "stan"
-		| "stata"
-		| "step21"
-		| "stylus"
-		| "subunit"
-		| "swift"
-		| "taggerscript"
-		| "tap"
-		| "tcl"
-		| "thrift"
-		| "tp"
-		| "twig"
-		| "typescript"
-		| "vala"
-		| "vbnet"
-		| "vbscriptHtml (vbscript-html)"
-		| "vbscript"
-		| "verilog"
-		| "vhdl"
-		| "vim"
-		| "x86asm"
-		| "xl"
-		| "xml"
-		| "xquery"
-		| "yaml"
-		| "zephir"
-}
-
-type HighlighterStyle = {
-	[key: string]: CSSProperties
-}
-
-interface ILibCodeContainerBase
-	extends LibComponentBase<HTMLDivElement & HTMLPreElement> {
-	highlighterProps?: HighlighterLangs
-	textColor?: LibAllColors
-	backgroundColor?: LibAllColors
-	style?: HighlighterStyle
-}
-
-interface CodeContainerWithCopyButton extends ILibCodeContainerBase {
-	hideCopyButton?: undefined | false
-	tooltipTexts?: { copy?: string; copied?: string }
-	icons?: { copy?: ReactElement; copied?: ReactElement }
-}
-
-interface CodeContainerWithoutCopyButton extends ILibCodeContainerBase {
-	hideCopyButton?: true
-	tooltipTexts?: never
-	icons?: never
-}
-
-export type ILibCodeContainer =
-	| CodeContainerWithCopyButton
-	| CodeContainerWithoutCopyButton

package/dist/lib/components/Cover/Cover.tsx

@@ -1,91 +0,0 @@
-import { type FC } from "react"
-import { Image } from "../Image"
-import { Flexbox } from "../Flexbox"
-import { clsx, genBgOverlay } from "../../utils"
-import type { ILibCover } from "./types"
-
-/**
- * Cover component for creating full-screen layouts with background images, overlays, and content positioning.
- *
- * @component
- *
- * @example
- * <Cover
- *   img="/images/hero-bg.jpg"
- *   alt="Hero background"
- *   overlay="gradient-black"
- *   alignItems="center"
- *   justifyContent="center"
- * >
- *   <Text tag="h1" display className="text-white">
- *     Welcome to our site
- *   </Text>
- * </Cover>
- *
- * @extends ILibFlexbox
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the cover container.
- * @prop {React.ElementType} [props.element=Flexbox] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the cover element.
- * @prop {string} [props.img] - URL of the background image to display.
- * @prop {string} [props.alt] - Alt text for the background image.
- * @prop {LibBgOverlay} [props.overlay] - Overlay variant to apply over the background image.
- * @prop {React.ReactNode} [props.children] - Content to display over the background image.
- *
- * @returns {JSX.Element} The rendered Cover component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/cover
- */
-export const Cover: FC<ILibCover> = ({
-	className,
-	element = Flexbox,
-	ref,
-	img,
-	alt,
-	overlay,
-	children,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"z-0 relative p-12 w-full h-svh",
-				"cover",
-				className,
-			)}
-			{...rest}
-		>
-			<Image
-				src={img}
-				alt={alt}
-				className={clsx(
-					"top-0 left-0 z-0 fixed w-full h-full",
-					"cover-image",
-				)}
-				fit="cover"
-			/>
-
-			{overlay && (
-				<span
-					className={clsx(
-						"top-0 left-0 z-10 absolute w-full h-full",
-						genBgOverlay[overlay],
-						"overlay",
-					)}
-				/>
-			)}
-
-			<div
-				className={clsx(
-					"top-0 left-0 z-20 relative w-fit h-fit",
-					"cover-content",
-				)}
-			>
-				{children}
-			</div>
-		</Element>
-	)
-}

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

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

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

@@ -1,10 +0,0 @@
-import type { LibComponentBase, LibOverlays } from "../../types"
-import type { ILibFlexbox } from "../Flexbox/types"
-
-export interface ILibCover
-	extends LibComponentBase<HTMLDivElement>,
-		ILibFlexbox {
-	img: string
-	alt?: string
-	overlay?: LibOverlays
-}