@julseb-lib/react 0.1.18 → 0.1.20

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

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

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

@@ -1,3 +0,0 @@
-import type { LibComponentBase } from "../../types"
-
-export interface ILibFade extends LibComponentBase<HTMLDivElement> {}

package/dist/lib/components/Fieldset/Fieldset.tsx

@@ -1,85 +0,0 @@
-import { type FC } from "react"
-import { InputContainer } from "../InputContainer"
-import { clsx, genBorderRadius } from "../../utils"
-import type { ILibFieldset } from "./types"
-
-/**
- * Fieldset component for grouping related form controls with a legend, validation states, and customizable styling.
- *
- * @component
- *
- * @example
- * <Fieldset
- *   legend="Personal Information"
- *   label="User Details"
- *   borderRadius="lg"
- * >
- *   <Input label="First Name" />
- *   <Input label="Last Name" />
- *   <Input label="Email" />
- * </Fieldset>
- *
- * @extends HTMLFieldSetElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the fieldset container.
- * @prop {React.Ref<HTMLFieldSetElement>} [props.ref] - Ref to the fieldset element.
- * @prop {React.ReactNode} [props.children] - Form controls and content to display inside the fieldset.
- * @prop {string} [props.label] - Label text to display above the fieldset.
- * @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 fieldset.
- * @prop {string} [props.id] - Unique identifier for the fieldset element.
- * @prop {LibValidation} [props.validation] - Validation state and configuration object.
- * @prop {string} [props.legend] - Legend text to display as the fieldset title.
- * @prop {"xs" | "sm" | "md" | "lg" | "xl" | "full"} [props.borderRadius="md"] - Border radius size for the fieldset.
- * @prop {any} [props.rest] - Additional props spread to the fieldset element.
- *
- * @returns {JSX.Element} The rendered Fieldset component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/fieldset
- */
-export const Fieldset: FC<ILibFieldset> = ({
-	className,
-	ref,
-	children,
-	label,
-	labelComment,
-	helper,
-	helperBottom,
-	id,
-	validation,
-	legend,
-	borderRadius = "md",
-	...rest
-}) => {
-	return (
-		<InputContainer
-			label={label}
-			labelComment={labelComment}
-			helper={helper}
-			helperBottom={helperBottom}
-			id={id}
-			validation={validation}
-		>
-			<fieldset
-				ref={ref}
-				className={clsx(
-					"flex flex-wrap gap-4 p-3 border border-gray-200",
-					validation?.status === false
-						? "border-danger-500"
-						: validation?.status === true && "border-success-500",
-					genBorderRadius[borderRadius],
-					"fieldset",
-					className,
-				)}
-				{...rest}
-			>
-				<legend className="px-3 font-bold fieldset-legend">
-					{legend}
-				</legend>
-
-				{children}
-			</fieldset>
-		</InputContainer>
-	)
-}

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

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

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

@@ -1,15 +0,0 @@
-import type { LibComponentBase, LibRadiuses } from "../../types"
-import type {
-	ILibInputCommon,
-	ILibInputWithValidation,
-} from "../InputComponents"
-
-export type ILibFieldset = Omit<
-	LibComponentBase<HTMLFieldSetElement>,
-	"element"
-> &
-	Omit<ILibInputCommon, "inputBackground" | "inputVariant"> &
-	ILibInputWithValidation & {
-		legend: string
-		borderRadius?: LibRadiuses
-	}

package/dist/lib/components/Flexbox/Flexbox.tsx

