@julseb-lib/react 0.1.19 → 0.1.20

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

@@ -1,61 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../../utils"
-import { genBorderBottomColor } from "../utils/gen-border-bottom"
-import type { ILibLoader } from "../types"
-
-const SPAN_COMMON =
-	"block absolute w-full h-full border-8 border-transparent rounded-full animate-[spin_1200ms_var(--animate-cubic-bezier)_infinite_var(--spinner-delay)]"
-
-export const LoaderTwo: FC<Omit<ILibLoader, "variant">> = ({
-	className,
-	element = "span",
-	ref,
-	color = "primary",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"inline-block relative rounded-full size-12 animate-[spin_1200ms_linear_infinite]",
-				"loader loader-2",
-				className,
-			)}
-			{...rest}
-		>
-			<span
-				className={clsx(
-					SPAN_COMMON,
-					genBorderBottomColor[color],
-					"[--spinner-delay:-450ms]",
-					"loader-2-border",
-				)}
-			/>
-			<span
-				className={clsx(
-					SPAN_COMMON,
-					genBorderBottomColor[color],
-					"[--spinner-delay:-300ms]",
-					"loader-2-border",
-				)}
-			/>
-			<span
-				className={clsx(
-					SPAN_COMMON,
-					genBorderBottomColor[color],
-					"loader-2-border",
-				)}
-			/>
-			<span
-				className={clsx(
-					SPAN_COMMON,
-					genBorderBottomColor[color],
-					"[--spinner-delay:-150ms]",
-					"loader-2-border",
-				)}
-			/>
-		</Element>
-	)
-}

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

@@ -1,13 +0,0 @@
-import type {
-	ClassNames,
-	LibAllColors,
-	LibComponentBase,
-	LibLoaderVariant,
-} from "../../types"
-
-export type ILibLoader = LibComponentBase<HTMLSpanElement> & {
-	children?: never
-	variant?: LibLoaderVariant
-	color?: LibAllColors
-	className?: ClassNames
-}

package/dist/lib/components/Loader/utils/gen-border-bottom.ts

@@ -1,95 +0,0 @@
-import type { LibColors, LibColorsShort } from "../../../types"
-
-const genBorderBottomColorAll: Record<LibColors, string> = {
-	black: "border-b-black",
-	white: "border-b-white",
-	"primary-50": "border-b-primary-50",
-	"primary-100": "border-b-primary-100",
-	"primary-200": "border-b-primary-200",
-	"primary-300": "border-b-primary-300",
-	"primary-400": "border-b-primary-400",
-	"primary-500": "border-b-primary-500",
-	"primary-600": "border-b-primary-600",
-	"primary-700": "border-b-primary-700",
-	"primary-800": "border-b-primary-800",
-	"primary-900": "border-b-primary-900",
-	"primary-950": "border-b-primary-950",
-	"secondary-50": "border-b-secondary-50",
-	"secondary-100": "border-b-secondary-100",
-	"secondary-200": "border-b-secondary-200",
-	"secondary-300": "border-b-secondary-300",
-	"secondary-400": "border-b-secondary-400",
-	"secondary-500": "border-b-secondary-500",
-	"secondary-600": "border-b-secondary-600",
-	"secondary-700": "border-b-secondary-700",
-	"secondary-800": "border-b-secondary-800",
-	"secondary-900": "border-b-secondary-900",
-	"secondary-950": "border-b-secondary-950",
-	"success-50": "border-b-success-50",
-	"success-100": "border-b-success-100",
-	"success-200": "border-b-success-200",
-	"success-300": "border-b-success-300",
-	"success-400": "border-b-success-400",
-	"success-500": "border-b-success-500",
-	"success-600": "border-b-success-600",
-	"success-700": "border-b-success-700",
-	"success-800": "border-b-success-800",
-	"success-900": "border-b-success-900",
-	"success-950": "border-b-success-950",
-	"danger-50": "border-b-danger-50",
-	"danger-100": "border-b-danger-100",
-	"danger-200": "border-b-danger-200",
-	"danger-300": "border-b-danger-300",
-	"danger-400": "border-b-danger-400",
-	"danger-500": "border-b-danger-500",
-	"danger-600": "border-b-danger-600",
-	"danger-700": "border-b-danger-700",
-	"danger-800": "border-b-danger-800",
-	"danger-900": "border-b-danger-900",
-	"danger-950": "border-b-danger-950",
-	"warning-50": "border-b-warning-50",
-	"warning-100": "border-b-warning-100",
-	"warning-200": "border-b-warning-200",
-	"warning-300": "border-b-warning-300",
-	"warning-400": "border-b-warning-400",
-	"warning-500": "border-b-warning-500",
-	"warning-600": "border-b-warning-600",
-	"warning-700": "border-b-warning-700",
-	"warning-800": "border-b-warning-800",
-	"warning-900": "border-b-warning-900",
-	"warning-950": "border-b-warning-950",
-	"gray-50": "border-b-gray-50",
-	"gray-100": "border-b-gray-100",
-	"gray-200": "border-b-gray-200",
-	"gray-300": "border-b-gray-300",
-	"gray-400": "border-b-gray-400",
-	"gray-500": "border-b-gray-500",
-	"gray-600": "border-b-gray-600",
-	"gray-700": "border-b-gray-700",
-	"gray-800": "border-b-gray-800",
-	"gray-900": "border-b-gray-900",
-	"gray-950": "border-b-gray-950",
-	current: "border-b-current",
-	transparent: "border-b-transparent",
-	background: "border-b-background",
-	font: "border-b-font",
-}
-
-const genBorderBottomColorShort: Record<LibColorsShort, string> = {
-	primary: "border-b-primary-500",
-	secondary: "border-b-secondary-500",
-	success: "border-b-success-500",
-	danger: "border-b-danger-500",
-	warning: "border-b-warning-500",
-	gray: "border-b-gray-500",
-	black: "border-b-black",
-	white: "border-b-white",
-	current: "border-b-current",
-	transparent: "border-b-transparent",
-	background: "border-b-background",
-}
-
-export const genBorderBottomColor = {
-	...genBorderBottomColorAll,
-	...genBorderBottomColorShort,
-}

