feat(design-system): add tabs component [AR-38982]

.changeset/every-cows-do.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+Add `DsTabs` component

packages/design-system/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.module.scss

@@ -0,0 +1,8 @@
+.content {
+	flex: 1;
+	width: 100%;
+
+	&[hidden] {
+		display: none;
+	}
+}

packages/design-system/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.tsx

@@ -0,0 +1,12 @@
+import { Tabs } from '@ark-ui/react/tabs';
+import classNames from 'classnames';
+import type { DsTabsContentProps } from './ds-tabs-content.types';
+import styles from './ds-tabs-content.module.scss';
+
+export const DsTabsContent = ({ value, className, style, children }: DsTabsContentProps) => {
+	return (
+		<Tabs.Content value={value} className={classNames(styles.content, className)} style={style}>
+			{children}
+		</Tabs.Content>
+	);
+};

packages/design-system/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.types.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Props for the DsTabsContent component
+ * Container for the content associated with each tab
+ * @interface DsTabsContentProps
+ */
+export interface DsTabsContentProps {
+	/**
+	 * Tab value this content is associated with
+	 * Content is shown when this value matches the selected tab
+	 * @type {string}
+	 */
+	value: string;
+
+	/**
+	 * Additional CSS class name
+	 * @type {string}
+	 */
+	className?: string;
+
+	/**
+	 * Inline styles
+	 * @type {CSSProperties}
+	 */
+	style?: CSSProperties;
+
+	/**
+	 * Content to display when this tab is active
+	 * @type {ReactNode}
+	 */
+	children: ReactNode;
+}

packages/design-system/src/components/ds-tabs/components/ds-tabs-content/index.ts

@@ -0,0 +1,2 @@
+export { DsTabsContent } from './ds-tabs-content';
+export type { DsTabsContentProps } from './ds-tabs-content.types';

packages/design-system/src/components/ds-tabs/components/ds-tabs-dropdown/ds-tabs-dropdown.module.scss

@@ -0,0 +1,2 @@
+// Styles for tab dropdown have been moved to ds-tabs.module.scss
+// to prevent global scope pollution and use CSS modules properly

packages/design-system/src/components/ds-tabs/components/ds-tabs-dropdown/ds-tabs-dropdown.tsx

