@onehat/ui 0.4.56 → 0.4.58

package/src/Components/Tab/TabButton.js

@@ -0,0 +1,82 @@
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions.js';
+import Button from '../Buttons/Button.js';
+import IconButton from '../Buttons/IconButton.js';
+import Xmark from '../Icons/Xmark.js';
+import UiGlobals from '../../UiGlobals.js';
+import _ from 'lodash';
+
+
+export default function TabButton(props) {
+	let {
+			className,
+			direction,
+			isDisabled,
+			isCurrentTab,
+			text,
+			_text,
+			useIconOnly,
+			_icon,
+			useCloseBtn,
+			onClose,
+			...propsToPass
+		} = props,
+		styles = UiGlobals.styles;
+
+	className += ' ' + styles.TAB_BG_HOVER + 
+				' ' + styles.TAB_BG_ACTIVE;
+	_icon.className += ' ' + styles.TAB_ICON_COLOR_HOVER +
+						' ' + styles.TAB_ICON_COLOR_ACTIVE;
+
+	if (isCurrentTab) {
+		className += ' ' + styles.TAB_BG_CURRENT + 
+						' ' + styles.TAB_BG_CURRENT_HOVER;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_CURRENT;
+		_text.className += ' ' + styles.TAB_COLOR_CURRENT;
+	}
+	if (isDisabled) {
+		className += ' ' + styles.TAB_BG_DISABLED;
+		_icon.className += ' ' + styles.TAB_ICON_COLOR_DISABLED;
+		_text.className += ' ' + styles.TAB_COLOR_DISABLED;
+	}
+
+	let tab = null;
+	if (useIconOnly) {
+		tab = <IconButton
+					{...propsToPass}
+					{..._icon}
+					className={className}
+				/>;
+
+	} else {
+		if (direction === VERTICAL) {
+			className += ' w-[200px]';
+		}
+
+		let closeBtn = null;
+		if (useCloseBtn) {
+			closeBtn = <IconButton
+							{...testProps('tabCloseButton-' + ix)}
+							onPress={onClose}
+							icon={Xmark}
+							_icon={_icon}
+							tooltip="Close Tab"
+							className="p-0"
+						/>;
+		}
+		tab = <Button
+					{...propsToPass}
+					className={className}
+					text={text}
+					_text={_text}
+					_icon={_icon}
+					rightIcon={closeBtn}
+					action="none"
+					variant="none"
+				/>;
+	}
+
+	return tab;
+}

package/src/{components → Components}/index.js

@@ -165,6 +165,7 @@ import SquareCheck from './Icons/SquareCheck.js';
 import SquareCheckRegular from './Icons/SquareCheckRegular.js';
 import SquareMinus from './Icons/SquareMinus.js';
 import SquareRegular from './Icons/SquareRegular.js';
+import Stop from './Icons/Stop.js';
 import Store from './Icons/Store.js';
 import Table from './Icons/Table.js';
 import ThumbsDown from './Icons/ThumbsDown.js';
@@ -408,6 +409,7 @@ const components = {
 	SquareCheckRegular,
 	SquareMinus,
 	SquareRegular,
+	Stop,
 	Store,
 	Table,
 	ThumbsDown,

package/src/Constants/Styles.js

@@ -103,12 +103,14 @@ const defaults = {
 	TAB_BG_ACTIVE: 'active:bg-grey-900/50',
 	TAB_BG_CURRENT: 'bg-grey-0',
 	TAB_BG_DISABLED: 'disabled:bg-grey-200',
+	TAB_BG_DISABLED_2: 'bg-grey-200',
 	TAB_BG_HOVER: 'hover:bg-grey-900/30',
 	TAB_BG_ACTIVE_HOVER: 'hover:bg-grey-200',
 	TAB_BG_CURRENT_HOVER: 'hover:bg-grey-900/30',
 	TAB_COLOR: 'text-' + BLACK,
 	TAB_COLOR_ACTIVE: 'active:text-primary-800',
-	TAB_COLOR_CURRENT: 'active:text-primary-800',
+	TAB_COLOR_CURRENT: 'text-primary-800',
+	TAB_COLOR_DISABLED: 'text-grey-400',
 	TAB_ICON_COLOR: 'text-' + BLACK,
 	TAB_ICON_COLOR_ACTIVE: 'text-' + BLACK,
 	TAB_ICON_COLOR_CURRENT: 'text-' + BLACK,