@drivenets/design-system 0.2.0 → 0.3.0

package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss

@@ -0,0 +1,242 @@
+@use '../../../../styles/typography';
+
+$tab-border-width: 1px;
+$badge-height: 20px;
+$menu-content-width: 142px;
+$transition-duration: 0.2s;
+$disabled-opacity: 0.5;
+
+.tabItem {
+	@include typography.body-sm-reg;
+	display: inline-flex;
+	align-items: center;
+	background: var(--color-background);
+	border-radius: var(--exo-spacing-2x-small);
+	cursor: pointer;
+	transition:
+		background-color $transition-duration,
+		color $transition-duration,
+		border-color $transition-duration;
+	position: relative;
+	color: var(--color-font-main);
+	border: $tab-border-width solid transparent;
+	white-space: nowrap;
+
+	&:hover:not(:disabled):not([aria-selected='true']) {
+		background: var(--color-background-secondary);
+
+		.badge {
+			background: var(--color-background-tertiary);
+		}
+	}
+
+	&:active:not(:disabled):not([aria-selected='true']) {
+		background: var(--color-background-tertiary);
+
+		.badge {
+			background: var(--color-background-secondary);
+		}
+	}
+
+	&:focus-visible:not(:disabled):not([aria-selected='true']) {
+		border-color: var(--color-border-action-hover);
+		background: var(--color-background-secondary);
+		outline: none;
+
+		.badge {
+			background: var(--color-background-tertiary);
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: $disabled-opacity;
+		color: var(--color-font-disabled);
+	}
+
+	&[aria-selected='true'] {
+		@include typography.body-sm-md;
+		color: var(--color-background-selected);
+		background: var(--color-background);
+
+		.icon {
+			color: var(--color-background-selected);
+		}
+
+		.badge {
+			background: var(--color-background-action-secondary-hover);
+			color: var(--color-background-selected);
+		}
+
+		&:hover:not(:disabled) {
+			background: var(--color-background-selected-weak);
+		}
+
+		&:active:not(:disabled) {
+			background: var(--color-background-selected-weak);
+		}
+
+		&:focus-visible:not(:disabled) {
+			border-color: var(--color-background-selected);
+			background: var(--color-background-selected-weak);
+			outline: none;
+		}
+	}
+
+	// Horizontal orientation + size variants
+	[data-orientation='horizontal'] & {
+		flex-direction: row;
+		justify-content: center;
+		gap: var(--spacing-3xs);
+		flex: 0 0 auto;
+		width: auto;
+	}
+
+	[data-orientation='horizontal'][data-size='medium'] & {
+		padding: var(--spacing-xs) var(--spacing-sm);
+	}
+
+	[data-orientation='horizontal'][data-size='small'] & {
+		padding: var(--spacing-2xs) var(--spacing-sm);
+	}
+
+	// Vertical orientation + size variants
+	[data-orientation='vertical'] & {
+		flex-direction: row;
+		justify-content: flex-start;
+		gap: var(--spacing-3xs);
+		width: 100%;
+	}
+
+	[data-orientation='vertical'][data-size='medium'] & {
+		padding: var(--spacing-sm) var(--spacing-standard);
+		padding-left: var(--spacing-xs);
+		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+	}
+
+	[data-orientation='vertical'][data-size='small'] & {
+		padding: var(--spacing-xs) var(--spacing-standard);
+		padding-left: var(--spacing-xs);
+		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+	}
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-font-secondary);
+	flex-shrink: 0;
+}
+
+.label {
+	@include typography.body-sm-reg;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	flex: 1 1 auto;
+	min-width: 0;
+	text-align: left;
+
+	[aria-selected='true'] & {
+		@include typography.body-sm-md;
+	}
+}
+
+.menuTrigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	color: var(--color-font-main) !important;
+	cursor: pointer;
+	border-radius: var(--exo-spacing-2x-small);
+	transition:
+		background-color $transition-duration,
+		color $transition-duration;
+
+	&:hover {
+		background: var(--color-background-action-secondary);
+		color: var(--color-font-main);
+	}
+
+	&:active {
+		background: var(--color-background-tertiary);
+	}
+
+	&:focus-visible {
+		outline: var(--spacing-4xs) solid var(--color-border-action-hover);
+		outline-offset: var(--spacing-4xs);
+	}
+
+	[aria-selected='true'] & {
+		color: var(--color-background-selected);
+
+		&:hover {
+			background: var(--color-background);
+		}
+	}
+
+	[disabled] & {
+		opacity: $disabled-opacity;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+}
+
+.badge {
+	@include typography.body-xs-reg;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: $badge-height;
+	padding: 0 var(--spacing-2xs);
+	border-radius: var(--spacing-lg);
+	background: var(--color-background-secondary);
+	color: var(--color-font-main);
+	line-height: var(--line-height-xs);
+	flex-shrink: 0;
+}
+
+.menuContent {
+	background: var(--color-background);
+	border: $tab-border-width solid var(--color-border-secondary);
+	border-radius: var(--exo-spacing-2x-small);
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	padding: var(--spacing-3xs);
+	width: $menu-content-width;
+}
+
+.menuItem {
+	@include typography.body-sm-reg;
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-3xs);
+	border-radius: var(--exo-spacing-2x-small);
+	cursor: pointer;
+	color: var(--color-font-main);
+	background: var(--color-background);
+	transition: background-color $transition-duration;
+	user-select: none;
+	white-space: nowrap;
+
+	&:hover {
+		background: var(--color-background-secondary);
+	}
+
+	&:active {
+		background: var(--color-background-tertiary);
+	}
+
+	&[data-disabled] {
+		opacity: $disabled-opacity;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+}
+
+.menuItemLabel {
+	flex: 1;
+	min-width: 0;
+	line-height: var(--line-height-sm);
+}