@@ -0,0 +1,108 @@
+import type React from 'react';
+import { useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { DsIcon } from '../../../ds-icon';
+import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import type { DsTabsDropdownProps } from './ds-tabs-dropdown.types';
+import styles from '../../ds-tabs.module.scss';
+import { DROPDOWN_CLOSE_DELAY } from '../ds-tabs-tab/ds-tabs-tab';
+
+export const DsTabsDropdown: React.FC<DsTabsDropdownProps> = ({
+	trigger,
+	items,
+	onItemSelect,
+	isOverflowDropdown = false,
+}) => {
+	const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+	const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+	const wrapperRef = useRef<HTMLDivElement>(null);
+
+	const handleMouseEnter = () => {
+		// Cancel any pending close operation if user moves mouse back
+		if (closeTimeoutRef.current) {
+			clearTimeout(closeTimeoutRef.current);
+			closeTimeoutRef.current = null;
+		}
+		setDropdownOpen(true);
+	};
+
+	const handleMouseLeave = () => {
+		// Delay closing dropdown by DROPDOWN_CLOSE_DELAY (250ms)
+		// Allows user to move mouse from trigger to dropdown content without it closing
+		closeTimeoutRef.current = setTimeout(() => {
+			setDropdownOpen(false);
+			closeTimeoutRef.current = null;
+		}, DROPDOWN_CLOSE_DELAY);
+	};
+
+	// Cleanup: clear timeout on unmount to prevent memory leaks
+	useEffect(() => {
+		return () => {
+			if (closeTimeoutRef.current) {
+				clearTimeout(closeTimeoutRef.current);
+			}
+		};
+	}, []);
+
+	return (
+		<div ref={wrapperRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+			<DsDropdownMenu.Root
+				open={dropdownOpen}
+				onOpenChange={setDropdownOpen}
+				positioning={{ placement: 'bottom-start', gutter: 4 }}
+			>
+				<DsDropdownMenu.Trigger asChild>{trigger}</DsDropdownMenu.Trigger>
+				<DsDropdownMenu.Content>
+					{items.map((item) => (
+						<DsDropdownMenu.Item
+							key={item.value}
+							value={item.value}
+							disabled={item.disabled}
+							className={classNames({
+								[styles.dropdownMenuItem]: isOverflowDropdown,
+							})}
+							onSelect={() => {
+								onItemSelect(item.value);
+								setDropdownOpen(false);
+								// Remove focus from trigger button after item selection
+								// requestAnimationFrame ensures blur happens after dropdown closes
+								// Prevents the trigger from showing focus outline after selection
+								requestAnimationFrame(() => {
+									const button = wrapperRef.current?.querySelector('button');
+									button?.blur();
+								});
+							}}
+						>
+							{item.icon && (
+								<DsIcon
+									icon={item.icon}
+									size="small"
+									className={classNames({
+										[styles.dropdownMenuIcon]: isOverflowDropdown,
+									})}
+								/>
+							)}
+							<span
+								className={classNames({
+									[styles.dropdownMenuLabel]: isOverflowDropdown,
+								})}
+							>
+								{item.label || item.value}
+							</span>
+							{item.badge !== undefined && (
+								<span
+									className={classNames({
+										[styles.dropdownMenuBadge]: isOverflowDropdown,
+									})}
+									style={!isOverflowDropdown ? { marginLeft: 'auto', opacity: 0.6 } : undefined}
+								>
+									{isOverflowDropdown ? item.badge : `(${String(item.badge)})`}
+								</span>
+							)}
+						</DsDropdownMenu.Item>
+					))}
+				</DsDropdownMenu.Content>
+			</DsDropdownMenu.Root>
+		</div>
+	);
+};

packages/design-system/src/components/ds-tabs/components/ds-tabs-dropdown/ds-tabs-dropdown.types.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import type { IconType } from '../../../ds-icon';
+
+/**
+ * Item in a tab dropdown menu
+ * @interface DsTabsDropdownItem
+ */
+export interface DsTabsDropdownItem {
+	/**
+	 * Unique value for the dropdown item
+	 * @type {string}
+	 */
+	value: string;
+
+	/**
+	 * Display label for the item
+	 * @type {string}
+	 */
+	label?: string;
+
+	/**
+	 * Icon to display before the label
+	 * @type {IconType}
+	 */
+	icon?: IconType;
+
+	/**
+	 * Badge content (number or text) to display
+	 * @type {number | string}
+	 */
+	badge?: number | string;
+
+	/**
+	 * Whether the item is disabled
+	 * @type {boolean}
+	 */
+	disabled?: boolean;
+}
+
+/**
+ * Props for the DsTabsDropdown component
+ * @interface DsTabsDropdownProps
+ */
+export interface DsTabsDropdownProps {
+	/**
+	 * Element that triggers the dropdown (e.g., a button or tab)
+	 * @type {ReactNode}
+	 */
+	trigger: ReactNode;
+
+	/**
+	 * Array of dropdown menu items
+	 * @type {DsTabsDropdownItem[]}
+	 */
+	items: DsTabsDropdownItem[];
+
+	/**
+	 * Callback fired when a dropdown item is selected
+	 * @param {string} value - The value of the selected item
+	 */
+	onItemSelect: (value: string) => void;
+
+	/**
+	 * Whether this dropdown is used for overflow tabs (applies specific styling)
+	 * @type {boolean}
+	 * @default false
+	 */
+	isOverflowDropdown?: boolean;
+}

packages/design-system/src/components/ds-tabs/components/ds-tabs-dropdown/index.ts

@@ -0,0 +1,2 @@
+export { DsTabsDropdown } from './ds-tabs-dropdown';
+export type { DsTabsDropdownProps, DsTabsDropdownItem } from './ds-tabs-dropdown.types';

packages/design-system/src/components/ds-tabs/components/ds-tabs-indicator/ds-tabs-indicator.module.scss

@@ -0,0 +1,21 @@
+.indicator {
+	position: absolute;
+	background: var(--color-background-selected);
+	transition:
+		left 0.3s ease,
+		top 0.3s ease,
+		width 0.3s ease,
+		height 0.3s ease;
+	border-radius: 4px;
+	pointer-events: none;
+}
+
+.indicator-horizontal {
+	height: 2px;
+	bottom: 0;
+}
+
+.indicator-vertical {
+	width: 2px;
+	right: 0;
+}

packages/design-system/src/components/ds-tabs/components/ds-tabs-indicator/ds-tabs-indicator.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect, useRef, type CSSProperties } from 'react';
+import classNames from 'classnames';
+import { useTabsContext } from '../../context/ds-tabs-context';
+import type { DsTabsIndicatorProps } from './ds-tabs-indicator.types';
+import styles from './ds-tabs-indicator.module.scss';
+
+export const DsTabsIndicator = ({ className, style }: DsTabsIndicatorProps) => {
+	const { orientation, currentValue, size } = useTabsContext();
+	const [indicatorStyle, setIndicatorStyle] = useState<CSSProperties>({});
+	const indicatorRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		// Calculates and updates indicator position/size to match the currently selected tab
+		const updateIndicator = () => {
+			const tabsList = indicatorRef.current?.parentElement;
+			if (!tabsList) {
+				return;
+			}
+
+			// Find the tab button with aria-selected="true" (the currently active tab)
+			const selectedTrigger = tabsList.querySelector('button[aria-selected="true"]');
+
+			if (selectedTrigger) {
+				// Get bounding rectangles to calculate relative positions
+				const tabsListRect = tabsList.getBoundingClientRect();
+				const triggerRect = selectedTrigger.getBoundingClientRect();
+
+				if (orientation === 'horizontal') {
+					// For horizontal tabs: position indicator below the selected tab with matching width
+					const left = triggerRect.left - tabsListRect.left;
+					const width = triggerRect.width;
+					setIndicatorStyle({
+						left: `${left.toString()}px`,
+						width: `${width.toString()}px`,
+						transform: 'none',
+					});
+				} else {
+					// For vertical tabs: position indicator to the right of selected tab with matching height
+					const top = triggerRect.top - tabsListRect.top;
+					const height = triggerRect.height;
+					setIndicatorStyle({
+						top: `${top.toString()}px`,
+						height: `${height.toString()}px`,
+						transform: 'none',
+					});
+				}
+			}
+		};
+
+		// Run initial position calculation
+		updateIndicator();
+
+		const tabsList = indicatorRef.current?.parentElement;
+		if (!tabsList) {
+			return;
+		}
+
+		// MutationObserver: watches for aria-selected changes (tab selection) and DOM mutations (tabs added/removed)
+		const observer = new MutationObserver(updateIndicator);
+		observer.observe(tabsList, {
+			attributes: true,
+			attributeFilter: ['aria-selected'],
+			childList: true,
+			characterData: true,
+			subtree: true,
+		});
+
+		// ResizeObserver: watches for size changes (window resize, tab content changes, layout shifts)
+		const resizeObserver = new ResizeObserver(updateIndicator);
+		resizeObserver.observe(tabsList);
+
+		// requestAnimationFrame: schedules update after browser layout is complete to prevent flickering
+		const frameId = requestAnimationFrame(updateIndicator);
+
+		// Cleanup: disconnect observers and cancel animation frame on unmount to prevent memory leaks
+		return () => {
+			observer.disconnect();
+			resizeObserver.disconnect();
+			cancelAnimationFrame(frameId);
+		};
+	}, [orientation, currentValue, size]);
+
+	return (
+		<div
+			ref={indicatorRef}
+			className={classNames(styles.indicator, styles[`indicator-${orientation}`], className)}
+			style={{ ...indicatorStyle, ...style }}
+		/>
+	);
+};

packages/design-system/src/components/ds-tabs/components/ds-tabs-indicator/ds-tabs-indicator.types.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * Props for the DsTabsIndicator component
+ * Visual indicator that highlights the currently selected tab
+ * @interface DsTabsIndicatorProps
+ */
+export interface DsTabsIndicatorProps {
+	/**
+	 * Additional CSS class name
+	 * @type {string}
+	 */
+	className?: string;
+
+	/**
+	 * Inline styles (note: position and size are calculated automatically)
+	 * @type {CSSProperties}
+	 */
+	style?: CSSProperties;
+}

packages/design-system/src/components/ds-tabs/components/ds-tabs-indicator/index.ts

@@ -0,0 +1,2 @@
+export { DsTabsIndicator } from './ds-tabs-indicator';
+export type { DsTabsIndicatorProps } from './ds-tabs-indicator.types';