@@ -1,99 +0,0 @@
-import { type FC } from "react"
-import {
-	clsx,
-	genJustifyContent,
-	genAlignItems,
-	genAlignContent,
-	genColGap,
-	genGap,
-	genJustifyItems,
-	genRowGap,
-} from "../../utils"
-import type { ILibFlexbox } from "./types"
-
-/**
- * Flexbox component for flexible layouts using CSS flexbox.
- *
- * @component
- * @example
- * <Flexbox flexDirection="row" gap="md">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Flexbox>
- *
- * @prop {object} props - Component props.
- * @prop {string} [props.className] - Additional class names to apply.
- * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the flex container.
- * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the flex container.
- * @prop {ReactNode} props.children - Flexbox content.
- * @prop {boolean} [props.inline] - Use inline-flex instead of flex.
- * @prop {"row"|"row-reverse"|"col"|"col-reverse"} [props.flexDirection="row"] - Flex direction.
- * @prop {"nowrap"|"wrap"|"wrap-reverse"} [props.flexWrap="nowrap"] - Flex wrap.
- * @prop {"start"|"end"|"end-safe"|"center"|"center-sage"|"space-between"|"space-around"|"space-evenly"|"stretch"|"baseline"|"normal"} [props.justifyContent="start"] - Justify content property.
- * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"baseline"|"baseline-start"|"stretch"} [props.alignItems="stretch"] - Align items property.
- * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"stretch"|"normal"} [props.justifyItems="stretch"] - Justify items property.
- * @prop {"normal"|"center"|"start"|"end"|"space-between"|"space-around"|"space-evenly"|"baseline"|"stretch"} [props.alignContent="normal"] - Align content property.
- * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.gap="0px"] - Gap between items (can use spacer tokens).
- * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.colGap="0px"] - Column gap (can use spacer tokens).
- * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.rowGap="0px"] - Row gap (can use spacer tokens).
- * @prop {object} [props.rest] - Additional props spread to the container.
- *
- * @returns {JSX.Element} The rendered flexbox container.
- *
- * @see https://doc-julseb-lib-react.vercel.app/layouts/flexbox
- */
-export const Flexbox: FC<ILibFlexbox> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	inline,
-	flexDirection = "row",
-	flexWrap = "nowrap",
-	justifyContent = "start",
-	alignItems = "stretch",
-	justifyItems = "stretch",
-	alignContent = "normal",
-	gap = "0px",
-	colGap = "0px",
-	rowGap = "0px",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				inline ? "inline-flex" : "flex",
-				genFlexWrap[flexWrap],
-				genFlexDirection[flexDirection],
-				genJustifyContent[justifyContent],
-				genAlignItems[alignItems],
-				genJustifyItems[justifyItems],
-				genAlignContent[alignContent],
-				genGap[gap],
-				genColGap[colGap],
-				genRowGap[rowGap],
-				"flexbox",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}
-
-const genFlexDirection = {
-	row: "flex-row",
-	"row-reverse": "flex-row-reverse",
-	col: "flex-col",
-	"col-reverse": "flex-col-reverse",
-}
-
-const genFlexWrap = {
-	nowrap: "flex-nowrap",
-	wrap: "flex-wrap",
-	"wrap-reverse": "flex-wrap-reverse",
-}

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

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

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

@@ -1,23 +0,0 @@
-import type {
-	CssAlignContent,
-	CssAlignItems,
-	CssFlexDirection,
-	CssFlexWrap,
-	CssJustifyContent,
-	CssJustifyItems,
-	LibComponentBase,
-	LibSpacers,
-} from "../../types"
-
-export interface ILibFlexbox extends LibComponentBase<HTMLDivElement> {
-	inline?: boolean
-	flexDirection?: CssFlexDirection
-	flexWrap?: CssFlexWrap
-	justifyContent?: CssJustifyContent
-	alignItems?: CssAlignItems
-	justifyItems?: CssJustifyItems
-	alignContent?: CssAlignContent
-	gap?: LibSpacers
-	colGap?: LibSpacers
-	rowGap?: LibSpacers
-}

package/dist/lib/components/Footer/Footer.tsx

