@youngonesworks/ui 0.1.95 → 0.1.98

package/dist/index.js

@@ -3,7 +3,7 @@
 
 import * as React$1 from "react";
 import React, { Fragment, cloneElement, createRef, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { IconAlertCircle, IconArrowNarrowLeft, IconBold, IconCalendar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircleCheck, IconClearFormatting, IconEyeCheck, IconEyeOff, IconFilter, IconHeart, IconHeartFilled, IconItalic, IconList, IconListNumbers, IconMessageDots, IconSelector, IconUnderline, IconX } from "@tabler/icons-react";
+import { IconAlertCircle, IconAlertTriangle, IconArrowNarrowLeft, IconBold, IconCalendar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircleCheck, IconClearFormatting, IconEyeCheck, IconEyeOff, IconFilter, IconHeart, IconHeartFilled, IconItalic, IconList, IconListNumbers, IconMessageDots, IconSelector, IconUnderline, IconX } from "@tabler/icons-react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -130,6 +130,7 @@ let COLOR = /* @__PURE__ */ function(COLOR$1) {
 	COLOR$1["ULTRA_LIGHT_GRAY"] = "ultra-light-gray";
 	COLOR$1["TURQUOISE"] = "turquoise";
 	COLOR$1["RED"] = "red";
+	COLOR$1["DARK_GRAY"] = "dark-gray";
 	COLOR$1["GRAY"] = "gray";
 	COLOR$1["WHITE"] = "white";
 	COLOR$1["PURPLE"] = "purple";
@@ -201,51 +202,74 @@ ActionIcon.displayName = "ActionIcon";
 
 //#endregion
 //#region src/components/alert/index.tsx
-const Alert = ({ show, message, type, plain = false, className }) => {
-	const [showAlert, setShowAlert] = useState();
-	const icon = () => {
-		if (plain) return null;
-		switch (type) {
-			case "warning": return /* @__PURE__ */ jsx(IconAlertCircle, {
-				className: "text-warning hidden md:block",
-				size: 26,
-				"data-testid": "alert-circle-icon"
-			});
-			case "error": return /* @__PURE__ */ jsx(IconAlertCircle, {
-				className: "hidden text-red-500 md:block",
-				size: 26,
-				"data-testid": "alert-circle-icon"
-			});
-			case "success": return /* @__PURE__ */ jsx(IconCircleCheck, {
-				className: "text-green hidden md:block",
-				size: 26,
-				"data-testid": "check-circle-icon"
-			});
+const Alert = ({ show, title, description, type = "warning", button, plain = false, closable = false, className, icon, onClose,...props }) => {
+	if (!show || !title) return null;
+	const typeConfig = {
+		success: {
+			bg: "bg-green-light",
+			iconColor: "text-green",
+			Icon: IconCircleCheck
+		},
+		warning: {
+			bg: "bg-warning-light",
+			iconColor: "text-warning",
+			Icon: IconAlertTriangle
+		},
+		error: {
+			bg: "bg-red-50",
+			iconColor: "text-red-500",
+			Icon: IconAlertCircle
 		}
-		return null;
 	};
-	useEffect(() => {
-		setShowAlert(show);
-	}, [show]);
-	if (!showAlert) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(`flex w-full justify-between gap-3 rounded border border-solid p-5 md:items-center md:gap-12 ${plain ? "border-none py-4 text-sm font-medium" : ""}`, {
-			"border-warning bg-warning-light text-warning": type === COLOR.WARNING,
-			"border-red-500 bg-red-50 text-red-500": type === COLOR.ERROR,
-			"border-green bg-green-light text-green": type === COLOR.SUCCESS
-		}, className),
+	const config = typeConfig[type];
+	const { bg, iconColor, Icon } = config;
+	const descriptionId = description ? `alert-desc` : undefined;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		"aria-live": "assertive",
+		"aria-atomic": "true",
+		"aria-describedby": descriptionId,
+		className: cn("flex justify-between items-start rounded-md px-5 py-3", bg, plain && "border-none py-4 text-sm font-medium", className),
 		"data-component": "Alert",
 		"data-testid": "alert",
-		children: /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
-			className: "flex md:items-center",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex md:items-center",
-				children: icon()
-			}), /* @__PURE__ */ jsx("p", {
-				className: `m-0 font-medium text-black ${plain ? "" : "md:ml-5"}`,
-				children: message
-			})]
-		}) })
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 flex-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [!plain && (icon ? /* @__PURE__ */ jsx("span", {
+						"data-testid": "alert-custom-icon",
+						"aria-hidden": "true",
+						children: icon
+					}) : /* @__PURE__ */ jsx(Icon, {
+						size: 20,
+						className: cn(iconColor, "shrink-0"),
+						"data-testid": "alert-icon",
+						"aria-hidden": "true"
+					})), /* @__PURE__ */ jsx("span", {
+						className: "text-base font-medium",
+						children: title
+					})]
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					id: descriptionId,
+					className: "text-sm text-color-gray-900",
+					children: description
+				}),
+				button && /* @__PURE__ */ jsx("div", { children: button })
+			]
+		}), closable && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "ml-4 text-gray-500 hover:text-gray-700",
+			onClick: onClose,
+			"aria-label": "Dismiss alert",
+			"data-testid": "alert-close",
+			children: /* @__PURE__ */ jsx(IconX, {
+				size: 18,
+				"aria-hidden": "true"
+			})
+		})]
 	});
 };
 Alert.displayName = "Alert";
