@youngonesworks/ui 1.0.6 → 1.0.8

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

@@ -1,5 +1,5 @@
 interface IBadgeProps {
-    styleVariant?: 'green-light' | 'red' | 'accent-blue' | 'warning' | 'gray' | 'black' | 'dark-gray' | 'purple' | 'secondary' | 'secondary-light' | 'gray' | 'white';
+    styleVariant?: 'primary' | 'green-light' | 'red' | 'accent-blue' | 'warning' | 'gray' | 'black' | 'dark-gray' | 'purple' | 'secondary' | 'secondary-light' | 'gray' | 'white';
     color?: 'dark' | 'gray' | 'red' | 'secondary' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal';
     favorite?: boolean;
     children?: React.ReactNode;

package/dist/hooks/useMergeRefs.d.ts

@@ -1,2 +1,2 @@
-import { Ref, RefCallback } from 'react';
+import { type Ref, type RefCallback } from 'react';
 export declare function useMergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;

package/dist/index.cjs

@@ -70,12 +70,12 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 	}, [active]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": "accordion-item",
-		className: cn("rounded-md hover:bg-gray-50", {
-			"bg-light-blue hover:bg-light-blue/50": style === "dark",
+		className: cn("rounded-md hover:bg-ultra-light-blue-gray", {
+			"bg-light-blue hover:bg-ultra-light-blue-gray": style === "dark",
 			"rounded-none border-b border-gray-200": border,
 			"bg-ultra-light-blue border border-gray-200 hover:bg-transparent": style === "onboarding",
 			"bg-white": style === "onboarding" && isActive,
-			"hover:bg-ultra-light-blue cursor-not-allowed opacity-50": disabled
+			"hover:bg-ultra-light-blue-gray cursor-not-allowed opacity-50": disabled
 		}, className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
 			className: cn("relative flex w-full flex-row items-center justify-between gap-2 px-4 py-3", { "flex-row-reverse": chevronPosition === "right" }),
@@ -286,7 +286,7 @@ const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", ic
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
 		"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === ACTION_ICON_STYLE_VARIANT.ROUND,
-		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-gray-50 disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
+		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-ultra-light-blue-gray disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 		size: "sm",
@@ -752,19 +752,20 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children
 			"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-purple-light text-black border border-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-secondary-light text-secondary": styleVariant === COLOR.SECONDARY_LIGHT,
 			"bg-secondary text-white": styleVariant === COLOR.SECONDARY,
-			"bg-white text-black": styleVariant === COLOR.WHITE
+			"bg-white text-black": styleVariant === COLOR.WHITE,
+			"bg-turquoise-50 text-black border border-primary": styleVariant === COLOR.PRIMARY
 		}, 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 text-inherit", { "flex items-center": favorite }),
+			className: cn("block h-[22px] overflow-hidden text-ellipsis whitespace-nowrap text-inherit", { "flex items-center": favorite }),
 			children
 		})
 	});