@@ -1,103 +0,0 @@
-import { Children, Fragment, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { clsx, genTextAllColor } from "../../utils"
-import type { ILibFooter } from "./types"
-
-/**
- * Footer component for displaying a page footer with logo, links, and customizable layout options.
- *
- * @component
- *
- * @example
- * <Footer
- *   logo={<img src="/logo.png" alt="Logo" />}
- *   direction="horizontal"
- *   linksSeparator="dot"
- *   items={[
- *     <a href="/privacy">Privacy</a>,
- *     <a href="/terms">Terms</a>,
- *     <a href="/contact">Contact</a>
- *   ]}
- * />
- *
- * @extends ILibFooter
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the footer container.
- * @prop {React.ElementType} [props.element="footer"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the footer element.
- * @prop {React.ReactNode} [props.children] - Child elements to display in the footer links section.
- * @prop {boolean} [props.hideSeparator] - Whether to hide the top border separator line.
- * @prop {boolean} [props.hideLinksSeparator] - Whether to hide separators between footer links.
- * @prop {"dot" | "dash"} [props.linksSeparator="dot"] - Type of separator to display between links.
- * @prop {Array<React.ReactNode>} [props.items] - Array of footer link items to display.
- * @prop {React.ReactNode} [props.logo] - Logo element to display in the footer.
- * @prop {"horizontal" | "vertical"} [props.direction="horizontal"] - Layout direction for footer content.
- * @prop {LibAllColors} [props.linksSeparatorColor="gray-500"] - Color for the separator between links.
- *
- * @returns {JSX.Element} The rendered Footer component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/footer
- */
-export const Footer: FC<ILibFooter> = ({
-	className,
-	element = "footer",
-	ref,
-	children,
-	hideSeparator,
-	hideLinksSeparator,
-	linksSeparator = "dot",
-	items,
-	logo,
-	direction = "horizontal",
-	linksSeparatorColor = "gray-500",
-	...rest
-}) => {
-	const Element = element
-	const childrenArray = Children.toArray(children)
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"relative flex px-[5%] pb-4",
-				direction === "horizontal"
-					? "flex-row justify-between"
-					: "flex-col items-center gap-2",
-				!hideSeparator &&
-					"before:w-[90%] before:h-[1px] before:absolute before:top-0 before:left-[5%] before:bg-gray-200 pt-4",
-				"footer",
-				className,
-			)}
-			{...rest}
-		>
-			{logo}
-
-			<div className="flex items-container gap-2">
-				{items?.map((item, i) => (
-					<Fragment key={uuid()}>
-						{item}
-
-						{i !== items.length - 1 && !hideLinksSeparator && (
-							<span
-								className={clsx(
-									genTextAllColor[linksSeparatorColor],
-								)}
-							>
-								{linksSeparator === "dot" ? "•" : "-"}
-							</span>
-						)}
-					</Fragment>
-				)) ??
-					childrenArray.map((child, i) => (
-						<Fragment key={uuid()}>
-							{child}
-
-							{i !== childrenArray.length - 1 &&
-								!hideLinksSeparator &&
-								(linksSeparator === "dot" ? "•" : "-")}
-						</Fragment>
-					))}
-			</div>
-		</Element>
-	)
-}

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

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

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

@@ -1,54 +0,0 @@
-import type {
-	LibAllColors,
-	LibComponentBase,
-	LibFooterDirection,
-	LibFooterLinksSeparator,
-	ReactChildren,
-	RequireAtLeastOne,
-} from "../../types"
-
-interface ILibFooterBase extends LibComponentBase<HTMLDivElement> {
-	hideSeparator?: boolean
-	hideLinksSeparator?: boolean
-	linksSeparator?: LibFooterLinksSeparator
-	linksSeparatorColor?: LibAllColors
-}
-
-interface FooterHorizontalWithItems extends ILibFooterBase {
-	items: Array<ReactChildren>
-	logo: ReactChildren
-	direction?: Extract<LibFooterDirection, "horizontal">
-	children?: never
-}
-
-interface FooterHorizontalWithChildren extends ILibFooterBase {
-	items?: never
-	logo: ReactChildren
-	direction?: Extract<LibFooterDirection, "horizontal">
-	children?: ReactChildren
-}
-
-type ILibFooterHorizontal =
-	| FooterHorizontalWithItems
-	| FooterHorizontalWithChildren
-
-interface FooterVerticalWithItems extends ILibFooterBase {
-	items?: Array<ReactChildren>
-	logo?: ReactChildren
-	direction?: Extract<LibFooterDirection, "vertical">
-	children?: never
-}
-
-interface FooterVerticalWithChildren extends ILibFooterBase {
-	items?: never
-	logo?: ReactChildren
-	direction?: Extract<LibFooterDirection, "vertical">
-	children?: ReactChildren
-}
-
-type ILibFooterVertical = RequireAtLeastOne<
-	FooterVerticalWithItems | FooterVerticalWithChildren,
-	"items" | "children" | "logo"
->
-
-export type ILibFooter = ILibFooterHorizontal | ILibFooterVertical