package/dist/lib/components/Main/Main.tsx

@@ -1,63 +0,0 @@
-import { type FC } from "react"
-import { clsx, genBgAllColors, genGap } from "../../utils"
-import type { ILibMain } from "./types"
-
-/**
- * Main component for rendering the primary content area.
- *
- * @component
- *
- * @example
- * <Main size="large" gap="xl" backgroundColor="white">
- *   <p>Main content</p>
- * </Main>
- *
- * @prop {object} props - Component props.
- * @prop {string} [props.className] - Additional class names to apply.
- * @prop {ElementType} [props.element="main"] - The HTML element or React component to render as the main container.
- * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the main container.
- * @prop {ReactNode} props.children - Main content.
- * @prop {"default"|"large"|"form"} [props.size="default"] - Main width size.
- * @prop {string} [props.backgroundColor="white"] - Any color from the library.
- * @prop {"2xl"|"xl"|"lg"|"md"|"sm"|"xs"|"2xs"} [props.gap="lg"] - Gap between children (uses spacer tokens).
- * @prop {object} [props.rest] - Additional props spread to the container.
- *
- * @returns {JSX.Element} The rendered main container.
- *
- * @see https://doc-julseb-lib-react.vercel.app/styles/main
- */
-export const Main: FC<ILibMain> = ({
-	className,
-	element = "main",
-	ref,
-	children,
-	gap = "lg",
-	backgroundColor = "background",
-	size = "default",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex flex-col py-4 sm:py-8 md:py-12 w-full",
-				(genBgAllColors as any)[backgroundColor],
-				genGap[gap],
-				maxWidth[size],
-				"main",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}
-
-const maxWidth = {
-	default: "sm:max-w-(--main-default)",
-	large: "sm:max-w-(--main-large)",
-	form: "sm:max-w-(--main-form)",
-}

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

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

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

@@ -1,12 +0,0 @@
-import type {
-	LibComponentBase,
-	LibAllColors,
-	LibSpacers,
-	LibMainSize,
-} from "../../types"
-
-export interface ILibMain extends LibComponentBase<HTMLDivElement> {
-	gap?: LibSpacers
-	backgroundColor?: LibAllColors
-	size?: LibMainSize
-}

package/dist/lib/components/MarkdownContainer/MarkdownContainer.tsx

@@ -1,50 +0,0 @@
-import { type FC } from "react"
-import Markdown from "markdown-to-jsx"
-import { clsx, libOptionsMarkdown } from "../../utils"
-import type { ILibMarkdownContainer } from "./types"
-
-/**
- * MarkdownContainer component for rendering markdown content with customizable parsing options and styling.
- *
- * @component
- *
- * @example
- * <MarkdownContainer>
- *   # Hello World
- *   This is **bold** and *italic* text.
- * </MarkdownContainer>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the markdown container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the markdown container element.
- * @prop {string} [props.children] - Markdown content to parse and render.
- * @prop {object} [props.options=libOptionsMarkdown] - Markdown parsing options and configurations.
- *
- * @returns {JSX.Element} The rendered MarkdownContainer component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/markdown-container
- */
-export const MarkdownContainer: FC<ILibMarkdownContainer> = ({
-	className,
-	ref,
-	children,
-	options = libOptionsMarkdown,
-	...rest
-}) => {
-	return (
-		<Markdown
-			// @ts-ignore
-			ref={ref as any}
-			className={clsx(
-				"flex flex-col items-stretch gap-3",
-				"markdown-container",
-				className,
-			)}
-			options={options}
-			{...rest}
-		>
-			{children as any}
-		</Markdown>
-	)
-}

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

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

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

@@ -1,8 +0,0 @@
-import type { MarkdownToJSX } from "markdown-to-jsx"
-import type { LibComponentBase, ReactChildren } from "../../types"
-
-export interface ILibMarkdownContainer
-	extends Omit<LibComponentBase<HTMLDivElement>, "element"> {
-	options?: MarkdownToJSX.Options
-	children?: ReactChildren
-}

package/dist/lib/components/MarkdownEditor/MarkdownButtons.tsx

@@ -1,42 +0,0 @@
-import { type FC } from "react"
-import { toSentenceCase } from "@julseb-lib/utils"
-import { clsx } from "../../utils"
-import { libMdButtons } from "./buttons/markdown-buttons"
-import { ButtonIcon } from "../ButtonIcon"
-import type { ILibMarkdownEditor } from "./types"
-import type { ReactElement } from "../../types"
-
-export const MarkdownButtons: FC<IMarkdownButtons> = ({
-	options,
-	icons,
-	addCode,
-}) => {
-	return libMdButtons.map(button => {
-		if (options && options[button.name as keyof typeof options] === false) {
-			return null
-		}
-
-		const icon =
-			icons && icons[button.name as keyof typeof icons]
-				? icons[button.name as keyof typeof icons]
-				: button.defaultIcon
-
-		return (
-			<ButtonIcon
-				className={clsx("size-6", "md-button")}
-				key={button.name}
-				icon={icon as ReactElement}
-				onClick={() => addCode(button.code)}
-				tooltip={button.displayName ?? toSentenceCase(button.name)}
-				aria-label={button.displayName ?? toSentenceCase(button.name)}
-				variant="transparent"
-				showTooltip={{ offset: "2xs" }}
-			/>
-		)
-	})
-}
-
-interface IMarkdownButtons
-	extends Pick<ILibMarkdownEditor, "options" | "icons"> {
-	addCode: (code: string) => void
-}

package/dist/lib/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,186 +0,0 @@
-import { useState, useRef, type FC } from "react"
-import Markdown from "markdown-to-jsx"
-import { InputContainer } from "../InputContainer"
-import { MarkdownEditorTitles } from "./MarkdownEditorTitles"
-import { MarkdownButtons } from "./MarkdownButtons"
-import { MarkdownViewButtons } from "./MarkdownViewButtons"
-import { useMergeRefs } from "../../hooks"
-import { clsx, libOptionsMarkdown } from "../../utils"
-import type { ILibMarkdownEditor } from "./types"
-import type { LibMdEditorViews } from "../../types"
-
-/**
- * MarkdownEditor component for creating rich text content with live preview and customizable toolbar.
- *
- * @component
- *
- * @example
- * <MarkdownEditor
- *   value={content}
- *   setValue={setContent}
- *   label="Article Content"
- *   defaultView="live"
- *   options={{
- *     bold: true,
- *     italic: true,
- *     code: true,
- *     editorPreview: true
- *   }}
- * />
- *
- * @extends HTMLTextAreaElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the textarea.
- * @prop {React.Ref<HTMLTextAreaElement>} [props.ref] - Ref to the textarea element.
- * @prop {string} [props.value] - Current markdown content value.
- * @prop {function} [props.setValue] - Function to update the markdown content.
- * @prop {string} [props.label] - Label text for the editor.
- * @prop {string} [props.labelComment] - Additional comment text for the label.
- * @prop {string} [props.helper] - Helper text displayed above the editor.
- * @prop {string} [props.helperBottom] - Helper text displayed below the editor.
- * @prop {LibValidation} [props.validation] - Validation state and messages.
- * @prop {"light" | "dark"} [props.inputBackground] - Background theme for the editor.
- * @prop {string} [props.id] - HTML id attribute for the textarea.
- * @prop {"code" | "live" | "preview"} [props.defaultView="live"] - Initial view mode for the editor.
- * @prop {LibMarkdownEditorOptions} [props.options] - Configuration for which toolbar buttons to show.
- * @prop {string} [props.textButtonTitles="Titles"] - Text for the titles dropdown button.
- * @prop {object} [props.icons] - Custom icons for toolbar buttons.
- *
- * @returns {JSX.Element} The rendered MarkdownEditor component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/markdown-editor
- */
-export const MarkdownEditor: FC<ILibMarkdownEditor> = ({
-	className,
-	ref,
-	value,
-	setValue,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	validation,
-	inputBackground,
-	id,
-	defaultView = "live",
-	options,
-	textButtonTitles = "Titles",
-	icons,
-	...rest
-}) => {
-	const [view, setView] = useState<LibMdEditorViews>(defaultView)
-	const [isTitlesOpen, setIsTitlesOpen] = useState(false)
-
-	const el = useRef<HTMLTextAreaElement>(null)
-
-	const addCode = (code: string) => {
-		setValue(`${value}${code}`)
-		el?.current?.focus()
-	}
-
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			validation={validation}
-			hasListOpen={isTitlesOpen}
-		>
-			<div
-				className={clsx(
-					"border border-gray-200 rounded-lg w-full",
-					isTitlesOpen && "z-20",
-					inputBackground === "dark"
-						? "bg-black text-white"
-						: inputBackground === "light"
-							? "bg-white text-black"
-							: "bg-background text-font",
-					validation?.status === false && "bg-danger-50 text-black",
-					"has-[textarea:focus]:border-primary-500",
-					"md-editor-wrapper",
-				)}
-			>
-				<div
-					className={clsx(
-						"flex justify-between gap-2 p-2 border-b border-b-gray-200",
-						"md-buttons-container",
-					)}
-				>
-					<div
-						className={clsx(
-							"flex items-center gap-2",
-							"md-buttons",
-						)}
-					>
-						<MarkdownEditorTitles
-							options={options}
-							textButtonTitles={textButtonTitles}
-							addCode={addCode}
-							inputBackground={inputBackground}
-							isOpen={isTitlesOpen}
-							setIsOpen={setIsTitlesOpen}
-						/>
-
-						<MarkdownButtons
-							options={options}
-							icons={icons}
-							addCode={addCode}
-						/>
-					</div>
-
-					<div className={clsx("flex gap-1", "md-views")}>
-						<MarkdownViewButtons
-							options={options}
-							icons={icons}
-							view={view}
-							setView={setView}
-						/>
-					</div>
-				</div>
-
-				<div
-					className={clsx(
-						"grid min-h-[150px]",
-						view === "live"
-							? "grid-cols-[1fr_2px_1fr]"
-							: "grid-cols-1",
-						"md-editor-content",
-					)}
-				>
-					<textarea
-						ref={useMergeRefs([ref, el])}
-						className={clsx(
-							"p-2 outline-none h-fit field-sizing-content resize-none",
-							view === "preview" && "hidden",
-							"md-editor-input",
-							className,
-						)}
-						value={value}
-						onChange={e => setValue(e.target.value)}
-						id={id}
-						{...rest}
-					/>
-
-					{view === "live" && (
-						<span
-							className={clsx(
-								"bg-gray-200 w-0.5 h-full",
-								"separator",
-							)}
-						/>
-					)}
-
-					{(view === "live" || view === "preview") && (
-						<Markdown
-							options={libOptionsMarkdown}
-							className={clsx("p-2", "md-editor-markdown")}
-						>
-							{value}
-						</Markdown>
-					)}
-				</div>
-			</div>
-		</InputContainer>
-	)
-}

