@youngonesworks/ui 0.1.29 → 0.1.31

package/dist/index.d.ts

@@ -48,6 +48,8 @@ export { TableHeader } from './components/table/tableHeader';
 export { TableHeaderItem } from './components/table/tableHeaderItem';
 export { TableHeaderRow } from './components/table/tableHeaderRow';
 export { TableRow } from './components/table/tableRow';
+export { TabsWrapper } from './components/tabs';
+export { TabsBadge } from './components/tabs/TabsBadge';
 export { Textarea } from './components/textArea';
 export { TextInput } from './components/textInput';
 export { ThemeIcon } from './components/themeIcon';

package/dist/index.js

@@ -1,3 +1,6 @@
+'use client';
+
+
 import * as React$1 from "react";
 import React, { Component, Fragment, cloneElement, createContext, createElement, createRef, forwardRef, isValidElement, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, version } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -103320,7 +103323,10 @@ LinkText.displayName = "LinkText";
 const BreadCrumb = ({ children }) => /* @__PURE__ */ jsx(LinkText, {
 	"data-component": "BreadCrumb",
 	classNames: "flex items-center",
-	children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconArrowNarrowLeft, { size: 20 }), children] })
+	children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconArrowNarrowLeft, { size: 20 }), /* @__PURE__ */ jsx("span", {
+		className: "flex items-center gap-5",
+		children
+	})] })
 });
 BreadCrumb.displayName = "BreadCrumb";
 
@@ -109967,12 +109973,21 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 			else clearInterval(scrollInterval);
 		}, 15);
 	};
-	return /* @__PURE__ */ jsx(ActionIcon, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsx(IconChevronUp, {})
-	});
+		"data-tooltip-id": scrollToTopTitle,
+		"data-tooltip-content": scrollToTopTitle,
+		children: /* @__PURE__ */ jsx(IconChevronUp, {})
+	}), /* @__PURE__ */ jsx(M, {
+		id: scrollToTopTitle,
+		className: "z-[99]"
+	})] });
 };
 
 //#endregion
@@ -115894,13 +115909,107 @@ const TableHeaderRow = ({ children,...props }) => /* @__PURE__ */ jsx("div", {
 
 //#endregion
 //#region src/components/table/tableRow/index.tsx
-const TableRow = forwardRef(({ children, className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+function TableRow({ children, className,...props }) {
+	return /* @__PURE__ */ 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 = forwardRef(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ 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__ */ jsx("span", {
+		className: "ml-2 inline-flex",
+		children: rightSection
+	})]
+}));
+
+//#endregion
+//#region src/components/tabs/TabsWrapper.tsx
+const TabsWrapper = ({ setActiveTab, activeTab, tabs }) => {
+	const tabRefs = useMemo(() => {
+		const refs = {};
+		tabs?.forEach((tab) => {
+			refs[tab.value] = createRef();
+		});
+		return refs;
+	}, [tabs]);
+	const [underlineStyle, setUnderlineStyle] = useState({
+		width: 0,
+		left: 0
+	});
+	useEffect(() => {
+		if (activeTab && tabRefs[activeTab]?.current) {
+			const activeTabElement = tabRefs[activeTab].current;
+			setUnderlineStyle({
+				width: activeTabElement?.offsetWidth || 0,
+				left: activeTabElement?.offsetLeft || 0
+			});
+		}
+	}, [activeTab, tabRefs]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative inline-block w-auto border-b-[3px] border-gray-200",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex",
+				children: tabs && tabs?.map((tab) => tab.requiredPermissions ? /* @__PURE__ */ jsx(TabContent, {
+					tab,
+					ref: tabRefs[tab.value],
+					setActiveTab,
+					activeTab
+				}, tab.value) : /* @__PURE__ */ jsx(TabContent, {
+					tab,
+					ref: tabRefs[tab.value],
+					setActiveTab,
+					activeTab
+				}, tab.value))
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute h-[3px] bg-gray-900 transition-all duration-300",
+				style: {
+					width: underlineStyle.width,
+					left: underlineStyle.left,
+					bottom: "-3px"
+				}
+			})]
+		})
+	});
+};
+const TabContent = forwardRef(({ tab, setActiveTab, activeTab }, ref) => /* @__PURE__ */ 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__ */ 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
@@ -115927,7 +116036,7 @@ const Textarea = forwardRef(({ className, label, error: error$1, rows = 8,...pro
 
 //#endregion
 //#region src/components/themeIcon/index.tsx
-const ThemeIcon = 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,
@@ -115944,14 +116053,13 @@ const ThemeIcon = forwardRef(({ styleVariant = "black", className, icon, adjuste
 		"data-tooltip-content": title,
 		"data-component": "ThemeIcon",
 		className: classNames$1,
-		ref,
 		...props,
 		children: formatIcon(icon, {
 			strokeWidth: "1",
 			size: adjustedSize ? adjustedSize : 20
 		})
 	}), /* @__PURE__ */ jsx(M, { id: title })] });
-});
+}
 
 //#endregion
 //#region src/components/toggle/index.tsx
@@ -140311,5 +140419,5 @@ const setCSSVariable = (variable, value) => {
 };
 
 //#endregion
-export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, CSS_VARIABLE_KEYS, Checkbox, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, Label, LinkText, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, Popover, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, ThemeIcon, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants, getCSSVariable, setCSSVariable };
+export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, CSS_VARIABLE_KEYS, Checkbox, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, Label, LinkText, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, Popover, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, ThemeIcon, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants, getCSSVariable, setCSSVariable };
 //# sourceMappingURL=index.js.map