package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx

@@ -0,0 +1,130 @@
+import { useRef, useState } from 'react';
+import { Tabs } from '@ark-ui/react/tabs';
+import classNames from 'classnames';
+import DsIcon from '../../../ds-icon/ds-icon';
+import type { IconType } from '../../../ds-icon';
+import { DsTooltip } from '../../../ds-tooltip';
+import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import type { DsTabsTabProps } from '../../ds-tabs.types';
+import styles from './ds-tabs-tab.module.scss';
+
+export const DsTabsTab = ({
+	value,
+	disabled,
+	icon,
+	label,
+	badge,
+	menuActionItems,
+	onMenuActionSelect,
+	tooltip,
+	className,
+	style,
+	children,
+}: DsTabsTabProps) => {
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const menuTriggerRef = useRef<HTMLDivElement>(null);
+	const [menuOpen, setMenuOpen] = useState(false);
+
+	const hasMenuActions = menuActionItems && menuActionItems.length > 0;
+
+	const handleMenuActionSelect = (actionValue: string) => {
+		onMenuActionSelect?.(actionValue);
+		setMenuOpen(false);
+	};
+
+	const tabContent = (
+		<Tabs.Trigger
+			ref={triggerRef}
+			value={value}
+			disabled={disabled}
+			className={classNames(styles.tabItem, className)}
+			style={style}
+		>
+			{children ? (
+				children
+			) : (
+				<>
+					{icon && (
+						<div className={styles.icon}>
+							<DsIcon icon={icon} size="tiny" />
+						</div>
+					)}
+					{label && <span className={styles.label}>{label}</span>}
+					{badge !== undefined && <div className={styles.badge}>{badge}</div>}
+					{hasMenuActions && (
+						<div
+							ref={menuTriggerRef}
+							className={styles.menuTrigger}
+							onClick={(e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								setMenuOpen(!menuOpen);
+							}}
+							onKeyDown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.stopPropagation();
+									e.preventDefault();
+									setMenuOpen(!menuOpen);
+								}
+							}}
+							role="button"
+							tabIndex={0}
+							aria-label="Open menu"
+							aria-expanded={menuOpen}
+						>
+							<DsIcon
+								icon={(menuOpen ? 'arrow_drop_up' : 'arrow_drop_down') satisfies IconType}
+								size="tiny"
+							/>
+						</div>
+					)}
+				</>
+			)}
+		</Tabs.Trigger>
+	);
+
+	const menuDropdown = menuActionItems && menuActionItems.length > 0 && (
+		<DsDropdownMenu.Root
+			open={menuOpen}
+			onOpenChange={setMenuOpen}
+			onSelect={handleMenuActionSelect}
+			positioning={{
+				placement: 'bottom-start',
+				gutter: 4,
+				getAnchorRect: () => menuTriggerRef.current?.getBoundingClientRect() ?? null,
+			}}
+		>
+			<DsDropdownMenu.Trigger asChild>
+				<div style={{ display: 'none' }} aria-hidden="true" />
+			</DsDropdownMenu.Trigger>
+			<DsDropdownMenu.Content className={styles.menuContent}>
+				{menuActionItems.map((item) => (
+					<DsDropdownMenu.Item
+						key={item.value}
+						value={item.value}
+						disabled={item.disabled}
+						className={styles.menuItem}
+					>
+						<span className={styles.menuItemLabel}>{item.label}</span>
+					</DsDropdownMenu.Item>
+				))}
+			</DsDropdownMenu.Content>
+		</DsDropdownMenu.Root>
+	);
+
+	if (tooltip) {
+		return (
+			<>
+				<DsTooltip content={tooltip}>{tabContent}</DsTooltip>
+				{menuDropdown}
+			</>
+		);
+	}
+
+	return (
+		<>
+			{tabContent}
+			{menuDropdown}
+		</>
+	);
+};

package/src/components/ds-tabs/components/ds-tabs-tab/index.ts

@@ -0,0 +1 @@
+export { DsTabsTab } from './ds-tabs-tab';

package/src/components/ds-tabs/ds-tabs.module.scss