package/dist/lib/components/MarkdownEditor/MarkdownEditorTitles.tsx

@@ -1,86 +0,0 @@
-import { useRef, type FC } from "react"
-import { clsx } from "../../utils"
-import { Button } from "../Button"
-import { useClickOutside } from "../../hooks"
-import {
-	getFontSizeButton,
-	libMdTitleButtons,
-} from "./buttons/markdown-buttons"
-import type { ILibMarkdownEditor } from "./types"
-import type { DispatchState } from "../../types"
-
-export const MarkdownEditorTitles: FC<IMarkdownEditorTitles> = ({
-	options,
-	textButtonTitles,
-	addCode,
-	inputBackground,
-	isOpen,
-	setIsOpen,
-}) => {
-	if (options?.titles === false) return null
-
-	const el = useRef<HTMLDivElement>(null)
-	useClickOutside(el as any, () => setIsOpen(false))
-
-	return (
-		<div className={clsx("relative", "dropdown-container")} ref={el}>
-			<Button
-				className={clsx("", "button-titles")}
-				onClick={e => {
-					e.stopPropagation()
-					setIsOpen(!isOpen)
-				}}
-				size="small"
-				variant="transparent"
-			>
-				{textButtonTitles}
-			</Button>
-
-			<div
-				className={clsx(
-					"left-2 absolute flex flex-col rounded-md w-fit min-w-[150px] overflow-hidden font-bold transition-all duration-200 ease-in-out",
-					inputBackground === "dark"
-						? "bg-black text-white"
-						: inputBackground === "light"
-							? "bg-white"
-							: "bg-background",
-					isOpen && "open",
-					"max-h-0 [&.open]:max-h-[179px] [&.open]:shadow-sm",
-					"titles-dropdown",
-				)}
-			>
-				{libMdTitleButtons.map(button => (
-					<button
-						key={button.name}
-						className={clsx(
-							"px-2 py-1 w-full text-left whitespace-nowrap",
-							"hover:bg-primary-300 active:bg-primary-600 hover:text-white",
-							"title-button",
-						)}
-						onClick={() => {
-							addCode(button.code)
-							setIsOpen(false)
-						}}
-						style={{
-							fontSize: getFontSizeButton(
-								button.name as any,
-							) as number,
-						}}
-					>
-						{button.displayName ?? button.name}
-					</button>
-				))}
-			</div>
-		</div>
-	)
-}
-
-interface IMarkdownEditorTitles
-	extends Pick<
-		ILibMarkdownEditor,
-		"options" | "textButtonTitles" | "inputBackground"
-	> {
-	addCode: (code: string) => void
-	isOpen: boolean
-	setIsOpen: DispatchState<boolean>
-}

