@youngonesworks/ui 0.1.104 → 0.1.105

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

@@ -1,5 +1,6 @@
 import type { MouseEvent } from 'react';
 export interface ActionIconProps {
+    ref?: React.Ref<HTMLButtonElement>;
     'data-testid'?: string;
     title: string;
     disabled?: boolean;
@@ -20,5 +21,8 @@ export interface ActionIconProps {
      */
     height?: string;
 }
-declare const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ActionIcon: {
+    ({ ref, title, disabled, styleVariant, icon, type, "data-testid": testId, iconSize, strokeWidth, onClick, className, ...props }: ActionIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { ActionIcon };

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

@@ -1,5 +1,6 @@
 export interface KebabMenuProps {
     title?: string;
+    tooltip?: string;
     disabled?: boolean;
     content: {
         key: number;
@@ -11,6 +12,6 @@ export interface KebabMenuProps {
     styleVariant?: 'default' | 'small';
 }
 export declare const KebabMenu: {
-    ({ title, content, disabled, styleVariant }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, tooltip, content, disabled, styleVariant }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/index.cjs

@@ -29,12 +29,12 @@ const __tabler_icons_react = __toESM(require("@tabler/icons-react"));
 const clsx = __toESM(require("clsx"));
 const tailwind_merge = __toESM(require("tailwind-merge"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
-const react_tooltip = __toESM(require("react-tooltip"));
+const __floating_ui_react = __toESM(require("@floating-ui/react"));
 const react_day_picker = __toESM(require("react-day-picker"));
 const date_fns = __toESM(require("date-fns"));
 const date_fns_locale = __toESM(require("date-fns/locale"));
-const __floating_ui_react = __toESM(require("@floating-ui/react"));
 const react_dom = __toESM(require("react-dom"));
+const react_tooltip = __toESM(require("react-tooltip"));
 const __tiptap_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
 const __tiptap_extension_underline = __toESM(require("@tiptap/extension-underline"));
 const __tiptap_react = __toESM(require("@tiptap/react"));
@@ -114,6 +114,113 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ (0, react_
 	children
 });
 
+//#endregion
+//#region src/hooks/useMergeRefs.ts
+function useMergeRefs(...refs) {
+	return (0, react.useCallback)((value) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") {
+				ref(value);
+			} else if (ref) {
+				ref.current = value;
+			}
+		});
+	}, [refs]);
+}
+
+//#endregion
+//#region src/components/tooltip/index.tsx
+const sizeClasses = {
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg"
+};
+const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
+	const arrowRef = (0, react.useRef)(null);
+	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		placement: "top",
+		middleware: [
+			variant === "default" ? (0, __floating_ui_react.offset)(20) : (0, __floating_ui_react.offset)(25),
+			(0, __floating_ui_react.flip)(),
+			(0, __floating_ui_react.shift)(),
+			(0, __floating_ui_react.arrow)({ element: arrowRef })
+		],
+		whileElementsMounted: __floating_ui_react.autoUpdate
+	});
+	const hover = (0, __floating_ui_react.useHover)(context, { move: false });
+	const focus = (0, __floating_ui_react.useFocus)(context);
+	const dismiss = (0, __floating_ui_react.useDismiss)(context);
+	const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
+	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+		hover,
+		focus,
+		dismiss,
+		role
+	]);
+	const childRef = children.ref;
+	const mergedRef = useMergeRefs(refs.setReference, childRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
+		...children.props,
+		...getReferenceProps(),
+		ref: mergedRef
+	})), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		...getFloatingProps(),
+		className: "z-70 drop-shadow-xl",
+		"data-testid": "tooltip",
+		"data-component": "tooltip",
+		children: variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": "tooltip-container",
+			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "tooltip-content",
+				className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
+				children: content
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 10,
+				height: 6,
+				tipRadius: 1,
+				"data-testid": "tooltip-arrow",
+				className: "fill-gray-800 drop-shadow-xl"
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": "tooltip-container",
+			className: "bg-linear-gradient-x pt-[3px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-testid": "tooltip-content",
+				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
+			}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 25,
+				height: 17,
+				tipRadius: 1,
+				fill: "white",
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
+				ref: arrowRef,
+				context,
+				width: 10,
+				height: 6,
+				tipRadius: 1,
+				fill: "white",
+				className: "drop-shadow-xl",
+				"data-testid": "tooltip-arrow"
+			})]
+		})
+	})] });
+};
+Tooltip.displayName = "Tooltip";
+
 //#endregion
 //#region src/utils/enums.ts
 let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT$1) {
@@ -191,34 +298,35 @@ function formatIcon(icon, defaultFormatAttributes) {
 
 //#endregion
 //#region src/components/actionIcon/index.tsx
-const ActionIcon = (0, react.forwardRef)(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
+const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }) => {
 	const variantClassNames = (0, clsx.default)({
 		"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
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		title,
-		type,
-		disabled,
-		"data-testid": testId,
-		"data-component": "ActionIcon",
-		className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
-		onClick,
-		ref,
-		"data-tooltip-id": title,
-		"data-tooltip-content": title,
-		...props,
-		children: icon ? formatIcon(icon, {
-			stroke: strokeWidth,
-			size: iconSize
-		}) : props.children
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_tooltip.Tooltip, {
-		id: title,
-		className: "z-[99]"
-	})] });
-});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+		size: "sm",
+		content: title,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			title,
+			type,
+			disabled,
+			"data-testid": testId,
+			"data-component": "ActionIcon",
+			className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
+			onClick,
+			ref,
+			"data-tooltip-id": title,
+			"data-tooltip-content": title,
+			...props,
+			children: icon ? formatIcon(icon, {
+				stroke: strokeWidth,
+				size: iconSize
+			}) : props.children
+		})
+	}) });
+};
 ActionIcon.displayName = "ActionIcon";
 
 //#endregion
