@julseb-lib/react 0.1.19 → 0.1.20

package/dist/lib/Variables.ts

@@ -1,202 +0,0 @@
-export enum COLORS {
-	/** #EFF6FF */ PRIMARY_50 = "var(--color-primary-50)",
-	/** #DBEAFE */ PRIMARY_100 = "var(--color-primary-100)",
-	/** #BFDBFE */ PRIMARY_200 = "var(--color-primary-200)",
-	/** #93C5FD */ PRIMARY_300 = "var(--color-primary-300)",
-	/** #60A5FA */ PRIMARY_400 = "var(--color-primary-400)",
-	/** #3B82F6 */ PRIMARY_500 = "var(--color-primary-500)",
-	/** #2563EB */ PRIMARY_600 = "var(--color-primary-600)",
-	/** #1D4ED8 */ PRIMARY_700 = "var(--color-primary-700)",
-	/** #1E40AF */ PRIMARY_800 = "var(--color-primary-800)",
-	/** #1E3A8A */ PRIMARY_900 = "var(--color-primary-900)",
-	/** #172554 */ PRIMARY_950 = "var(--color-primary-950)",
-	/** #ECFEFF */ SECONDARY_50 = "var(--color-secondary-50)",
-	/** #CFFAFE */ SECONDARY_100 = "var(--color-secondary-100)",
-	/** #A5F3FC */ SECONDARY_200 = "var(--color-secondary-200)",
-	/** #67E8F9 */ SECONDARY_300 = "var(--color-secondary-300)",
-	/** #22D3EE */ SECONDARY_400 = "var(--color-secondary-400)",
-	/** #06B6D4 */ SECONDARY_500 = "var(--color-secondary-500)",
-	/** #0891B2 */ SECONDARY_600 = "var(--color-secondary-600)",
-	/** #0E7490 */ SECONDARY_700 = "var(--color-secondary-700)",
-	/** #155E75 */ SECONDARY_800 = "var(--color-secondary-800)",
-	/** #164E63 */ SECONDARY_900 = "var(--color-secondary-900)",
-	/** #083344 */ SECONDARY_950 = "var(--color-secondary-950)",
-	/** #F0FDF4 */ SUCCESS_50 = "var(--color-success-50)",
-	/** #DCFCE7 */ SUCCESS_100 = "var(--color-success-100)",
-	/** #BBF7D0 */ SUCCESS_200 = "var(--color-success-200)",
-	/** #86EFAC */ SUCCESS_300 = "var(--color-success-300)",
-	/** #4ADE80 */ SUCCESS_400 = "var(--color-success-400)",
-	/** #22C55E */ SUCCESS_500 = "var(--color-success-500)",
-	/** #16A34A */ SUCCESS_600 = "var(--color-success-600)",
-	/** #15803D */ SUCCESS_700 = "var(--color-success-700)",
-	/** #166534 */ SUCCESS_800 = "var(--color-success-800)",
-	/** #14532D */ SUCCESS_900 = "var(--color-success-900)",
-	/** #052E16 */ SUCCESS_950 = "var(--color-success-950)",
-	/** #FEF2F2 */ DANGER_50 = "var(--color-danger-50)",
-	/** #FEE2E2 */ DANGER_100 = "var(--color-danger-100)",
-	/** #FECACA */ DANGER_200 = "var(--color-danger-200)",
-	/** #FCA5A5 */ DANGER_300 = "var(--color-danger-300)",
-	/** #F87171 */ DANGER_400 = "var(--color-danger-400)",
-	/** #EF4444 */ DANGER_500 = "var(--color-danger-500)",
-	/** #DC2626 */ DANGER_600 = "var(--color-danger-600)",
-	/** #B91C1C */ DANGER_700 = "var(--color-danger-700)",
-	/** #991B1B */ DANGER_800 = "var(--color-danger-800)",
-	/** #7F1D1D */ DANGER_900 = "var(--color-danger-900)",
-	/** #450A0A */ DANGER_950 = "var(--color-danger-950)",
-	/** #FFFBEB */ WARNING_50 = "var(--color-warning-50)",
-	/** #FEF3C7 */ WARNING_100 = "var(--color-warning-100)",
-	/** #FDE68A */ WARNING_200 = "var(--color-warning-200)",
-	/** #FCD34D */ WARNING_300 = "var(--color-warning-300)",
-	/** #FBBF24 */ WARNING_400 = "var(--color-warning-400)",
-	/** #F59E0B */ WARNING_500 = "var(--color-warning-500)",
-	/** #D97706 */ WARNING_600 = "var(--color-warning-600)",
-	/** #B45309 */ WARNING_700 = "var(--color-warning-700)",
-	/** #92400E */ WARNING_800 = "var(--color-warning-800)",
-	/** #78350F */ WARNING_900 = "var(--color-warning-900)",
-	/** #451A03 */ WARNING_950 = "var(--color-warning-950)",
-	/** #FAFAFA */ GRAY_50 = "var(--color-gray-50)",
-	/** #F5F5F5 */ GRAY_100 = "var(--color-gray-100)",
-	/** #E5E5E5 */ GRAY_200 = "var(--color-gray-200)",
-	/** #D4D4D4 */ GRAY_300 = "var(--color-gray-300)",
-	/** #A3A3A3 */ GRAY_400 = "var(--color-gray-400)",
-	/** #737373 */ GRAY_500 = "var(--color-gray-500)",
-	/** #525252 */ GRAY_600 = "var(--color-gray-600)",
-	/** #404040 */ GRAY_700 = "var(--color-gray-700)",
-	/** #262626 */ GRAY_800 = "var(--color-gray-800)",
-	/** #171717 */ GRAY_900 = "var(--color-gray-900)",
-	/** #0A0A0A */ GRAY_950 = "var(--color-gray-950)",
-	/** #000000 */ BLACK = "var(--color-black)",
-	/** #FFFFFF */ WHITE = "var(--color-white)",
-	TRANSPARENT = "transparent",
-	CURRENT_COLOR = "currentColor",
-}
-
-export enum OVERLAYS {
-	/** rgba(0, 0, 0, 0.5) */ BLACK_50 = "var(--color-overlay-black-50)",
-	/** rgba(0, 0, 0, 0.8) */ BLACK_80 = "var(--color-overlay-black-80)",
-	/** rgba(255, 255, 255, 0.5) */ WHITE_50 = "var(--color-overlay-white-50)",
-	/** rgba(69, 35, 35, 0.8) */ WHITE_80 = "var(--color-overlay-white-80)",
-	/** linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%) */ GRADIENT_BLACK = "var(--color-overlay-gradient-black)",
-	/** linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */ GRADIENT_WHITE = "var(--color-overlay-gradient-white)",
-}
-
-export enum FONT_FAMILIES {
-	/** Primary font family for body text */ SANS = "var(--font-sans)",
-	/** Font family for code and monospaced text */ MONO = "var(--font-mono)",
-}
-
-export enum FONT_SIZES {
-	/** 5rem */ DISPLAY_H1 = "var(--text-display-h1)",
-	/** 4rem */ DISPLAY_H2 = "var(--text-display-h2)",
-	/** 3.5rem */ DISPLAY_H3 = "var(--text-display-h3)",
-	/** 3rem */ DISPLAY_H4 = "var(--text-display-h4)",
-	/** 2.5rem */ DISPLAY_H5 = "var(--text-display-h5)",
-	/** 2.5rem */ H1 = "var(--text-h1)",
-	/** 2rem */ H2 = "var(--text-h2)",
-	/** 1.8rem */ H3 = "var(--text-h3)",
-	/** 1.5rem */ H4 = "var(--text-h4)",
-	/** 1.3rem */ H5 = "var(--text-h5)",
-	/** 1.1rem */ H6 = "var(--text-h6)",
-	/** 1rem */ BODY = "var(--text-body)",
-	/** 0.875rem */ SMALL = "var(--text-small)",
-}
-
-export enum FONT_WEIGHTS {
-	/** 100 */ THIN = "var(--font-weight-thin)",
-	/** 200 */ EXTRA_LIGHT = "var(--font-weight-extralight)",
-	/** 300 */ LIGHT = "var(--font-weight-light)",
-	/** 400 */ NORMAL = "var(--font-weight-normal)",
-	/** 500 */ MEDIUM = "var(--font-weight-medium)",
-	/** 600 */ SEMI_BOLD = "var(--font-weight-semibold)",
-	/** 700 */ BOLD = "var(--font-weight-bold)",
-	/** 800 */ EXTRA_BOLD = "var(--font-weight-extrabold)",
-	/** 900 */ BLACK = "var(--font-weight-black)",
-}
-
-export enum LINE_HEIGHTS {
-	/** 1 */ NONE = "var(--line-height-none)",
-	/** 1.25 */ TIGHT = "var(--line-height-tight)",
-	/** 1.375 */ SNUG = "var(--line-height-snug)",
-	/** 1.5 */ NORMAL = "var(--line-height-normal)",
-	/** 1.625 */ RELAXED = "var(--line-height-relaxed)",
-	/** 2 */ LOOSE = "var(--line-height-loose)",
-	/** 0.75rem (12px) */ _3 = "var(--line-height-3)",
-	/** 1rem (16px) */ _4 = "var(--line-height-4)",
-	/** 1.25rem (20px) */ _5 = "var(--line-height-5)",
-	/** 1.5rem (24px) */ _6 = "var(--line-height-6)",
-	/** 1.75rem (28px) */ _7 = "var(--line-height-7)",
-	/** 2rem (32px) */ _8 = "var(--line-height-8)",
-	/** 2.25rem (36px) */ _9 = "var(--line-height-9)",
-	/** 2.5rem (40px) */ _10 = "var(--line-height-10)",
-}
-
-export enum SHADOWS {
-	/** 0 1px 2px 0 rgba(0, 0, 0, 0.05) */ "2XS" = "var(--shadow-2xs)",
-	/** 0 1px 2px 0 rgba(0, 0, 0, 0.05) */ XS = "var(--shadow-xs)",
-	/** 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) */ SM = "var(--shadow-sm)",
-	/** 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) */ MD = "var(--shadow-md)",
-	/** 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) */ LG = "var(--shadow-lg)",
-	/** 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) */ XL = "var(--shadow-xl)",
-	/** 0 25px 50px -12px rgba(0, 0, 0, 0.25) */ "2XL" = "var(--shadow-2xl)",
-	/** inset 0 2px 4px 0 rgb(0 0 0 / 0.06) */ INNER = "var(--shadow-inner)",
-	/** none */ NONE = "var(--shadow-none)",
-}
-
-export enum INSET_SHADOWS {}
-
-export enum DROP_SHADOWS {}
-
-export enum TEXT_SHADOWS {}
-
-export enum SPACERS {
-	/** 48px */ "2XL" = "var(--spacer-2xl)",
-	/** 32px */ XL = "var(--spacer-xl)",
-	/** 24px */ LG = "var(--spacer-lg)",
-	/** 16px */ MD = "var(--spacer-md)",
-	/** 12px */ SM = "var(--spacer-sm)",
-	/** 8px */ XS = "var(--spacer-xs)",
-	/** 4px */ "2XS" = "var(--spacer-2xs)",
-}
-
-export enum RADIUS {
-	/** 0px */ NONE = "var(--radius-none)",
-	/**  */ XS = "var(--radius-xs)",
-	/** 0.125rem (2px) */ SM = "var(--radius-sm)",
-	/** 0.25rem (4px) */ DEFAULT = "var(--radius)",
-	/** 0.375rem (6px) */ MD = "var(--radius-md)",
-	/** 0.5rem (8px) */ LG = "var(--radius-lg)",
-	/** 0.75rem (12px) */ XL = "var(--radius-xl)",
-	/** 1rem (16px) */ "2XL" = "var(--radius-2xl)",
-	/** 1.5rem (24px) */ "3XL" = "var(--radius-3xl)",
-	/**  */ "4XL" = "var(--radius-4xl)",
-	/** 9999px */ FULL = "var(--radius-full)",
-}
-
-export enum LAYOUTS {
-	/** 600px */ MAIN_DEFAULT = "var(--main-default)",
-	/** 800px */ MAIN_LARGE = "var(--main-large)",
-	/** 400px */ MAIN_FORM = "var(--main-form)",
-	/** 100% */ MAIN_FULL = "var(--main-full)",
-	/** 250px */ ASIDE_DEFAULT = "var(--aside-default)",
-	/** 200px */ ASIDE_SMALL = "var(--aside-small)",
-}
-
-export enum TRANSITIONS {
-	/** all 200ms ease */ SHORT = "var(--transition-short)",
-	/** all 500ms ease */ LONG = "var(--transition-long)",
-	/** all 500ms cubic-bezier(0.25, 0.75, 0, 0.66) */ BEZIER = "var(--transition-bezier)",
-}
-
-export enum MEDIA {
-	BREAKPOINT_TABLET_LARGE = "(max-width: 1024px)",
-	BREAKPOINT_TABLET_SMALL = "(max-width: 768px)",
-	BREAKPOINT_MOBILE = "(max-width: 600px)",
-	TOUCH = "(hover: none) and (pointer: coarse)",
-	HOVER = "(hover: hover)",
-	PREFERS_LIGHT = "(prefers-color-scheme: light)",
-	PREFERS_DARK = "(prefers-color-scheme: dark)",
-}
-
-export const ICON_MULTIPLIER = 0.6 as const
-
-export const INPUT_HEIGHT = 32 as const