package/dist/lib/components/MarkdownEditor/MarkdownViewButtons.tsx

@@ -1,48 +0,0 @@
-import { type FC } from "react"
-import { toSentenceCase } from "@julseb-lib/utils"
-import { clsx } from "../../utils"
-import { ButtonIcon } from "../ButtonIcon"
-import { libMdViewButtons } from "./buttons/markdown-buttons"
-import type { DispatchState, LibMdEditorViews, ReactElement } from "../../types"
-import type { ILibMarkdownEditor } from "./types"
-
-export const MarkdownViewButtons: FC<IMarkdownViewButtons> = ({
-	options,
-	icons,
-	view,
-	setView,
-}) => {
-	return libMdViewButtons.map(button => {
-		if (options && options[button.name as keyof typeof options] === false) {
-			return null
-		}
-
-		const icon =
-			icons && icons[button.name as keyof typeof icons]
-				? icons[button.name as keyof typeof icons]
-				: button.defaultIcon
-
-		return (
-			<ButtonIcon
-				key={button.name}
-				className={clsx(
-					"size-6",
-					view === button.name && "",
-					"button-view",
-				)}
-				variant={view === button.name ? "plain" : "transparent"}
-				icon={icon as ReactElement}
-				onClick={() => setView(button.name as LibMdEditorViews)}
-				aria-label={button.displayName ?? toSentenceCase(button.name)}
-				tooltip={button.displayName ?? toSentenceCase(button.name)}
-				showTooltip={{ offset: "2xs" }}
-			/>
-		)
-	})
-}
-
-interface IMarkdownViewButtons
-	extends Pick<ILibMarkdownEditor, "options" | "icons"> {
-	view: LibMdEditorViews
-	setView: DispatchState<LibMdEditorViews>
-}