@youngonesworks/ui 0.1.29 → 0.1.31

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

@@ -1,4 +1,5 @@
-import React, { type ReactElement } from 'react';
+import * as React from 'react';
+import { type ReactElement } from 'react';
 import { type ActionMeta, type GroupBase, type Props, type PropsValue, type SingleValue } from 'react-select';
 interface CustomSelectProps<T> extends Props<T, false, GroupBase<T>> {
     small?: boolean;

package/dist/components/table/tableRow/index.d.ts

@@ -4,5 +4,5 @@ interface ITableRow extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
     className?: string;
     header?: boolean;
 }
-export declare const TableRow: import("react").ForwardRefExoticComponent<ITableRow & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TableRow({ children, className, ...props }: ITableRow): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export interface IThemeIcon extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
     styleVariant?: 'black' | 'gray' | 'pink' | 'pink-with-background' | 'turquoise' | 'accent-blue' | 'check' | 'warning' | 'error';
     icon: React.ReactNode;
@@ -6,4 +6,4 @@ export interface IThemeIcon extends Omit<HTMLAttributes<HTMLDivElement>, 'classN
     adjustedSize?: string | number;
     title: string;
 }
-export declare const ThemeIcon: React.ForwardRefExoticComponent<IThemeIcon & React.RefAttributes<HTMLDivElement>>;
+export declare function ThemeIcon({ styleVariant, className, icon, adjustedSize, title, ...props }: IThemeIcon): import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs

@@ -1,3 +1,6 @@
+'use client';
+
+
 //#region rolldown:runtime
 var __create = Object.create;
 var __defProp$1 = Object.defineProperty;
@@ -103318,7 +103321,10 @@ LinkText.displayName = "LinkText";
 const BreadCrumb = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkText, {
 	"data-component": "BreadCrumb",
 	classNames: "flex items-center",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconArrowNarrowLeft, { size: 20 }), children] })
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconArrowNarrowLeft, { size: 20 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "flex items-center gap-5",
+		children
+	})] })
 });
 BreadCrumb.displayName = "BreadCrumb";
 
@@ -109965,12 +109971,21 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 			else clearInterval(scrollInterval);
 		}, 15);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		title: scrollToTopTitle,
+		type: "button",
+		disabled: false,
+		"data-testid": "scrollToTop",
+		"data-component": "ActionIcon",
 		className: `active:translate-y-[1px] content-center rounded-[4px] border-gray-200 hover:border-black child:p-10 disabled:text-gray-500 bg-turquoise-700 hover:bg-turquoise-600 fixed -right-[10px] bottom-[105px] z-40 flex h-[43px] w-[62px] cursor-pointer items-center justify-center rounded-l-3xl border-0 px-2 text-black duration-500 ${isVisible ? "translate-x-0" : "translate-x-[60px]"}`,
 		onClick: scrollToTop,
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronUp, {})
-	});
+		"data-tooltip-id": scrollToTopTitle,
+		"data-tooltip-content": scrollToTopTitle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconChevronUp, {})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(M, {
+		id: scrollToTopTitle,
+		className: "z-[99]"
+	})] });
 };
 
 //#endregion