@@ -0,0 +1,14 @@
+.root {
+	display: flex;
+	width: 100%;
+
+	&[data-orientation='vertical'] {
+		flex-direction: row;
+		gap: var(--spacing-lg);
+	}
+
+	&[data-orientation='horizontal'] {
+		flex-direction: column;
+		gap: 0;
+	}
+}

package/src/components/ds-tabs/ds-tabs.tsx

@@ -0,0 +1,46 @@
+import { Tabs } from '@ark-ui/react/tabs';
+import classNames from 'classnames';
+import { DsTabsList } from './components/ds-tabs-list';
+import { DsTabsTab } from './components/ds-tabs-tab';
+import { DsTabsContent } from './components/ds-tabs-content';
+import type { DsTabsProps } from './ds-tabs.types';
+import styles from './ds-tabs.module.scss';
+
+const DsTabsRoot = ({
+	value,
+	defaultValue,
+	onValueChange,
+	orientation = 'horizontal',
+	size = 'medium',
+	className,
+	style,
+	children,
+}: DsTabsProps) => {
+	const handleValueChange = (details: { value: string | null }) => {
+		onValueChange?.(details.value);
+	};
+
+	return (
+		<Tabs.Root
+			orientation={orientation}
+			value={value}
+			defaultValue={defaultValue}
+			onValueChange={handleValueChange}
+			activationMode="manual"
+			lazyMount
+			unmountOnExit
+			className={classNames(styles.root, className)}
+			style={style}
+			data-size={size}
+		>
+			{children}
+		</Tabs.Root>
+	);
+};
+
+export const DsTabs = {
+	Root: DsTabsRoot,
+	List: DsTabsList,
+	Tab: DsTabsTab,
+	Content: DsTabsContent,
+};

package/src/components/ds-tabs/ds-tabs.types.ts

@@ -0,0 +1,97 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { IconType } from '../ds-icon';
+
+export type DsTabsSize = 'medium' | 'small';
+export type DsTabsOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Menu action item configuration
+ */
+export interface DsTabsMenuActionItem {
+	/** Unique value for the action */
+	value: string;
+	/** Display label */
+	label: string;
+	/** Whether the action is disabled */
+	disabled?: boolean;
+}
+
+export interface DsTabsProps {
+	/** Current active tab value */
+	value?: string;
+	/** Default tab value for uncontrolled mode */
+	defaultValue?: string;
+	/** Callback when tab changes */
+	onValueChange?: (value: string | null) => void;
+	/** Tab orientation */
+	orientation?: DsTabsOrientation;
+	/** Tab size variant */
+	size?: DsTabsSize;
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+	/** Children components */
+	children: ReactNode;
+}
+
+export interface DsTabsListProps {
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+	/** Children components (DsTabsTab) */
+	children: ReactNode;
+}
+
+type DsTabsTabBaseProps = {
+	/** Unique value for this tab */
+	value: string;
+	/** Menu action items to display in dropdown */
+	menuActionItems?: DsTabsMenuActionItem[];
+	/** Callback when a menu action is selected */
+	onMenuActionSelect?: (value: string) => void;
+	/** Tooltip text to show on hover */
+	tooltip?: string;
+	/** Disabled state */
+	disabled?: boolean;
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+};
+
+export type DsTabsTabProps = DsTabsTabBaseProps &
+	(
+		| {
+				/** Custom children (overrides default rendering) */
+				children: ReactNode;
+				/** Tab label text */
+				label?: never;
+				/** Leading icon name (Material Icons) or SVG component */
+				icon?: never;
+				/** Badge count or text */
+				badge?: never;
+		  }
+		| {
+				/** Custom children (overrides default rendering) */
+				children?: never;
+				/** Tab label text */
+				label?: string;
+				/** Leading icon name (Material Icons) or SVG component */
+				icon?: IconType;
+				/** Badge count or text */
+				badge?: string | number;
+		  }
+	);
+
+export interface DsTabsContentProps {
+	/** Value matching the tab this content belongs to */
+	value: string;
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+	/** Content to display */
+	children: ReactNode;
+}

package/src/components/ds-tabs/index.ts

@@ -0,0 +1,2 @@
+export { DsTabs } from './ds-tabs';
+export type * from './ds-tabs.types';

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/ds-file-upload';
 export * from './components/ds-form-control';
 export * from './components/ds-grid';
 export * from './components/ds-icon';
+export * from './components/ds-loader';
 export * from './components/ds-modal';
 export * from './components/ds-number-input';
 export * from './components/ds-panel';
@@ -25,12 +26,14 @@ export * from './components/ds-popover';
 export * from './components/ds-radio-group';
 export * from './components/ds-segment-group';
 export * from './components/ds-select';
+export * from './components/ds-skeleton';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
 export * from './components/ds-status-badge';
 export * from './components/ds-stepper';
 export * from './components/ds-system-status';
 export * from './components/ds-table';
+export * from './components/ds-tabs';
 export * from './components/ds-tag';
 export * from './components/ds-tag-filter';
 export * from './components/ds-text-input';