@julseb-lib/react 0.1.18 → 0.1.20

package/dist/lib/components/Slideshow/subtypes.ts

@@ -1,62 +0,0 @@
-import type { MouseEventHandler } from "react"
-import type {
-	LibSlideshowPaginationPosition,
-	LibSlideshowPagination,
-	LibSlideshowButtonsPosition,
-	LibSlideshowButtonsSize,
-	LibColorsHover,
-	ReactElement,
-	DispatchState,
-} from "../../types"
-import type { ILibSlideshow } from "./types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN ACCORDION COMPONENTS
-
-/*====================== Pagination ======================*/
-
-export interface ILibSlideshowPagination {
-	position?: LibSlideshowPaginationPosition
-	hideOnTouch?: boolean
-	color?: LibColorsHover
-	type?: LibSlideshowPagination
-}
-
-/*====================== Controls ======================*/
-
-export interface ILibPaginationControls {
-	className?: string
-	size?: LibSlideshowButtonsSize
-	color?: LibColorsHover
-	hideOnTouch?: boolean
-	icons?: { prev?: ReactElement; next?: ReactElement }
-	labelPrev?: string
-	labelNext?: string
-}
-
-/*====================== Options ======================*/
-
-export interface ILibPaginationOptions {
-	autoPlay?: number
-	speed?: number
-}
-
-/*====================== SlideshowButtons ======================*/
-
-export interface ILibSlideshowButton
-	extends Pick<ILibSlideshow, "className" | "controls" | "hideControls"> {
-	position: LibSlideshowButtonsPosition
-	onClick: MouseEventHandler<HTMLButtonElement>
-}
-
-/*====================== SlideshowPagination ======================*/
-
-export interface ILibSlideshowPagination
-	extends Pick<
-		ILibSlideshow,
-		"className" | "pagination" | "images" | "hidePagination"
-	> {
-	active: number
-	setActive: DispatchState<number>
-	contentLength: number
-	handleClick: (n: number) => void
-}

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

@@ -1,41 +0,0 @@
-import type { ReactNode } from "react"
-import type { LibComponentBase, CssObjectFit, LibRadiuses } from "../../types"
-import type {
-	ILibPaginationControls,
-	ILibPaginationOptions,
-	ILibSlideshowPagination,
-} from "./subtypes"
-
-interface ILibSlideshowBase extends LibComponentBase<HTMLDivElement> {
-	imgFit?: CssObjectFit
-	hideControls?: boolean
-	controls?: ILibPaginationControls
-	options?: ILibPaginationOptions
-	borderRadius?: LibRadiuses
-}
-
-interface SlideshowWithImages extends ILibSlideshowBase {
-	images?: Array<string>
-	hidePagination?: boolean
-	pagination?: Pick<
-		ILibSlideshowPagination,
-		| "color"
-		| "className"
-		| "hideOnTouch"
-		| "images"
-		| "pagination"
-		| "hidePagination"
-		| "position"
-		| "type"
-	>
-	children?: never
-}
-
-interface SlideshowWithChildren extends ILibSlideshowBase {
-	images?: never
-	hidePagination?: boolean
-	pagination?: ILibSlideshowPagination
-	children?: Array<ReactNode>
-}
-
-export type ILibSlideshow = SlideshowWithImages | SlideshowWithChildren

package/dist/lib/components/SrOnly/SrOnly.tsx

@@ -1,33 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../utils"
-import type { ILibSrOnly } from "./types"
-
-/**
- * SrOnly component for creating screen reader only content that is visually hidden but accessible to assistive technologies.
- *
- * @component
- *
- * @example
- * <SrOnly>
- *   This text is only visible to screen readers
- * </SrOnly>
- *
- * @extends ILibSrOnly
- *
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<any>} [props.ref] - Ref to the sr-only element.
- * @prop {React.ReactNode} [props.children] - Content to be hidden visually but accessible to screen readers.
- *
- * @returns {JSX.Element} The rendered SrOnly component with screen reader accessible content.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/sr-only
- */
-export const SrOnly: FC<ILibSrOnly> = ({ element = "div", ref, children }) => {
-	const Element = element
-
-	return (
-		<Element ref={ref} className={clsx("sr-only")}>
-			{children}
-		</Element>
-	)
-}

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

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

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

@@ -1,7 +0,0 @@
-import type { LibComponentBase } from "../../types"
-
-export interface ILibSrOnly
-	extends Pick<
-		LibComponentBase<HTMLDivElement>,
-		"ref" | "element" | "children"
-	> {}

package/dist/lib/components/Sticky/Sticky.tsx