package/dist/lib/components/Accordion/Accordion.tsx

@@ -1,73 +0,0 @@
-import { type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { clsx } from "../../utils"
-import { AccordionItem } from "./AccordionItem"
-import type { ILibAccordion } from "./types"
-
-/**
- * Accordion component for creating collapsible content sections with customizable styling and expandable items.
- *
- * @component
- *
- * @example
- * <Accordion
- *   variant="rounded"
- *   icon="plus"
- *   items={[
- *     { title: "Section 1", content: <p>Content 1</p>, defaultOpen: true },
- *     { title: "Section 2", content: <p>Content 2</p> }
- *   ]}
- * />
- *
- * @extends ILibAccordion
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the accordion container.
- * @prop {React.ReactNode} [props.children] - Child AccordionItem components to render when not using items prop.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the accordion container element.
- * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual style variant of the accordion.
- * @prop {"plus" | "chevron"} [props.icon="plus"] - Type of icon to display for expand/collapse indicators.
- * @prop {Array} [props.items] - Array of accordion items with title, content, and defaultOpen properties.
- *
- * @returns {JSX.Element} The rendered Accordion component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/accordion
- */
-export const Accordion: FC<ILibAccordion> = ({
-	className,
-	element = "div",
-	ref,
-	children,
-	variant = "basic",
-	icon = "plus",
-	items,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex flex-col",
-				variant === "rounded"
-					? "rounded-md overflow-hidden border border-gray-200"
-					: "gap-2",
-				"accordion",
-				className,
-			)}
-			{...rest}
-		>
-			{items?.map(item => (
-				<AccordionItem
-					key={uuid()}
-					icon={icon}
-					variant={variant}
-					title={item.title}
-					defaultOpen={item.defaultOpen}
-				>
-					{item.content}
-				</AccordionItem>
-			)) ?? children}
-		</Element>
-	)
-}