package/dist/lib/components/Form/Form.tsx

@@ -1,83 +0,0 @@
-import { type FC } from "react"
-import { Button } from "../Button"
-import { clsx } from "../../utils"
-import type { ILibForm } from "./types"
-
-/**
- * Form component for creating forms with built-in submit and secondary action buttons, loading states, and validation support.
- *
- * @component
- *
- * @example
- * <Form
- *   buttonPrimary="Submit"
- *   buttonSecondary={{ content: "Cancel", onClick: handleCancel }}
- *   isLoading={isSubmitting}
- *   disabled={!isValid}
- * >
- *   <Input label="Name" value={name} setValue={setName} />
- *   <Input label="Email" value={email} setValue={setEmail} />
- * </Form>
- *
- * @extends HTMLFormElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the form container.
- * @prop {React.Ref<HTMLFormElement>} [props.ref] - Ref to the form element.
- * @prop {React.ReactNode} [props.children] - Form fields and content to display inside the form.
- * @prop {boolean} [props.isLoading] - Whether the form is in a loading state (shows loader on primary button).
- * @prop {boolean} [props.disabled] - Whether the form and its primary button are disabled.
- * @prop {string} [props.buttonPrimary] - Text content for the primary submit button.
- * @prop {object} [props.buttonSecondary] - Configuration object for the secondary button with content and additional props.
- * @prop {1 | 2 | 3} [props.loaderVariant] - Type of loader animation to display on the primary button when loading.
- * @prop {any} [props.rest] - Additional props spread to the form element.
- *
- * @returns {JSX.Element} The rendered Form component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/form
- */
-export const Form: FC<ILibForm> = ({
-	className,
-	ref,
-	children,
-	isLoading,
-	disabled,
-	buttonPrimary,
-	buttonSecondary,
-	loaderVariant,
-	...rest
-}) => {
-	return (
-		<form
-			ref={ref}
-			className={clsx("flex flex-col gap-4", "form", className)}
-			{...rest}
-		>
-			{children}
-
-			{buttonPrimary && (
-				<div className="flex items-center gap-2 form-buttons-container">
-					<Button
-						type="submit"
-						disabled={disabled}
-						isLoading={isLoading}
-						loaderVariant={loaderVariant}
-						className="form-button"
-					>
-						{buttonPrimary}
-					</Button>
-
-					{buttonSecondary && (
-						<Button
-							{...(buttonSecondary as any)}
-							type={buttonSecondary.type ?? "button"}
-							variant="transparent"
-							className="form-button"
-						>
-							{buttonSecondary.content}
-						</Button>
-					)}
-				</div>
-			)}
-		</form>
-	)
-}

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

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

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

@@ -1,32 +0,0 @@
-import type { FormHTMLAttributes, MouseEventHandler, ElementType } from "react"
-import type {
-	LibComponentBase,
-	LibLoaderVariant,
-	ReactChildren,
-} from "../../types"
-
-interface ILibFormBase
-	extends Omit<LibComponentBase<HTMLFormElement>, "element">,
-		FormHTMLAttributes<HTMLFormElement> {
-	isLoading?: boolean
-	loaderVariant?: LibLoaderVariant
-	disabled?: boolean
-}
-
-interface FormWithButton extends ILibFormBase {
-	buttonPrimary?: ReactChildren
-	buttonSecondary?: {
-		content: ReactChildren
-		type?: "button" | "reset"
-		onClick?: MouseEventHandler<HTMLButtonElement>
-		disabled?: boolean
-		element?: ElementType
-	}
-}
-
-interface FormWithoutButton extends ILibFormBase {
-	buttonPrimary?: undefined
-	buttonSecondary?: never
-}
-
-export type ILibForm = FormWithButton | FormWithoutButton

