@youngonesworks/ui 0.1.95 → 0.1.99

package/dist/components/alert/index.d.ts

@@ -1,17 +1,18 @@
-interface IAlert {
+import { HTMLAttributes } from 'react';
+type AlertType = 'success' | 'warning' | 'error';
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     show: boolean;
-    message: React.ReactNode;
-    type: 'warning' | 'error' | 'success';
-    'data-testid'?: string;
+    title: string;
+    description?: string;
+    type?: AlertType;
+    button?: React.ReactNode;
     plain?: boolean;
-    /**
-     * @deprecated Can be removed entirely.
-     */
     closable?: boolean;
-    className?: string;
+    icon?: React.ReactNode;
+    onClose?: () => void;
 }
 export declare const Alert: {
-    ({ show, message, type, plain, className }: IAlert): import("react/jsx-runtime").JSX.Element | null;
+    ({ show, title, description, type, button, plain, closable, className, icon, onClose, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};

package/dist/components/badge/index.d.ts

@@ -1,27 +1,12 @@
 interface IBadgeProps {
-    styleVariant?: 'green-light' | 'red' | 'accent-blue' | 'warning' | 'gray' | 'black' | 'purple' | 'pink' | 'pink-light' | 'gray' | 'white';
+    styleVariant?: 'green-light' | 'red' | 'accent-blue' | 'warning' | 'gray' | 'black' | 'dark-gray' | 'purple' | 'pink' | 'pink-light' | 'gray' | 'white';
     color?: 'dark' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal';
-    /** Controls appearance */
-    variant?: 'light' | 'filled' | 'outline' | 'dot' | 'gradient';
-    /** Badge height and font size */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Key of theme.radius or any valid CSS value to set border-radius, "xl" by default */
-    radius?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Sets badge width to 100% of parent element, hides overflow text with text-overflow: ellipsis */
-    fullWidth?: boolean;
-    /** Section rendered on the left side of label */
-    leftSection?: React.ReactNode;
-    /** Section rendered on the right side of label */
-    rightSection?: React.ReactNode;
     favorite?: boolean;
-    /** Badge label */
     children?: React.ReactNode;
-    mobile?: boolean;
     className?: string;
-    badgeBorder?: boolean;
 }
 export declare const Badge: {
-    ({ styleVariant, className, favorite, mobile, badgeBorder, fullWidth, leftSection, rightSection, children, ...props }: IBadgeProps): import("react/jsx-runtime").JSX.Element;
+    ({ styleVariant, className, favorite, children, ...props }: IBadgeProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};

package/dist/index.cjs

@@ -152,6 +152,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";
@@ -223,51 +224,74 @@ ActionIcon.displayName = "ActionIcon";
 
 //#endregion
 //#region src/components/alert/index.tsx
-const Alert = ({ show, message, type, plain = false, className }) => {
-	const [showAlert, setShowAlert] = (0, react.useState)();
-	const icon = () => {
-		if (plain) return null;
-		switch (type) {
-			case "warning": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconAlertCircle, {
-				className: "text-warning hidden md:block",
-				size: 26,
-				"data-testid": "alert-circle-icon"
-			});
-			case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconAlertCircle, {
-				className: "hidden text-red-500 md:block",
-				size: 26,
-				"data-testid": "alert-circle-icon"
-			});
-			case "success": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.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: __tabler_icons_react.IconCircleCheck
+		},
+		warning: {
+			bg: "bg-warning-light",
+			iconColor: "text-warning",
+			Icon: __tabler_icons_react.IconAlertTriangle
+		},
+		error: {
+			bg: "bg-red-50",
+			iconColor: "text-red-500",
+			Icon: __tabler_icons_react.IconAlertCircle
 		}
-		return null;
 	};
-	(0, react.useEffect)(() => {
-		setShowAlert(show);
-	}, [show]);
-	if (!showAlert) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex md:items-center",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex md:items-center",
-				children: icon()
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: `m-0 font-medium text-black ${plain ? "" : "md:ml-5"}`,
-				children: message
-			})]
-		}) })
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-2 flex-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [!plain && (icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"data-testid": "alert-custom-icon",
+						"aria-hidden": "true",
+						children: icon
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						size: 20,
+						className: cn(iconColor, "shrink-0"),
+						"data-testid": "alert-icon",
+						"aria-hidden": "true"
+					})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-base font-medium",
+						children: title
+					})]
+				}),
+				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: descriptionId,
+					className: "text-sm text-color-gray-900",
+					children: description
+				}),
+				button && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: button })
+			]
+		}), closable && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconX, {
+				size: 18,
+				"aria-hidden": "true"
+			})
+		})]
 	});
 };
 Alert.displayName = "Alert";
@@ -634,48 +658,32 @@ const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ (0, r
 
 //#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__ */ (0, react_jsx_runtime.jsxs)("span", {
-	"data-testid": "badge",
-	"data-component": "Badge",
-	className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": "left-section",
-			children: leftSection
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children,...props }) => {
+	if (!children) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": "badge",
+		"data-component": "Badge",
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("span", {
 			"data-testid": "badge-content",
 			className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
 			children
-		}),
-		rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": "right-section",
-			children: rightSection
 		})
-	]
-});
+	});
+};
 Badge.displayName = "Badge";
 
 //#endregion