@@ -612,48 +636,32 @@ const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ jsx("
 
 //#endregion
 //#region src/components/badge/index.tsx
-const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile = false, badgeBorder = false, fullWidth = false, leftSection, rightSection, children,...props }) => /* @__PURE__ */ jsxs("span", {
-	"data-testid": "badge",
-	"data-component": "Badge",
-	className: clsx("inline-flex h-[1.375rem] max-w-full place-content-center items-center p-[10px] align-middle text-xs leading-[20px] font-medium tracking-wide text-wrap whitespace-normal normal-case", mobile ? "rounded-s" : "rounded-[2rem]", fullWidth && "w-full", badgeBorder && {
-		"border-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
-		"border-green-light": styleVariant === COLOR.GREEN_LIGHT,
-		"border-red-500": styleVariant === COLOR.RED,
-		"border-purple": styleVariant === COLOR.PURPLE,
-		"border-warning": styleVariant === COLOR.WARNING,
-		"border-black": styleVariant === COLOR.BLACK,
-		"border-gray-800": styleVariant === COLOR.GRAY,
-		"border-pink": styleVariant === COLOR.PINK_LIGHT || styleVariant === COLOR.PINK,
-		"border-gray-200 bg-white text-black": styleVariant === COLOR.WHITE
-	}, {
-		"bg-accent-blue-light text-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
-		"bg-green-light text-green": styleVariant === COLOR.GREEN_LIGHT,
-		"bg-red-50 text-red-500": styleVariant === COLOR.RED,
-		"bg-purple-light text-purple": styleVariant === COLOR.PURPLE,
-		"bg-warning-light text-warning": styleVariant === COLOR.WARNING,
-		"bg-gray-50 text-black": styleVariant === COLOR.BLACK,
-		"bg-gray-50 text-gray-800": styleVariant === COLOR.GRAY,
-		"bg-pink-light text-pink": styleVariant === COLOR.PINK_LIGHT,
-		"bg-pink text-white": styleVariant === COLOR.PINK,
-		"bg-white text-black": styleVariant === COLOR.WHITE
-	}, className),
-	...props,
-	children: [
-		leftSection && /* @__PURE__ */ jsx("div", {
-			"data-testid": "left-section",
-			children: leftSection
-		}),
-		/* @__PURE__ */ jsx("span", {
+const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children,...props }) => {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-testid": "badge",
+		"data-component": "Badge",
+		className: clsx("inline-flex h-[1.375rem] max-w-full place-content-center items-center p-[10px] align-middle text-xs leading-[20px] font-medium tracking-wide text-wrap whitespace-normal normal-case rounded-sm", {
+			"bg-accent-blue-light text-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
+			"bg-green-light text-green": styleVariant === COLOR.GREEN_LIGHT,
+			"bg-red-50 text-red-500": styleVariant === COLOR.RED,
+			"bg-purple-light text-purple": styleVariant === COLOR.PURPLE,
+			"bg-warning-light text-warning": styleVariant === COLOR.WARNING,
+			"bg-gray-50 text-black": styleVariant === COLOR.DARK_GRAY,
+			"bg-black text-white": styleVariant === COLOR.BLACK,
+			"bg-gray-50 text-gray-800": styleVariant === COLOR.GRAY,
+			"bg-pink-light text-pink": styleVariant === COLOR.PINK_LIGHT,
+			"bg-pink text-white": styleVariant === COLOR.PINK,
+			"bg-white text-black": styleVariant === COLOR.WHITE
+		}, className),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
 			"data-testid": "badge-content",
 			className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
 			children
-		}),
-		rightSection && /* @__PURE__ */ jsx("div", {
-			"data-testid": "right-section",
-			children: rightSection
 		})
-	]
-});
+	});
+};
 Badge.displayName = "Badge";
 
 //#endregion