@@ -1,58 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../utils"
-import type { LibSpacers } from "../../types"
-import type { ILibSticky } from "./types"
-
-/**
- * Sticky component for creating elements that stick to a specified position during scroll.
- *
- * @component
- *
- * @example
- * <Sticky top="md">
- *   <nav>Navigation content</nav>
- * </Sticky>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the sticky container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the sticky element.
- * @prop {React.ReactNode} [props.children] - Content to be positioned sticky.
- * @prop {"0px" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"} [props.top="sm"] - Distance from top when sticky positioning is active.
- *
- * @returns {JSX.Element} The rendered Sticky component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/sticky
- */
-export const Sticky: FC<ILibSticky> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	top = "sm",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx("sticky", genTop[top], className)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}
-
-const genTop: Record<LibSpacers, string> = {
-	"0px": "top-0",
-	"2xs": "top-1",
-	xs: "top-2",
-	sm: "top-3",
-	md: "top-4",
-	lg: "top-5",
-	xl: "top-8",
-	"2xl": "top-12",
-}

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

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

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

@@ -1,5 +0,0 @@
-import type { LibComponentBase, LibSpacers } from "../../types"
-
-export interface ILibSticky extends LibComponentBase<HTMLDivElement> {
-	top?: LibSpacers
-}

package/dist/lib/components/Table/Table.tsx