package/dist/lib/components/Accordion/AccordionContent.tsx

@@ -1,55 +0,0 @@
-import { type FC } from "react"
-import { Text } from "../Text"
-import { clsx } from "../../utils"
-import type { ILibAccordionContent } from "./subtypes"
-
-/**
- * AccordionContent component for rendering the collapsible content area of accordion sections with smooth animations.
- *
- * @component
- *
- * @example
- * <AccordionContent
- *   variant="rounded"
- *   isOpen={isOpen}
- * >
- *   <p>This is the accordion content that can be expanded or collapsed.</p>
- * </AccordionContent>
- *
- * @extends ILibText
- *
- * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual style variant of the accordion content.
- * @prop {boolean} [props.isOpen] - Whether the accordion content is currently visible/expanded.
- *
- * @returns {JSX.Element} The rendered AccordionContent component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/accordion
- */
-export const AccordionContent: FC<ILibAccordionContent> = ({
-	element = Text,
-	ref,
-	className,
-	variant = "basic",
-	isOpen,
-	children,
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"overflow-hidden transition-all duration-200 ease",
-				"py-0 max-h-0 opacity-0",
-				variant === "rounded" && "px-2",
-				isOpen && "open py-2 max-h-auto opacity-100",
-				"accordion-content",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

package/dist/lib/components/Accordion/AccordionItem.tsx

@@ -1,66 +0,0 @@
-import { useState, type FC } from "react"
-import { clsx } from "../../utils"
-import { AccordionTitle } from "./AccordionTitle"
-import { AccordionContent } from "./AccordionContent"
-import type { ILibAccordionItem } from "./types"
-
-/**
- * AccordionItem component for creating individual collapsible sections with title, content, and customizable styling.
- *
- * @component
- *
- * @example
- * <AccordionItem
- *   title="Section Title"
- *   icon="plus"
- *   variant="rounded"
- *   defaultOpen={false}
- * >
- *   <p>This is the accordion content that can be expanded or collapsed.</p>
- * </AccordionItem>
- *
- * @extends HTMLDivElement
- *
- * @prop {React.ReactNode} [props.title] - Title content to display in the accordion header.
- * @prop {"plus" | "chevron"} [props.icon="chevron"] - Type of icon to display for expand/collapse indicator.
- * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual style variant of the accordion item.
- * @prop {boolean} [props.defaultOpen=false] - Whether the accordion should be open by default.
- *
- * @returns {JSX.Element} The rendered AccordionItem component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/accordion
- */
-export const AccordionItem: FC<ILibAccordionItem> = ({
-	element = "div",
-	title,
-	children,
-	icon = "plus",
-	variant,
-	defaultOpen = false,
-	className,
-	...rest
-}) => {
-	const Element = element
-
-	const [isOpen, setIsOpen] = useState(defaultOpen)
-
-	return (
-		<Element
-			className={clsx("flex flex-col", "accordion-item", className)}
-			{...rest}
-		>
-			<AccordionTitle
-				isOpen={isOpen}
-				setIsOpen={setIsOpen}
-				icon={icon}
-				variant={variant}
-			>
-				{title}
-			</AccordionTitle>
-
-			<AccordionContent variant={variant} isOpen={isOpen}>
-				{children}
-			</AccordionContent>
-		</Element>
-	)
-}

package/dist/lib/components/Accordion/AccordionTitle.tsx

@@ -1,80 +0,0 @@
-import { type FC } from "react"
-import { BiPlus, BiChevronDown } from "react-icons/bi"
-import { clsx, genRingColor, genTextColorHover } from "../../utils"
-import type { ILibAccordionTitle } from "./subtypes"
-
-/**
- * AccordionTitle component for rendering clickable headers in accordion sections with animated icons and customizable styling.
- *
- * @component
- *
- * @example
- * <AccordionTitle
- *   variant="rounded"
- *   icon="plus"
- *   isOpen={isOpen}
- *   setIsOpen={setIsOpen}
- * >
- *   Section Title
- * </AccordionTitle>
- *
- * @extends ILibAccordionTitle
- *
- * @prop {"plus" | "chevron"} [props.icon="chevron"] - Type of icon to display for expand/collapse indicator.
- * @prop {"basic" | "rounded"} [props.variant="basic"] - Visual style variant of the accordion title.
- * @prop {boolean} [props.isOpen] - Whether the accordion section is currently expanded.
- * @prop {function} [props.setIsOpen] - Function to toggle the accordion section open/closed state.
- *
- * @returns {JSX.Element} The rendered AccordionTitle component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/accordion
- */
-export const AccordionTitle: FC<ILibAccordionTitle> = ({
-	ref,
-	className,
-	icon = "plus",
-	variant = "basic",
-	isOpen,
-	setIsOpen,
-	children,
-	...rest
-}) => {
-	return (
-		<button
-			ref={ref}
-			className={clsx(
-				"flex justify-between items-center border-b outline-none w-full",
-				variant === "rounded"
-					? "bg-primary-500 text-white py-1 px-2 border-b-white"
-					: [genTextColorHover["primary"], "border-b-gray-200 "],
-				genRingColor["primary"],
-				"accordion-title",
-				className,
-			)}
-			onClick={() => setIsOpen(!isOpen)}
-			{...rest}
-		>
-			<span className="accordion-title-content">{children}</span>
-
-			{icon === "plus" ? (
-				<BiPlus
-					className={clsx(
-						"transition-all duration-200 ease-in-out",
-						isOpen && "open",
-						"[&.open]:rotate-45",
-						"accordion-title-icon",
-					)}
-				/>
-			) : (
-				<BiChevronDown
-					className={clsx(
-						"transition-all duration-200 ease-in-out",
-						isOpen && "open",
-						"[&.open]:rotate-180",
-						"accordion-title-icon",
-					)}
-				/>
-			)}
-		</button>
-	)
-}

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

@@ -1,2 +0,0 @@
-export * from "./Accordion"
-export * from "./AccordionItem"

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

@@ -1,26 +0,0 @@
-import type {
-	LibComponentBase,
-	LibAccordionIcon,
-	LibAccordionVariant,
-	DispatchState,
-} from "../../types"
-import type { ILibText } from "../Text/types"
-
-// ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN ACCORDION COMPONENTS
-
-/*====================== AccordionTitle ======================*/
-
-export interface ILibAccordionTitle
-	extends LibComponentBase<HTMLButtonElement> {
-	icon?: LibAccordionIcon
-	variant?: LibAccordionVariant
-	isOpen: boolean
-	setIsOpen: DispatchState<boolean>
-}
-
-/*====================== AccordionContent ======================*/
-
-export type ILibAccordionContent = ILibText & {
-	variant?: LibAccordionVariant
-	isOpen: boolean
-}

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

@@ -1,37 +0,0 @@
-import type {
-	LibComponentBase,
-	LibAccordionIcon,
-	LibAccordionVariant,
-	LibAccordionItem,
-	ReactChildren,
-} from "../../types"
-
-/*====================== Accordion ======================*/
-
-interface ILibAccordionBase extends LibComponentBase<HTMLDivElement> {
-	variant?: LibAccordionVariant
-	icon?: LibAccordionIcon
-}
-
-interface AccordionWithItems extends ILibAccordionBase {
-	items?: Array<LibAccordionItem>
-	children?: never
-}
-
-interface AccordionWithChildren extends ILibAccordionBase {
-	items?: never
-	children?: ReactChildren
-}
-
-export type ILibAccordion = AccordionWithItems | AccordionWithChildren
-
-/*====================== AccordionItem ======================*/
-
-export interface ILibAccordionItem
-	extends Omit<LibComponentBase<HTMLDivElement>, "title"> {
-	title: ReactChildren
-	children?: ReactChildren
-	icon?: LibAccordionIcon
-	variant?: LibAccordionVariant
-	defaultOpen?: boolean
-}

package/dist/lib/components/Alert/Alert.tsx

@@ -1,57 +0,0 @@
-import { type FC } from "react"
-import { Text } from "../Text"
-import { clsx, genBgColor50, genBorderColorShort } from "../../utils"
-import type { ILibAlert } from "./types"
-
-/**
- * Alert component for displaying informational messages with customizable colors and styling.
- *
- * @component
- *
- * @example
- * <Alert color="success">
- *   Operation completed successfully!
- * </Alert>
- * <Alert color="danger">
- *   <Text>Error occurred</Text>
- *   <Text>Please try again</Text>
- * </Alert>
- *
- * @extends HTMLDivElement
- *
- * @prop {string} [props.className] - Additional CSS classes to apply to the alert container.
- * @prop {React.ElementType} [props.element=typeof children === "string" ? Text : "div"] - HTML element type to render as the container.
- * @prop {React.Ref<HTMLDivElement>} [props.ref] - Ref to the alert element.
- * @prop {React.ReactNode} [props.children] - Content to display inside the alert.
- * @prop {LibAllColors} [props.color="primary"] - Color theme for the alert background and border.
- *
- * @returns {JSX.Element} The rendered Alert component.
- *
- * @see https://doc-julseb-lib-react.vercel.app/components/alert
- */
-export const Alert: FC<ILibAlert> = ({
-	children,
-	className,
-	element = typeof children === "string" ? Text : "div",
-	ref,
-	color = "primary",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"flex flex-col gap-2 px-4 py-2 border rounded-md w-full max-w-[400px]",
-				genBgColor50[color],
-				genBorderColorShort[color],
-				"alert",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}

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

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

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

@@ -1,8 +0,0 @@
-import type { LibColorsShort, LibComponentBase } from "../../types"
-
-export interface ILibAlert extends LibComponentBase<HTMLDivElement> {
-	color?: Exclude<
-		LibColorsShort,
-		"transparent" | "black" | "white" | "current" | "background"
-	>
-}

package/dist/lib/components/Aside/Aside.tsx

@@ -1,58 +0,0 @@
-import { type FC } from "react"
-import { clsx, genBgAllColors } from "../../utils"
-import type { ILibAside } from "./types"
-
-/**
- * Aside component for rendering a sidebar or secondary content area.
- *
- * @component
- * @example
- * <Aside size="small" backgroundColor="white">
- *   <p>Sidebar content</p>
- * </Aside>
- *
- * @prop {object} props - Component props.
- * @prop {string} [props.className] - Additional class names to apply.
- * @prop {ElementType} [props.element="aside"] - The HTML element or React component to render as the aside container.
- * @prop {RefObject<HTMLDivElement>} [props.ref] - Ref for the aside container.
- * @prop {ReactNode} props.children - Aside content.
- * @prop {"default"|"small"} [props.size="default"] - Aside width size.
- * @prop {string} [props.backgroundColor="white"] - Any color from the library.
- * @prop {object} [props.rest] - Additional props spread to the container.
- *
- * @returns {JSX.Element} The rendered aside container.
- *
- * @see https://doc-julseb-lib-react.vercel.app/styles/aside
- */
-export const Aside: FC<ILibAside> = ({
-	className,
-	element = "aside",
-	ref,
-	children,
-	size = "default",
-	backgroundColor = "background",
-	...rest
-}) => {
-	const Element = element
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"py-4 sm:py-8 md:py-12 w-full",
-				(genBgAllColors as any)[backgroundColor],
-				asideSize[size],
-				"aside",
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</Element>
-	)
-}
-
-const asideSize = {
-	default: "sm:max-w-(--aside-default)",
-	small: "sm:max-w-(--aside-small)",
-}

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

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