package/dist/lib/components/Grid/Grid.tsx

@@ -1,98 +0,0 @@
-import { type FC } from "react"
-import {
-	clsx,
-	genGap,
-	genRowGap,
-	genColGap,
-	genJustifyItems,
-	genAlignItems,
-	genJustifyContent,
-	genAlignContent,
-} from "../../utils"
-import type { ILibGrid } from "./types"
-
-/**
- * Grid component for flexible CSS grid layouts.
- *
- * @component
- * @example
- * <Grid cols={3} gap="md">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </Grid>
- *
- * @prop {object} props - Component props.
- * @prop {string} [props.className] - Additional class names to apply.
- * @prop {ElementType} [props.element="div"] - The HTML element or React component to render as the grid container.
- * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the grid container.
- * @prop {ReactNode} props.children - Grid content.
- * @prop {boolean} [props.inline] - Use inline-grid instead of grid.
- * @prop {1|2|3|4|5|6|7|8|9|10|11|12} [props.cols=1] - Number of columns (1-12).
- * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.gap="0px"] - Gap between rows and columns (can use spacer tokens).
- * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.rowGap="0px"] - Row gap (can use spacer tokens).
- * @prop {"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"0px"} [props.colGap="0px"] - Column gap (can use spacer tokens).
- * @prop {"start"|"end"|"end-safe"|"center"|"center-sage"|"space-between"|"space-around"|"space-evenly"|"stretch"|"baseline"|"normal"} [props.justifyContent="start"] - Justify content property.
- * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"stretch"|"normal"} [props.justifyItems="stretch"] - Justify items property.
- * @prop {"normal"|"center"|"start"|"end"|"space-between"|"space-around"|"space-evenly"|"baseline"|"stretch"} [props.alignContent="start"] - Align content property.
- * @prop {"start"|"end"|"end-safe"|"center"|"center-safe"|"baseline"|"baseline-start"|"stretch"} [props.alignItems="stretch"] - Align items property.
- * @prop {object} [props.rest] - Additional props spread to the container.
- *
- * @returns {JSX.Element} The rendered grid container.
- *
- * @see https://doc-julseb-lib-react.vercel.app/layouts/grid
- */
-export const Grid: FC<ILibGrid> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	inline,
-	cols = 1,
-	gap = "0px",
-	rowGap = "0px",
-	colGap = "0px",
-	justifyItems = "stretch",
-	alignItems = "stretch",
-	justifyContent = "auto",
-	alignContent = "normal",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				inline ? "inline-grid" : "grid",
-				genGridColumns[cols],
-				genGap[gap],
-				genRowGap[rowGap],
-				genColGap[colGap],
-				genJustifyItems[justifyItems],
-				genAlignItems[alignItems],
-				(genJustifyContent as any)[justifyContent],
-				genAlignContent[alignContent],
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}
-
-const genGridColumns = {
-	1: "grid-cols-1",
-	2: "grid-cols-2",
-	3: "grid-cols-3",
-	4: "grid-cols-4",
-	5: "grid-cols-5",
-	6: "grid-cols-6",
-	7: "grid-cols-7",
-	8: "grid-cols-8",
-	9: "grid-cols-9",
-	10: "grid-cols-10",
-	11: "grid-cols-11",
-	12: "grid-cols-12",
-}

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

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

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

@@ -1,20 +0,0 @@
-import type {
-	LibComponentBase,
-	LibSpacers,
-	CssJustifyItems,
-	CssAlignItems,
-	CssJustifyContent,
-	CssAlignContent,
-} from "../../types"
-
-export interface ILibGrid extends LibComponentBase<HTMLDivElement> {
-	inline?: boolean
-	cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-	gap?: LibSpacers
-	colGap?: LibSpacers
-	rowGap?: LibSpacers
-	justifyItems?: CssJustifyItems
-	alignItems?: CssAlignItems
-	justifyContent?: CssJustifyContent
-	alignContent?: CssAlignContent
-}