@@ -1,141 +0,0 @@
-import { type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import {
-	clsx,
-	linkifyText,
-	genLinkColor,
-	genButtonColor,
-	genTextAlign,
-	genVAlign,
-} from "../../utils"
-import { TEXT_BASE_CLASSES } from "../Text"
-import type { ILibTable } from "./types"
-
-/**
- * Table component for creating structured data tables with customizable styling, variants, and automatic link detection.
- *
- * @component
- *
- * @example
- * <Table
- *   variant="bordered"
- *   headers={["Name", "Email", "Role"]}
- *   data={[
- *     ["John Doe", "john@example.com", "Admin"],
- *     ["Jane Smith", "jane@example.com", "User"]
- *   ]}
- *   footers={["Total: 2 users", "", ""]}
- *   linkify
- * />
- *
- * @extends HTMLTableElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the table.
- * @prop {React.Ref<HTMLTableElement>} [props.ref] - Ref to the table element.
- * @prop {React.ReactNode} [props.children] - Table content when not using data prop.
- * @prop {"bordered" | "stripped" | "border-bottom"} [props.variant="bordered"] - Visual variant for table styling.
- * @prop {"align-baseline" | "align-top" | "align-middle" | "align-bottom" | "align-text-top" | "align-text-bottom" | "align-sub" | "align-super"} [props.vAlign="align-top"] - Vertical alignment for table cells.
- * @prop {"left" | "center" | "right" | "justify"} [props.textAlign="left"] - Text alignment for table content.
- * @prop {boolean} [props.linkify] - Whether to automatically convert URLs in text to clickable links.
- * @prop {boolean} [props.blank] - Whether links should open in new tab when linkify is enabled.
- * @prop {Array<React.ReactNode>} [props.headers] - Array of header content for table columns.
- * @prop {Array<React.ReactNode>} [props.footers] - Array of footer content for table columns.
- * @prop {Array<Array<React.ReactNode>>} [props.data] - 2D array of table data for automatic table generation.
- *
- * @returns {JSX.Element} The rendered Table component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/table
- */
-export const Table: FC<ILibTable> = ({
-	className,
-	ref,
-	children,
-	variant = "bordered",
-	vAlign = "align-top",
-	textAlign = "left",
-	linkify,
-	blank,
-	headers,
-	footers,
-	data,
-	...rest
-}) => {
-	return (
-		<table
-			ref={ref}
-			className={clsx(
-				"table w-full h-[1px] border-collapse border-spacing-0 table-fixed",
-				TEXT_BASE_CLASSES,
-				"text-(length:--font-size-small)",
-				genLinkColor["primary"],
-				genButtonColor["primary"],
-				"[&_thead]:bg-primary-500 [&_thead]:text-white [&_thead]:font-bold",
-				"[&_td]:overflow-x-scroll [&_td]:px-2 [&_td]:py-1 [&_th]:overflow-x-scroll [&_th]:px-2 [&_th]:py-1",
-				variant === "bordered" && [
-					"border border-gray-200",
-					"[&_thead_th:not(:last-child)]:border-r [&_thead_th:not(:last-child)]:border-background [&_td]:border [&_td]:border-gray-200",
-				],
-				variant === "stripped" && [
-					"[&_tbody_tr:nth-child(even)]:bg-gray-100",
-				],
-				variant === "border-bottom" && [
-					"[&_tbody_tr]:border-b [&_tbody_tr]:border-b-gray-200",
-				],
-				genVAlign[vAlign],
-				genTextAlign[textAlign],
-				"table",
-				className,
-			)}
-			{...rest}
-		>
-			{headers && (
-				<thead className={clsx(genVAlign[vAlign])}>
-					<tr className={clsx(genVAlign[vAlign])}>
-						{headers.map(header => (
-							<th
-								className={clsx(genVAlign[vAlign])}
-								key={uuid()}
-							>
-								{linkify && typeof header === "string"
-									? linkifyText(header, blank)
-									: header}
-							</th>
-						))}
-					</tr>
-				</thead>
-			)}
-
-			{data ? (
-				<tbody className={clsx(genVAlign[vAlign])}>
-					{data.map(row => (
-						<tr key={uuid()}>
-							{row.map(col => (
-								<td key={uuid()}>
-									{linkify && typeof col === "string"
-										? linkifyText(col, blank)
-										: col}
-								</td>
-							))}
-						</tr>
-					))}
-				</tbody>
-			) : (
-				<tbody>{children}</tbody>
-			)}
-
-			{footers && (
-				<tfoot>
-					<tr>
-						{footers.map(footer => (
-							<td key={uuid()}>
-								{linkify && typeof footer === "string"
-									? linkifyText(footer, blank)
-									: footer}
-							</td>
-						))}
-					</tr>
-				</tfoot>
-			)}
-		</table>
-	)
-}

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

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

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

@@ -1,43 +0,0 @@
-import type {
-	LibComponentBase,
-	LibTableVariant,
-	CssVerticalAlign,
-	ReactChildren,
-	CssTextAlign,
-} from "../../types"
-
-/*====================== Table ======================*/
-
-interface ILibTableBase
-	extends Omit<LibComponentBase<HTMLTableElement>, "element"> {
-	variant?: LibTableVariant
-	vAlign?: CssVerticalAlign
-	textAlign?: CssTextAlign
-	headers?: Array<ReactChildren>
-	footers?: Array<ReactChildren>
-}
-
-interface TableWithData extends ILibTableBase {
-	headers: Array<ReactChildren>
-	data: Array<Array<ReactChildren>>
-	children?: never
-}
-
-interface TableWithChildren extends ILibTableBase {
-	data?: never
-	children?: ReactChildren
-}
-
-type ILibTableContent = TableWithData | TableWithChildren
-
-type TableWithLinkify = ILibTableContent & {
-	linkify?: boolean
-	blank?: boolean
-}
-
-type TableWithoutLinkify = ILibTableContent & {
-	linkify?: undefined | false
-	blank?: never
-}
-
-export type ILibTable = TableWithLinkify | TableWithoutLinkify

package/dist/lib/components/Tabs/Tabs.tsx

@@ -1,88 +0,0 @@
-import { useState, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { TabsContainer } from "./TabsContainer"
-import { TabsButtonsContainer } from "./TabsButtonsContainer"
-import { TabsButton } from "./TabsButton"
-import { TabsContent } from "./TabsContent"
-import { clsx } from "../../utils"
-import type { ILibTabs } from "./types"
-
-/**
- * Tabs component for creating tabbed interfaces with automatic state management and customizable styling.
- *
- * @component
- *
- * @example
- * const tabItems = [
- *   { title: "Tab 1", content: "Content for tab 1" },
- *   { title: "Tab 2", content: "Content for tab 2" },
- *   { title: "Tab 3", content: "Content for tab 3" }
- * ]
- *
- * <Tabs
- *   items={tabItems}
- *   justify="stretch"
- *   variant="rounded"
- *   activeTab={0}
- * />
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the tabs container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tabs container element.
- * @prop {Array<LibTabItem>} [props.items] - Array of tab items containing title and content for each tab.
- * @prop {"start" | "stretch"} [props.justify="start"] - Justification for positioning tabs within their container.
- * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual variant for styling the tab buttons.
- * @prop {number} [props.activeTab=0] - Index of the initially active tab.
- *
- * @returns {JSX.Element} The rendered Tabs component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/tabs
- */
-export const Tabs: FC<ILibTabs> = ({
-	className,
-	element = "div",
-	ref,
-	items,
-	justify = "start",
-	variant = "basic",
-	activeTab = 0,
-	...rest
-}) => {
-	const [tab, setTab] = useState(activeTab)
-
-	return (
-		<TabsContainer
-			element={element}
-			ref={ref}
-			className={clsx(className)}
-			{...rest}
-		>
-			<TabsButtonsContainer justify={justify} variant={variant}>
-				{items?.map((item, i) => (
-					<TabsButton
-						{...(item as any)}
-						key={item.id ?? uuid()}
-						isActive={tab === i}
-						onClick={() => setTab(i)}
-						variant={variant}
-						justify={justify}
-					>
-						{item.title}
-					</TabsButton>
-				))}
-			</TabsButtonsContainer>
-
-			{items?.map((item, i) => (
-				<TabsContent
-					{...(item as any)}
-					key={uuid()}
-					isActive={tab === i}
-				>
-					{item.content}
-				</TabsContent>
-			))}
-		</TabsContainer>
-	)
-}

package/dist/lib/components/Tabs/TabsButton.tsx

@@ -1,73 +0,0 @@
-import { type FC } from "react"
-import { clsx, genRingColor } from "../../utils"
-import type { ILibTabsButton } from "./types"
-
-/**
- * TabsButton component for individual tab navigation buttons with active states and customizable styling.
- *
- * @component
- *
- * @example
- * <TabsButton
- *   isActive={activeTab === 'tab1'}
- *   onClick={() => setActiveTab('tab1')}
- *   variant="rounded"
- * >
- *   Tab 1
- * </TabsButton>
- *
- * @extends HTMLButtonElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the tab button.
- * @prop {React.ElementType} [props.element="button"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLButtonElement>} [props.ref] - Ref to the tab button element.
- * @prop {React.ReactNode} [props.children] - Content to display inside the tab button.
- * @prop {"start" | "stretch"} [props.justify="start"] - Justification for positioning the button content.
- * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual variant for styling the tab button.
- * @prop {boolean} [props.isActive] - Whether this tab button is currently active/selected.
- * @prop {function} [props.onClick] - Click handler function for tab selection.
- *
- * @returns {JSX.Element} The rendered TabsButton component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/tabs
- */
-export const TabsButton: FC<ILibTabsButton> = ({
-	element = "button",
-	ref,
-	className,
-	children,
-	justify = "start",
-	variant = "basic",
-	isActive,
-	onClick,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"outline-none",
-				genRingColor["primary"],
-				isActive && "active",
-				variant === "basic" && [
-					"text-left border-b border-b-transparent translate-y-[1px]",
-					"[&.active]:border-b-primary-500",
-				],
-				variant === "rounded" && [
-					"rounded-md bg-transparent hover:bg-primary-300 active:bg-primary-600 hover:text-white py-1",
-					"[&.active]:bg-primary-500 [&.active]:text-white",
-				],
-				justify === "start" && ["min-w-[80px]"],
-				justify === "stretch" && ["grow"],
-				"tabs-button",
-				className,
-			)}
-			onClick={onClick}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

package/dist/lib/components/Tabs/TabsButtonsContainer.tsx

@@ -1,58 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../utils"
-import type { ILibTabsButtonsContainer } from "./types"
-
-/**
- * TabsButtonsContainer component for wrapping tab navigation buttons with customizable layout and styling.
- *
- * @component
- *
- * @example
- * <TabsButtonsContainer justify="stretch" variant="rounded">
- *   <TabsButton>Tab 1</TabsButton>
- *   <TabsButton>Tab 2</TabsButton>
- *   <TabsButton>Tab 3</TabsButton>
- * </TabsButtonsContainer>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the tabs buttons container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tabs buttons container element.
- * @prop {React.ReactNode} [props.children] - Child components (typically TabsButton components).
- * @prop {"start" | "stretch"} [props.justify="start"] - Justification for positioning tabs within their container.
- * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual variant for styling the tab buttons.
- *
- * @returns {JSX.Element} The rendered TabsButtonsContainer component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/tabs
- */
-export const TabsButtonsContainer: FC<ILibTabsButtonsContainer> = ({
-	element = "div",
-	ref,
-	className,
-	children,
-	justify = "start",
-	variant = "basic",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex gap-2",
-				variant === "basic" && "border-b border-b-gray-200",
-				variant === "rounded" && "bg-gray-200 rounded-md p-2",
-				justify === "start" && "justify-start",
-				justify === "stretch" && "justify-stretch",
-				"tabs-buttons-container",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

package/dist/lib/components/Tabs/TabsContainer.tsx

@@ -1,49 +0,0 @@
-import { type FC } from "react"
-import { clsx } from "../../utils"
-import type { ILibTabsContainer } from "./types"
-
-/**
- * TabsContainer component for wrapping tab navigation and content panels with customizable styling.
- *
- * @component
- *
- * @example
- * <TabsContainer>
- *   <TabsButtonsContainer>
- *     <TabsButton>Tab 1</TabsButton>
- *     <TabsButton>Tab 2</TabsButton>
- *   </TabsButtonsContainer>
- *   <TabsContent>Content 1</TabsContent>
- *   <TabsContent>Content 2</TabsContent>
- * </TabsContainer>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the tabs container.
- * @prop {React.ElementType} [props.element="div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the tabs container element.
- * @prop {React.ReactNode} [props.children] - Child components (typically TabsNav and TabsContent).
- *
- * @returns {JSX.Element} The rendered TabsContainer component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/tabs
- */
-export const TabsContainer: FC<ILibTabsContainer> = ({
-	element = "div",
-	ref,
-	className,
-	children,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx("flex flex-col gap-4", "tabs-container", className)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}