@@ -1512,100 +1620,9 @@ const Island = ({ children, className, noShadow = false, noPadding = false,...pr
 });
 Island.displayName = "Island";
 
-//#endregion
-//#region src/components/tooltip/index.tsx
-const sizeClasses = {
-	xs: "max-w-xs",
-	sm: "max-w-sm",
-	md: "max-w-md",
-	lg: "max-w-lg"
-};
-const Tooltip = ({ content, children, passedOpen = false, size = "md", variant = "default" }) => {
-	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
-	const arrowRef = (0, react.useRef)(null);
-	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
-		open: isOpen,
-		onOpenChange: setIsOpen,
-		placement: "top",
-		middleware: [
-			variant === "default" ? (0, __floating_ui_react.offset)(20) : (0, __floating_ui_react.offset)(25),
-			(0, __floating_ui_react.flip)(),
-			(0, __floating_ui_react.shift)(),
-			(0, __floating_ui_react.arrow)({ element: arrowRef })
-		],
-		whileElementsMounted: __floating_ui_react.autoUpdate
-	});
-	const hover = (0, __floating_ui_react.useHover)(context, { move: false });
-	const focus = (0, __floating_ui_react.useFocus)(context);
-	const dismiss = (0, __floating_ui_react.useDismiss)(context);
-	const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
-	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
-		hover,
-		focus,
-		dismiss,
-		role
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
-		ref: refs.setReference,
-		...children.props,
-		...getReferenceProps()
-	})), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: refs.setFloating,
-		style: floatingStyles,
-		...getFloatingProps(),
-		className: "z-70 drop-shadow-xl",
-		"data-testid": "tooltip",
-		"data-component": "tooltip",
-		children: variant === "default" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-testid": "tooltip-container",
-			className: "w-full rounded bg-gray-800 pt-[3px] text-white",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} px-2 py-1 text-sm font-normal`,
-				children: content
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 10,
-				height: 6,
-				tipRadius: 1,
-				"data-testid": "tooltip-arrow",
-				className: "fill-gray-800 drop-shadow-xl"
-			})]
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-testid": "tooltip-container",
-			className: "bg-linear-gradient-x pt-[3px]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-testid": "tooltip-content",
-				className: `${sizeClasses[size]} overflow-hidden bg-white p-5 px-2 py-1 text-start text-sm font-normal`,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: content })
-			}), size === "md" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 25,
-				height: 17,
-				tipRadius: 1,
-				fill: "white",
-				className: "drop-shadow-xl",
-				"data-testid": "tooltip-arrow"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingArrow, {
-				ref: arrowRef,
-				context,
-				width: 10,
-				height: 6,
-				tipRadius: 1,
-				fill: "white",
-				className: "drop-shadow-xl",
-				"data-testid": "tooltip-arrow"
-			})]
-		})
-	})] });
-};
-Tooltip.displayName = "Tooltip";
-
 //#endregion
 //#region src/components/kebabMenu/index.tsx
-const KebabMenu = ({ title, content, disabled = false, styleVariant = "default" }) => {
+const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "default" }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const menuRef = (0, react.useRef)(null);
 	const defaultStyling = "text-black flex items-center justify-self-end gap-1 bg-transparent font-medium py-1 h-9 min-w-9 cursor-pointer px-0";
@@ -1627,6 +1644,28 @@ const KebabMenu = ({ title, content, disabled = false, styleVariant = "default"
 			document.removeEventListener("mousedown", handleClickOutside);
 		};
 	}, []);
+	const button = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
+		"aria-label": "Options Menu",
+		className: cn(buttonVariants["secondary"], defaultStyling, {
+			"md:pr-3.5 md:pl-5": title,
+			"h-7 min-w-7": styleVariant === "small"
+		}),
+		disabled,
+		onClick: handleToggle,
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "hidden md:block",
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconDotsVertical, {
+			size: 20,
+			stroke: 1,
+			fill: "black"
+		})]
+	}), [
+		title,
+		styleVariant,
+		disabled,
+		handleToggle
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative",
 		"data-component": "kebabMenu",
@@ -1634,26 +1673,15 @@ const KebabMenu = ({ title, content, disabled = false, styleVariant = "default"
 		ref: menuRef,
 		"data-tooltip-id": title,
 		"data-tooltip-content": title,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
-			"aria-label": "Options Menu",
-			className: cn(buttonVariants["secondary"], defaultStyling, {
-				"md:pr-3.5 md:pl-5": title,
-				"h-7 min-w-7": styleVariant === "small"
-			}),
-			disabled,
-			onClick: handleToggle,
-			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "hidden md:block",
-				children: title
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconDotsVertical, {
-				size: 20,
-				stroke: 1,
-				fill: "black"
-			})]
-		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: [tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+			passedOpen: false,
+			size: "sm",
+			content: tooltip,
+			children: button
+		}) : button, isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md",
 			children: content.map((c, index) => {
-				const button = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
+				const button$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
 					onClick: () => handleItemClick(c.onClick),
 					className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
 					"aria-label": "Options Menu Item",
@@ -1664,8 +1692,8 @@ const KebabMenu = ({ title, content, disabled = false, styleVariant = "default"
 					passedOpen: false,
 					size: "sm",
 					content: c.tooltip,
-					children: button
-				}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: button }, index);
+					children: button$1
+				}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: button$1 }, index);
 			})
 		})]
 	}) });
@@ -2323,20 +2351,6 @@ function useDebouncedValue(value, delay = 200) {
 	return debouncedValue;
 }
 
-//#endregion
-//#region src/hooks/useMergeRefs.ts
-function useMergeRefs(...refs) {
-	return (0, react.useCallback)((value) => {
-		refs.forEach((ref) => {
-			if (typeof ref === "function") {
-				ref(value);
-			} else if (ref) {
-				ref.current = value;
-			}
-		});
-	}, [refs]);
-}
-
 //#endregion
 //#region src/components/select/index.tsx
 function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText,...props }) {