@drivenets/design-system 0.9.1 → 0.11.0

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

@@ -7,51 +7,51 @@ $transition-duration: 0.2s;
 @mixin node-row {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	border-radius: 4px;
 	cursor: pointer;
 	user-select: none;
 	width: 100%;
 	background: transparent;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 
 	--ds-tree-depth: calc(var(--depth) - 1);
 	--ds-tree-indent-offset: calc(#{$indent-per-level} * var(--ds-tree-depth));
 	--ds-tree-icon-offset: calc(#{$half-icon} * var(--ds-tree-depth));
-	--ds-tree-offset: calc(var(--spacing-3xs) + var(--ds-tree-indent-offset) + var(--ds-tree-icon-offset));
+	--ds-tree-offset: calc(var(--3xs) + var(--ds-tree-indent-offset) + var(--ds-tree-icon-offset));
 
 	padding-inline-start: var(--ds-tree-offset);
-	padding-inline-end: var(--spacing-3xs);
+	padding-inline-end: var(--3xs);
 
 	&:hover {
-		background: var(--color-background-action-hover-weak);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-focus] {
 		position: relative;
 		outline: none;
-		background: var(--color-background-action-hover-weak);
+		background: var(--background-action-hover-weak);
 
 		&::after {
 			content: '';
 			position: absolute;
 			inset: 0;
 			z-index: 2;
-			border: 2px solid var(--color-border-action-primary-hover);
+			border: 2px solid var(--border-action-primary-hover);
 			border-radius: inherit;
 			pointer-events: none;
 		}
 	}
 
 	&[data-selected] {
-		background: var(--color-background-action-secondary-hover);
+		background: var(--background-action-secondary-hover);
 	}
 
 	&[data-disabled] {
 		cursor: not-allowed;
 		pointer-events: none;
 		.itemText {
-			color: var(--color-secondary-300);
+			color: var(--secondary-300);
 		}
 	}
 
@@ -65,7 +65,7 @@ $transition-duration: 0.2s;
 	flex: 1;
 	display: inline-flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	min-width: 0;
 
 	@include typography.ellipsis;
@@ -79,7 +79,7 @@ $transition-duration: 0.2s;
 	&[data-size='medium'] {
 		.branchControl,
 		.item {
-			padding-block: var(--spacing-xs);
+			padding-block: var(--xs);
 		}
 
 		.branchText,
@@ -91,7 +91,7 @@ $transition-duration: 0.2s;
 	&[data-size='small'] {
 		.branchControl,
 		.item {
-			padding-block: var(--spacing-2xs);
+			padding-block: var(--2xs);
 		}
 
 		.branchText,
@@ -121,7 +121,7 @@ $transition-duration: 0.2s;
 	flex-shrink: 0;
 	width: var(--icon-width-tiny);
 	height: var(--icon-width-tiny);
-	color: var(--color-font-main);
+	color: var(--font-main);
 	transform-origin: center;
 	transition: transform $transition-duration;
 
@@ -132,7 +132,7 @@ $transition-duration: 0.2s;
 
 .branchText {
 	@include node-text;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .branchContent {
@@ -153,11 +153,11 @@ $transition-duration: 0.2s;
 	z-index: 1;
 	width: 1px;
 	height: 100%;
-	background: var(--color-border-secondary);
+	background: var(--border-secondary);
 
 	--ds-tree-depth: calc(var(--depth) - 1);
 	--ds-tree-indent-offset: calc(#{$indent-per-level} * var(--ds-tree-depth));
-	--ds-tree-guide-offset: calc(var(--spacing-3xs) + var(--ds-tree-indent-offset));
+	--ds-tree-guide-offset: calc(var(--3xs) + var(--ds-tree-indent-offset));
 	--ds-tree-icon-offset: calc(#{$half-icon} * var(--depth));
 
 	inset-inline-start: calc(var(--ds-tree-guide-offset) + var(--ds-tree-icon-offset));
@@ -169,7 +169,7 @@ $transition-duration: 0.2s;
 
 .itemText {
 	@include node-text;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .itemIndicator {
@@ -185,7 +185,7 @@ $transition-duration: 0.2s;
 	width: 4px;
 	height: 4px;
 	border-radius: 50%;
-	background-color: var(--color-font-main);
+	background-color: var(--font-main);
 }
 
 .itemAction {
@@ -198,11 +198,11 @@ $transition-duration: 0.2s;
 	padding: 0;
 	opacity: 0;
 	cursor: pointer;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	transition: opacity $transition-duration;
 
 	&:hover {
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 }
 
@@ -216,8 +216,8 @@ $transition-duration: 0.2s;
 	&[data-state='checked'],
 	&[data-state='indeterminate'] {
 		.nodeCheckboxBox {
-			background-color: var(--color-background-selected);
-			border-color: var(--color-background-selected);
+			background-color: var(--background-primary);
+			border-color: var(--background-primary);
 		}
 	}
 
@@ -225,13 +225,13 @@ $transition-duration: 0.2s;
 		cursor: not-allowed;
 
 		.nodeCheckboxBox {
-			border-color: var(--color-background-disable);
+			border-color: var(--background-disable);
 		}
 
 		&[data-state='checked'] .nodeCheckboxBox,
 		&[data-state='indeterminate'] .nodeCheckboxBox {
-			background-color: var(--color-background-disable);
-			border-color: var(--color-background-disable);
+			background-color: var(--background-disable);
+			border-color: var(--background-disable);
 		}
 	}
 }
@@ -243,9 +243,9 @@ $transition-duration: 0.2s;
 	align-items: center;
 	width: 16px;
 	height: 16px;
-	border: 1.5px solid var(--color-background-deselected);
+	border: 1.5px solid var(--background-deselected);
 	border-radius: 2px;
-	color: var(--color-secondary-white);
+	color: var(--secondary-050);
 	transition:
 		background-color $transition-duration,
 		border-color $transition-duration;

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

@@ -4,11 +4,31 @@ import type { IconType } from '../ds-icon';
 import type { FilterStatus } from '../ds-filter-status-icon';
 
 export interface DsTreeNode {
+	/**
+	 * Stable identifier for the node. Used as the key in selection, expansion, and
+	 * checked-state arrays.
+	 */
 	id: string;
+	/**
+	 * Display name rendered for the node
+	 */
 	name: string;
+	/**
+	 * Whether the node is disabled and cannot be selected, expanded, or checked.
+	 * @default false
+	 */
 	disabled?: boolean;
+	/**
+	 * Optional icon rendered before the node name
+	 */
 	icon?: IconType;
+	/**
+	 * Optional status indicator shown next to the node (e.g., active/inactive filter).
+	 */
 	status?: FilterStatus;
+	/**
+	 * Child nodes rendered under this node when it is expanded. Leaf nodes omit this.
+	 */
 	children?: DsTreeNode[];
 }
 
@@ -25,32 +45,88 @@ export interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
 }
 
 export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTreeBasePropsWithChildren {
+	/**
+	 * Ark UI tree collection describing the node hierarchy. Build it with
+	 * `createTreeCollection` and pass the resulting collection in.
+	 */
 	collection: ArkTreeView.RootProps<T>['collection'];
+	/**
+	 * Controls visual density of tree rows.
+	 * @default medium
+	 */
 	size?: DsTreeSize;
+	/**
+	 * Ref forwarded to the tree root element
+	 */
 	ref?: Ref<HTMLDivElement>;
 
+	/**
+	 * Ids of currently selected nodes (controlled). Use with `onSelectionChange`.
+	 */
 	selectedValue?: string[];
+	/**
+	 * Ids of nodes selected initially when uncontrolled.
+	 */
 	defaultSelectedValue?: string[];
+	/**
+	 * Called when node selection changes. Receives the Ark selection details
+	 * including the new `selectedValue` array.
+	 */
 	onSelectionChange?: ArkTreeView.RootProps<T>['onSelectionChange'];
+	/**
+	 * Whether only one node can be selected at a time (`single`) or multiple
+	 * selections are allowed (`multiple`).
+	 * @default single
+	 */
 	selectionMode?: 'single' | 'multiple';
 
+	/**
+	 * Ids of currently expanded branch nodes (controlled). Use with `onExpandedChange`.
+	 */
 	expandedValue?: string[];
+	/**
+	 * Ids of branch nodes expanded initially when uncontrolled.
+	 */
 	defaultExpandedValue?: string[];
+	/**
+	 * Called when the set of expanded nodes changes. Receives the Ark expansion
+	 * details including the new `expandedValue` array.
+	 */
 	onExpandedChange?: ArkTreeView.RootProps<T>['onExpandedChange'];
+	/**
+	 * Whether clicking anywhere on a branch row toggles its expansion in addition
+	 * to clicking the branch indicator.
+	 * @default false
+	 */
 	expandOnClick?: boolean;
 
+	/**
+	 * Ids of nodes currently in the "checked" state (for checkbox trees). Use with
+	 * `onCheckedChange`.
+	 */
 	checkedValue?: string[];
+	/**
+	 * Ids of nodes initially checked when uncontrolled.
+	 */
 	defaultCheckedValue?: string[];
+	/**
+	 * Called when the set of checked nodes changes. Receives the Ark checked-change
+	 * details including the new `checkedValue` array.
+	 */
 	onCheckedChange?: ArkTreeView.RootProps<T>['onCheckedChange'];
 
 	/**
-	 * Whether to enable typeahead navigation — typing characters focuses matching nodes
+	 * Whether to enable typeahead navigation — typing characters focuses matching nodes.
 	 */
 	typeahead?: boolean;
 	/**
-	 * Whether to defer mounting of branch content until a branch is first expanded
+	 * Whether to defer mounting of branch content until a branch is first expanded.
 	 */
 	lazyMount?: boolean;
+	/**
+	 * Whether to unmount branch content when the branch is collapsed (vs. hiding it).
+	 * Pair with `lazyMount` to control mounting strategy.
+	 */
 	unmountOnExit?: boolean;
 }
 
@@ -69,6 +145,9 @@ export type DsTreeBranchContentProps = DsTreeBasePropsWithChildren;
 export type DsTreeBranchIndentGuideProps = DsTreeBaseProps;
 
 export interface DsTreeItemProps extends DsTreeBasePropsWithChildren {
+	/**
+	 * Called when the leaf item is clicked. Receives the native mouse event.
+	 */
 	onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -79,5 +158,8 @@ export type DsTreeItemIndicatorProps = DsTreeBaseProps;
 export type DsTreeNodeCheckboxProps = DsTreeBaseProps;
 
 export interface DsTreeItemActionProps extends DsTreeBasePropsWithChildren {
+	/**
+	 * Called when the row action button is clicked. Receives the native mouse event.
+	 */
 	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }

package/src/components/ds-typography/ds-typography.config.ts

@@ -1,32 +1,51 @@
-export const semanticElementMap = {
-	// Body variants
-	'body-md-reg': 'p',
-	'body-md-md': 'p',
-	'body-md-semi-bold': 'p',
-	'body-md-bold': 'p',
-	'body-md-link': 'a',
+import { ark } from '@ark-ui/react';
 
-	'body-sm-reg': 'span',
-	'body-sm-md': 'span',
-	'body-sm-semi-bold': 'span',
-	'body-sm-bold': 'span',
-	'body-sm-link': 'a',
+export const typographyVariantConfig = {
+	'body-md-reg': { element: 'p', component: ark.p },
+	'body-md-md': { element: 'p', component: ark.p },
+	'body-md-semi-bold': { element: 'p', component: ark.p },
+	'body-md-bold': { element: 'p', component: ark.p },
+	'body-md-link': { element: 'a', component: ark.a },
 
-	'body-xs-reg': 'span',
-	'body-xs-md': 'span',
-	'body-xs-semi-bold': 'span',
-	'body-xs-bold': 'span',
-	'body-xs-link': 'a',
+	'body-sm-reg': { element: 'span', component: ark.span },
+	'body-sm-md': { element: 'span', component: ark.span },
+	'body-sm-semi-bold': { element: 'span', component: ark.span },
+	'body-sm-bold': { element: 'span', component: ark.span },
+	'body-sm-link': { element: 'a', component: ark.a },
 
-	// Code variants
-	'code-sm-reg': 'code',
-	'code-sm-semi-bold': 'code',
-	'code-xs-reg': 'code',
-	'code-xs-semi-bold': 'code',
+	'body-xs-reg': { element: 'span', component: ark.span },
+	'body-xs-md': { element: 'span', component: ark.span },
+	'body-xs-semi-bold': { element: 'span', component: ark.span },
+	'body-xs-bold': { element: 'span', component: ark.span },
+	'body-xs-link': { element: 'a', component: ark.a },
 
-	// Heading variants
-	heading1: 'h1',
-	heading2: 'h2',
-	heading3: 'h3',
-	heading4: 'h4',
+	'code-sm-reg': { element: 'code', component: ark.code },
+	'code-sm-semi-bold': { element: 'code', component: ark.code },
+	'code-xs-reg': { element: 'code', component: ark.code },
+	'code-xs-semi-bold': { element: 'code', component: ark.code },
+
+	heading1: { element: 'h1', component: ark.h1 },
+	heading2: { element: 'h2', component: ark.h2 },
+	heading3: { element: 'h3', component: ark.h3 },
+	heading4: { element: 'h4', component: ark.h4 },
 } as const;
+
+/** Semantic text colors backed by `--font-*` tokens in `_root_new.scss`. */
+export const typographyColors = [
+	'main',
+	'secondary',
+	'action',
+	'action-hover',
+	'action-secondary',
+	'action-secondary-hover',
+	'disabled',
+	'light-disabled',
+	'on-action',
+	'on-disabled',
+	'placeholder',
+	'highlight',
+	'success',
+	'warning',
+	'error',
+	'code',
+] as const;

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

@@ -1,24 +1,39 @@
-import type React from 'react';
-import { Slot } from '@radix-ui/react-slot';
 import classNames from 'classnames';
 import type { DsTypographyProps } from './ds-typography.types';
-import { semanticElementMap } from './ds-typography.config';
+import { typographyColors, typographyVariantConfig } from './ds-typography.config';
 import styles from './ds-typography.module.scss';
 
+const semanticColorSet = new Set<string>(typographyColors);
+
+const resolveColor = (color: string): string =>
+	semanticColorSet.has(color) ? `var(--font-${color})` : color;
+
 /*
  * Design system Typography component that provides consistent text styling
  */
-const DsTypography: React.FC<DsTypographyProps & { ref?: React.Ref<HTMLElement> }> = ({
+const DsTypography = ({
 	ref,
 	variant,
 	asChild = false,
 	className,
+	style,
+	color,
 	children,
 	...props
-}) => {
-	const Component: React.ElementType = asChild ? Slot : semanticElementMap[variant];
+}: DsTypographyProps) => {
+	const Component = typographyVariantConfig[variant].component;
+
 	return (
-		<Component ref={ref} className={classNames(styles[variant], className)} {...props}>
+		<Component
+			// very dynamic ref in here
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-expect-error
+			ref={ref}
+			asChild={asChild}
+			className={classNames(styles[variant], className)}
+			style={color ? { color: resolveColor(color), ...style } : style}
+			{...props}
+		>
 			{children}
 		</Component>
 	);

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

@@ -1,13 +1,24 @@
-import type React from 'react';
-import type { semanticElementMap } from './ds-typography.config';
+import type { Ref } from 'react';
+import type { typographyColors, typographyVariantConfig } from './ds-typography.config';
 
-export type SemanticVariant = keyof typeof semanticElementMap;
+export type SemanticVariant = keyof typeof typographyVariantConfig;
+export type TypographyColor = (typeof typographyColors)[number];
 
 export interface DsTypographyProps {
+	/**
+	 * Ref to the rendered element.
+	 */
+	ref?: Ref<HTMLElement>;
 	/**
 	 * The semantic variant of the component
 	 */
 	variant: SemanticVariant;
+	/**
+	 * Text color. Semantic names map to `--font-*` tokens; raw CSS color values
+	 * (hex, rgb, hsl, CSS variables, named colors) pass through unchanged.
+	 * Omit to inherit.
+	 */
+	color?: TypographyColor | (string & {});
 	/**
 	 * Additional CSS class names
 	 */
@@ -17,7 +28,7 @@ export interface DsTypographyProps {
 	 */
 	style?: React.CSSProperties;
 	/**
-	 * When true, renders as Slot component for composition without extra DOM nodes
+	 * When true, composes typography styles onto the child element without extra DOM nodes
 	 */
 	asChild?: boolean;
 	/**

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

@@ -19,41 +19,41 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0 var(--spacing-lg);
-	min-height: var(--spacing-3xl);
-	height: var(--spacing-3xl);
+	padding: 0 var(--lg);
+	min-height: var(--3xl);
+	height: var(--3xl);
 	flex-shrink: 0;
 	border: none;
-	border-bottom: 1px solid var(--color-border);
-	background: var(--color-background-secondary);
+	border-bottom: 1px solid var(--border);
+	background: var(--background-secondary);
 	cursor: pointer;
 	text-align: left;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	transition:
 		background-color 0.2s,
 		color 0.2s;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 
 	&:hover:not(:disabled):not(.selected):not([data-disabled]) {
-		background: var(--color-background-action-tertiary);
-		color: var(--color-font-main);
+		background: var(--background-action-tertiary-hover);
+		color: var(--font-main);
 	}
 
 	&.selected,
 	&[data-state='active'] {
-		background: var(--color-background-action-secondary-hover);
-		color: var(--color-font-main);
+		background: var(--background-action-secondary-hover);
+		color: var(--font-main);
 	}
 
 	&:disabled,
 	&[data-disabled] {
 		cursor: not-allowed;
-		color: var(--color-font-secondary);
+		color: var(--font-secondary);
 		opacity: 0.5;
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--color-background-selected);
+		outline: 2px solid var(--background-primary);
 		outline-offset: -2px;
 		z-index: 1;
 	}

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

@@ -0,0 +1,55 @@
+.root {
+	--ds-workspace-header-height: 54px;
+	--ds-workspace-header-gradient: radial-gradient(
+		ellipse at left bottom,
+		rgba(1, 75, 253, 1) 0%,
+		rgba(10, 60, 194, 1) 78%,
+		rgba(16, 51, 160, 1) 89%,
+		rgba(21, 42, 126, 1) 100%
+	);
+
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	overflow: hidden;
+	background: var(--background);
+}
+
+.fillParent {
+	height: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	height: var(--ds-workspace-header-height);
+	padding: 0 var(--sm) 0 var(--lg);
+	background: var(--ds-workspace-header-gradient);
+	color: var(--font-on-action);
+	overflow: clip;
+}
+
+.subHeader {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	padding: var(--xs) var(--standard);
+	border-bottom: 1px solid var(--border);
+	background: var(--background);
+}
+
+.content {
+	position: relative;
+	flex: 1;
+	overflow: auto;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	padding: var(--xs) var(--standard);
+	border-top: 1px solid var(--border);
+	background: var(--background);
+}

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

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import styles from './ds-workspace.module.scss';
+import type {
+	DsWorkspaceProps,
+	DsWorkspaceHeaderProps,
+	DsWorkspaceSubHeaderProps,
+	DsWorkspaceContentProps,
+	DsWorkspaceFooterProps,
+} from './ds-workspace.types';
+
+const DsWorkspace = ({ className, fillParent = false, ...rest }: DsWorkspaceProps) => (
+	<div {...rest} className={classNames(styles.root, { [styles.fillParent]: fillParent }, className)} />
+);
+
+const Header = ({ className, ...rest }: DsWorkspaceHeaderProps) => (
+	<header {...rest} className={classNames(styles.header, className)} />
+);
+
+const SubHeader = ({ className, ...rest }: DsWorkspaceSubHeaderProps) => (
+	<div {...rest} className={classNames(styles.subHeader, className)} />
+);
+
+/** Stacking context for non-portal drawer containment. */
+const Content = ({ className, ...rest }: DsWorkspaceContentProps) => (
+	<div {...rest} className={classNames(styles.content, className)} />
+);
+
+const Footer = ({ className, ...rest }: DsWorkspaceFooterProps) => (
+	<footer {...rest} className={classNames(styles.footer, className)} />
+);
+
+DsWorkspace.Header = Header;
+DsWorkspace.SubHeader = SubHeader;
+DsWorkspace.Content = Content;
+DsWorkspace.Footer = Footer;
+
+export default DsWorkspace;

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

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export interface DsWorkspaceProps extends ComponentPropsWithRef<'div'> {
+	/**
+	 * Whether the workspace should fill its parent height (`100%`) instead of the viewport (`100vh`).
+	 * @default false
+	 */
+	fillParent?: boolean;
+}
+
+export type DsWorkspaceHeaderProps = ComponentPropsWithRef<'header'>;
+
+export type DsWorkspaceSubHeaderProps = ComponentPropsWithRef<'div'>;
+
+export type DsWorkspaceContentProps = ComponentPropsWithRef<'div'>;
+
+export type DsWorkspaceFooterProps = ComponentPropsWithRef<'footer'>;

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

@@ -0,0 +1,8 @@
+export { default as DsWorkspace } from './ds-workspace';
+export type {
+	DsWorkspaceProps,
+	DsWorkspaceHeaderProps,
+	DsWorkspaceSubHeaderProps,
+	DsWorkspaceContentProps,
+	DsWorkspaceFooterProps,
+} from './ds-workspace.types';

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './components/ds-button';
 export * from './components/ds-button-v3';
 export * from './components/ds-card';
 export * from './components/ds-checkbox';
+export * from './components/ds-checkbox-group';
 export * from './components/ds-chip';
 export * from './components/ds-chip-group';
 export * from './components/ds-comment-bubble';
@@ -61,4 +62,5 @@ export * from './components/ds-tooltip';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-vertical-tabs';
+export * from './components/ds-workspace';
 export * from './utils/responsive';