@@ -111918,9 +111933,9 @@ var jsx = function jsx$3(type, props) {
 	}
 	return react.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx$66) {
+(function(_jsx$69) {
 	var JSX;
-	(function(_JSX) {})(JSX || (JSX = _jsx$66.JSX || (_jsx$66.JSX = {})));
+	(function(_JSX) {})(JSX || (JSX = _jsx$69.JSX || (_jsx$69.JSX = {})));
 })(jsx || (jsx = {}));
 var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
 	var styles = props.styles;
@@ -115892,13 +115907,107 @@ const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ (0, react_jsx_
 
 //#endregion
 //#region src/components/table/tableRow/index.tsx
-const TableRow = (0, react.forwardRef)(({ children, className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function TableRow({ children, className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-component": "tableRow",
+		className: `${cn("table-row border-x-0 border-y-0 border-t border-solid border-gray-200 xl:border-t xl:border-solid xl:border-gray-200", "hover:bg-ultra-light-blue", className)}`,
+		...props,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/tabs/Tab.tsx
+const Tab = (0, react.forwardRef)(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 	ref,
-	"data-component": "tableRow",
-	className: `${cn("table-row border-x-0 border-y-0 border-t border-solid border-gray-200 xl:border-t xl:border-solid xl:border-gray-200", "hover:bg-ultra-light-blue", className)}`,
-	...props,
-	children
+	"data-testid": `tab-${tabId}`,
+	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] text-xs font-normal 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`,
+	onClick: () => clickFnc(tabId),
+	children: [tabContent, rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "ml-2 inline-flex",
+		children: rightSection
+	})]
+}));
+
+//#endregion
+//#region src/components/tabs/TabsWrapper.tsx
+const TabsWrapper = ({ setActiveTab, activeTab, tabs }) => {
+	const tabRefs = (0, react.useMemo)(() => {
+		const refs = {};
+		tabs?.forEach((tab) => {
+			refs[tab.value] = (0, react.createRef)();
+		});
+		return refs;
+	}, [tabs]);
+	const [underlineStyle, setUnderlineStyle] = (0, react.useState)({
+		width: 0,
+		left: 0
+	});
+	(0, react.useEffect)(() => {
+		if (activeTab && tabRefs[activeTab]?.current) {
+			const activeTabElement = tabRefs[activeTab].current;
+			setUnderlineStyle({
+				width: activeTabElement?.offsetWidth || 0,
+				left: activeTabElement?.offsetLeft || 0
+			});
+		}
+	}, [activeTab, tabRefs]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative inline-block w-auto border-b-[3px] border-gray-200",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex",
+				children: tabs && tabs?.map((tab) => tab.requiredPermissions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabContent, {
+					tab,
+					ref: tabRefs[tab.value],
+					setActiveTab,
+					activeTab
+				}, tab.value) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabContent, {
+					tab,
+					ref: tabRefs[tab.value],
+					setActiveTab,
+					activeTab
+				}, tab.value))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute h-[3px] bg-gray-900 transition-all duration-300",
+				style: {
+					width: underlineStyle.width,
+					left: underlineStyle.left,
+					bottom: "-3px"
+				}
+			})]
+		})
+	});
+};
+const TabContent = (0, react.forwardRef)(({ tab, setActiveTab, activeTab }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
+	ref,
+	tabId: tab.value,
+	setActiveTab,
+	activeTab: activeTab === tab.value,
+	tabContent: tab.name,
+	rightSection: tab?.rightSection || undefined,
+	clickFnc: () => {
+		tab.clickFnc(tab.value);
+		setActiveTab(tab.value);
+	}
 }));
+TabContent.displayName = "TabContent";
+
+//#endregion
+//#region src/components/tabs/TabsBadge.tsx
+const TabsBadge = ({ children }) => {
+	const isCircular = typeof children === "number" && children <= 9 || typeof children === "string" && children.length === 1 || false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "tabs-badge",
+		className: clsx_default("bg-pink h-5 rounded-full text-xs leading-5 font-medium text-white", {
+			"w-5 text-center": isCircular,
+			"px-2": !isCircular
+		}),
+		children
+	});
+};
+TabsBadge.displayName = "TabsBadge";
 
 //#endregion
 //#region src/components/textArea/index.tsx
@@ -115925,7 +116034,7 @@ const Textarea = (0, react.forwardRef)(({ className, label, error: error$1, rows
 
 //#endregion
 //#region src/components/themeIcon/index.tsx
-const ThemeIcon = (0, react.forwardRef)(({ styleVariant = "black", className, icon, adjustedSize, title,...props }, ref) => {
+function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, title,...props }) {
 	const classNames$1 = cn("bg-transparent h-9 w-9 rounded-[5px] grid place-content-center", {
 		"text-black": styleVariant === COLOR.BLACK,
 		"text-gray-500": styleVariant === COLOR.GRAY,
@@ -115942,14 +116051,13 @@ const ThemeIcon = (0, react.forwardRef)(({ styleVariant = "black", className, ic
 		"data-tooltip-content": title,
 		"data-component": "ThemeIcon",
 		className: classNames$1,
-		ref,
 		...props,
 		children: formatIcon(icon, {
 			strokeWidth: "1",
 			size: adjustedSize ? adjustedSize : 20
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(M, { id: title })] });
-});
+}
 
 //#endregion
 //#region src/components/toggle/index.tsx
@@ -136842,7 +136950,7 @@ function requireUseSyncExternalStoreShim_development() {
 				return x$2 === y$2 && (x$2 !== 0 || 1 / x$2 === 1 / y$2) || x$2 !== x$2 && y$2 !== y$2;
 			}
 			var objectIs = typeof Object.is === "function" ? Object.is : is;
-			var useState$13 = React$1$1.useState, useEffect$10 = React$1$1.useEffect, useLayoutEffect$4 = React$1$1.useLayoutEffect, useDebugValue$1 = React$1$1.useDebugValue;
+			var useState$14 = React$1$1.useState, useEffect$11 = React$1$1.useEffect, useLayoutEffect$4 = React$1$1.useLayoutEffect, useDebugValue$1 = React$1$1.useDebugValue;
 			var didWarnOld18Alpha = false;
 			var didWarnUncachedGetSnapshot = false;
 			function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
@@ -136864,7 +136972,7 @@ function requireUseSyncExternalStoreShim_development() {
 						}
 					}
 				}
-				var _useState = useState$13({ inst: {
+				var _useState = useState$14({ inst: {
 					value,
 					getSnapshot
 				} }), inst = _useState[0].inst, forceUpdate = _useState[1];
@@ -136879,7 +136987,7 @@ function requireUseSyncExternalStoreShim_development() {
 					value,
 					getSnapshot
 				]);
-				useEffect$10(function() {
+				useEffect$11(function() {
 					if (checkIfSnapshotChanged(inst)) {
 						forceUpdate({ inst });
 					}
@@ -137200,7 +137308,7 @@ function requireWithSelector_development() {
 			}
 			var objectIs = typeof Object.is === "function" ? Object.is : is;
 			var useSyncExternalStore = shim$1.useSyncExternalStore;
-			var useRef$6 = React$1$1.useRef, useEffect$10 = React$1$1.useEffect, useMemo$3 = React$1$1.useMemo, useDebugValue$1 = React$1$1.useDebugValue;
+			var useRef$6 = React$1$1.useRef, useEffect$11 = React$1$1.useEffect, useMemo$4 = React$1$1.useMemo, useDebugValue$1 = React$1$1.useDebugValue;
 			function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual$1) {
 				var instRef = useRef$6(null);
 				var inst;
@@ -137213,7 +137321,7 @@ function requireWithSelector_development() {
 				} else {
 					inst = instRef.current;
 				}
-				var _useMemo = useMemo$3(function() {
+				var _useMemo = useMemo$4(function() {
 					var hasMemo = false;
 					var memoizedSnapshot;
 					var memoizedSelection;
@@ -137262,7 +137370,7 @@ function requireWithSelector_development() {
 					isEqual$1
 				]), getSelection$1 = _useMemo[0], getServerSelection = _useMemo[1];
 				var value = useSyncExternalStore(subscribe, getSelection$1, getServerSelection);
-				useEffect$10(function() {
+				useEffect$11(function() {
 					inst.hasValue = true;
 					inst.value = value;
 				}, [value]);
@@ -140360,6 +140468,8 @@ exports.TableHeader = TableHeader;
 exports.TableHeaderItem = TableHeaderItem;
 exports.TableHeaderRow = TableHeaderRow;
 exports.TableRow = TableRow;
+exports.TabsBadge = TabsBadge;
+exports.TabsWrapper = TabsWrapper;
 exports.TextInput = TextInput;
 exports.Textarea = Textarea;
 exports.ThemeIcon = ThemeIcon;