@@ -806,7 +807,7 @@ const buttonVariants = {
 	primary: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-primary text-black hover:bg-turquoise-700 hover:fill-white disabled:bg-turquoise-100 disabled:text-gray-800 disabled:hover:bg-turquoise-100"),
 	secondary: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-white text-black hover:border-gray-800 hover:bg-gray-50 hover:fill-white disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	danger: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-red-500 text-white hover:bg-red-700 disabled:bg-red-100 disabled:hover:bg-red-100"),
-	link: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-gray-50 disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
+	link: (0, clsx.default)(defaultButtonStyling, "border-transparent bg-transparent text-accent-blue hover:bg-ultra-light-blue-gray disabled:bg-transparent disabled:text-gray-800 disabled:hover:bg-transparent"),
 	outline: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-transparent hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	search: (0, clsx.default)(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
 	icon__primary: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center"),
@@ -1850,7 +1851,7 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ (0, react_jsx_runtime
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "chevron-left",
-			className: `flex ${onPrev ? "cursor-pointer hover:bg-gray-50" : "cursor-not-allowed"} h-full items-center px-2`,
+			className: `flex ${onPrev ? "cursor-pointer hover:bg-ultra-light-blue-gray" : "cursor-not-allowed"} h-full items-center px-2`,
 			onClick: onPrev,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronLeft, {
 				size: 20,
@@ -1860,7 +1861,7 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ (0, react_jsx_runtime
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-6 w-[0.8px] bg-gray-200" }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-testid": "chevron-right",
-			className: `flex ${onNext ? "cursor-pointer hover:bg-gray-50" : "cursor-not-allowed"} h-full items-center px-2 hover:bg-gray-50`,
+			className: `flex ${onNext ? "cursor-pointer hover:bg-ultra-light-blue-gray" : "cursor-not-allowed"} h-full items-center px-2 hover:bg-ultra-light-blue-gray`,
 			onClick: onNext,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconChevronRight, {
 				size: 20,
@@ -2752,7 +2753,7 @@ function TableRow({ children, className, header, ...props }) {
 const Tab = (0, react.forwardRef)(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 	ref,
 	"data-testid": `tab-${tabId}`,
-	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] yo-text-caption whitespace-nowrap text-black transition-colors duration-100 hover:border-black hover:bg-[#F0F0F6] data-active:border-black data-active:bg-[#F0F0F6] data-active:font-medium data-active:text-black`,
+	className: `${activeTab && "text-light-blue bg-accent-blue-grey font-semibold"} bg-ultra-light-blue px-5 py-[10px] yo-text-caption whitespace-nowrap  transition-colors duration-100 hover:border-black hover:bg-accent-blue-grey`,
 	onClick: () => clickFnc(tabId),
 	children: [tabContent, rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "ml-2 inline-flex",
@@ -3441,28 +3442,28 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 						type: "button",
 						"data-testid": "bold-button",
 						onClick: () => editor.chain().focus().toggleBold().run(),
-						className: `${editor.isActive("bold") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+						className: `${editor.isActive("bold") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small hover:bg-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoldIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-testid": "italic-button",
 						onClick: () => editor.chain().focus().toggleItalic().run(),
-						className: `${editor.isActive("italic") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+						className: `${editor.isActive("italic") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small hover:bg-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItalicIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-testid": "underline-button",
 						onClick: () => editor.chain().focus().toggleUnderline().run(),
-						className: `${editor.isActive("underline") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+						className: `${editor.isActive("underline") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center border-gray-400 yo-text-small hover:bg-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnderlineIcon, {})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-testid": "clear-formatting-button",
 						onClick: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
-						className: "flex size-[26px] items-center justify-center rounded-r-md border-gray-400 bg-white yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden",
+						className: "flex size-[26px] items-center justify-center rounded-r-md border-gray-400 bg-white yo-text-small hover:bg-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearFormattingIcon, {})
 					})
 				]
@@ -3472,13 +3473,13 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 					type: "button",
 					"data-testid": "bullet-list-button",
 					onClick: () => editor.chain().focus().toggleBulletList().run(),
-					className: `${editor.isActive("bulletList") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+					className: `${editor.isActive("bulletList") ? "bg-primary/20" : "bg-white"} flex size-[26px] items-center justify-center rounded-l-md border-gray-400 yo-text-small hover:bg-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListIcon, {})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"data-testid": "ordered-list-button",
 					onClick: () => editor.chain().focus().toggleOrderedList().run(),
-					className: `${editor.isActive("orderedList") ? "bg-primary/20 text-primary" : "bg-white"} flex size-[26px] items-center justify-center rounded-r-md border-gray-400 yo-text-small hover:bg-gray-100 focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
+					className: `${editor.isActive("orderedList") ? "bg-primary/20 text-primary" : "bg-white"} flex size-[26px] items-center justify-center rounded-r-md border-gray-400 yo-text-small hover:bg-accent-blue-grey focus:ring-2 focus:ring-teal-500 focus:outline-hidden`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListNumbersIcon, {})
 				})]
 			})]