@drivenets/design-system 0.6.1 → 0.7.0

package/src/components/ds-filter-status-icon/ds-filter-status-icon.module.scss

@@ -0,0 +1,19 @@
+.running {
+	color: var(--color-primary-700-default);
+}
+
+.warning {
+	color: var(--color-warning-400);
+}
+
+.failed {
+	color: var(--color-negative-400-default);
+}
+
+.paused {
+	color: var(--color-purple-600);
+}
+
+.inactive {
+	color: var(--color-font-disabled);
+}

package/src/components/ds-filter-status-icon/ds-filter-status-icon.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import styles from './ds-filter-status-icon.module.scss';
+import type { DsFilterStatusIconProps } from './ds-filter-status-icon.types';
+import { DsIcon } from '../ds-icon';
+
+const iconMap = {
+	running: 'special-running',
+	warning: 'special-warning',
+	failed: 'special-failed',
+	paused: 'special-paused',
+} as const;
+
+/**
+ * Design system Filter Status Icon component
+ * Status icons for toggle filter buttons to help users quickly distinguish states
+ */
+export const DsFilterStatusIcon = ({
+	status,
+	active = true,
+	size = 'small',
+	className,
+	style,
+}: DsFilterStatusIconProps) => {
+	const statusLabel = active ? `${status} status` : `${status} status (inactive)`;
+
+	return (
+		<DsIcon
+			className={classNames(active ? styles[status] : styles.inactive, className)}
+			style={style}
+			icon={iconMap[status]}
+			size={size}
+			aria-label={statusLabel}
+		/>
+	);
+};

package/src/components/ds-filter-status-icon/ds-filter-status-icon.types.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+import type { IconSize } from '../ds-icon';
+
+export const filterStatuses = ['running', 'warning', 'failed', 'paused'] as const;
+
+export type FilterStatus = (typeof filterStatuses)[number];
+
+export interface DsFilterStatusIconProps {
+	/**
+	 * The filter status type
+	 */
+	status: FilterStatus;
+	/**
+	 * Whether the status icon is active or non-active
+	 * @default true
+	 */
+	active?: boolean;
+	/**
+	 * Icon size
+	 * @default 'small'
+	 */
+	size?: IconSize;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+}

package/src/components/ds-filter-status-icon/index.ts

@@ -0,0 +1,3 @@
+export { DsFilterStatusIcon } from './ds-filter-status-icon';
+export type { DsFilterStatusIconProps, FilterStatus } from './ds-filter-status-icon.types';
+export { filterStatuses } from './ds-filter-status-icon.types';

package/src/components/ds-icon/custom-icons/index.ts

@@ -62,6 +62,10 @@ import { SpecialNetgenS } from './special-netgen-s';
 // Active state icons
 import { SpecialFilterListActive } from './special-filter-list-active';
 import { SpecialCachedActive } from './special-cached-active';
+import { SpecialRunning } from './special-running';
+import { SpecialWarning } from './special-warning';
+import { SpecialFailed } from './special-failed';
+import { SpecialPaused } from './special-paused';
 
 export type CustomIconComponent = FC<SVGProps<SVGSVGElement>>;
 
@@ -128,6 +132,12 @@ export const customIcons = {
 	// Active state
 	'special-filter-list-active': SpecialFilterListActive,
 	'special-cached-active': SpecialCachedActive,
+
+	// Filter status
+	'special-running': SpecialRunning,
+	'special-warning': SpecialWarning,
+	'special-failed': SpecialFailed,
+	'special-paused': SpecialPaused,
 } as const satisfies Record<string, CustomIconComponent>;
 
 export type CustomIconName = keyof typeof customIcons;

package/src/components/ds-icon/custom-icons/special-failed.tsx

@@ -0,0 +1,16 @@
+import { type FC, type SVGProps } from 'react';
+
+/**
+ * Special Failed icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=29013-18104&t=QK7IwYU1ovLUDr9r-0
+ */
+export const SpecialFailed: FC<SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<path
+				d="M5.4001 8.60001H10.6001C10.7701 8.60001 10.9126 8.54284 11.0276 8.42851C11.1426 8.31417 11.2001 8.17251 11.2001 8.00351C11.2001 7.83451 11.1426 7.69167 11.0276 7.57501C10.9126 7.45834 10.7701 7.40001 10.6001 7.40001H5.4001C5.2301 7.40001 5.0876 7.45717 4.9726 7.57151C4.8576 7.68584 4.8001 7.82751 4.8001 7.99651C4.8001 8.16551 4.8576 8.30834 4.9726 8.42501C5.0876 8.54167 5.2301 8.60001 5.4001 8.60001ZM8.00476 14.4C7.12388 14.4 6.29454 14.2333 5.51676 13.9C4.73899 13.5667 4.05843 13.1083 3.4751 12.525C2.89176 11.9417 2.43343 11.2613 2.1001 10.484C1.76676 9.70667 1.6001 8.87612 1.6001 7.99234C1.6001 7.10856 1.76676 6.28056 2.1001 5.50834C2.43343 4.73612 2.89176 4.05834 3.4751 3.47501C4.05843 2.89167 4.73876 2.43334 5.5161 2.10001C6.29343 1.76667 7.12399 1.60001 8.00776 1.60001C8.89154 1.60001 9.71954 1.76667 10.4918 2.10001C11.264 2.43334 11.9418 2.89167 12.5251 3.47501C13.1084 4.05834 13.5668 4.73734 13.9001 5.51201C14.2334 6.28678 14.4001 7.11456 14.4001 7.99534C14.4001 8.87623 14.2334 9.70556 13.9001 10.4833C13.5668 11.2611 13.1084 11.9417 12.5251 12.525C11.9418 13.1083 11.2628 13.5667 10.4881 13.9C9.71332 14.2333 8.88554 14.4 8.00476 14.4Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

package/src/components/ds-icon/custom-icons/special-paused.tsx

@@ -0,0 +1,16 @@
+import { type FC, type SVGProps } from 'react';
+
+/**
+ * Special Paused icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=29013-18104&t=QK7IwYU1ovLUDr9r-0
+ */
+export const SpecialPaused: FC<SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<path
+				d="M6.5966 10.4C6.7656 10.4 6.90843 10.3426 7.0251 10.2277C7.14176 10.1128 7.2001 9.97045 7.2001 9.80067V6.20467C7.2001 6.0349 7.14293 5.89167 7.0286 5.77501C6.91426 5.65834 6.7726 5.60001 6.6036 5.60001C6.4346 5.60001 6.29176 5.65745 6.1751 5.77234C6.05843 5.88723 6.0001 6.02956 6.0001 6.19934V9.79534C6.0001 9.96512 6.05726 10.1083 6.1716 10.225C6.28593 10.3417 6.4276 10.4 6.5966 10.4ZM9.3966 10.4C9.5656 10.4 9.70843 10.3426 9.8251 10.2277C9.94176 10.1128 10.0001 9.97045 10.0001 9.80067V6.20467C10.0001 6.0349 9.94293 5.89167 9.8286 5.77501C9.71426 5.65834 9.5726 5.60001 9.4036 5.60001C9.2346 5.60001 9.09176 5.65745 8.9751 5.77234C8.85843 5.88723 8.8001 6.02956 8.8001 6.19934V9.79534C8.8001 9.96512 8.85726 10.1083 8.9716 10.225C9.08593 10.3417 9.2276 10.4 9.3966 10.4ZM8.00476 14.4C7.12388 14.4 6.29454 14.2333 5.51676 13.9C4.73899 13.5667 4.05843 13.1083 3.4751 12.525C2.89176 11.9417 2.43343 11.2613 2.1001 10.484C1.76676 9.70667 1.6001 8.87612 1.6001 7.99234C1.6001 7.10856 1.76676 6.28056 2.1001 5.50834C2.43343 4.73612 2.89176 4.05834 3.4751 3.47501C4.05843 2.89167 4.73876 2.43334 5.5161 2.10001C6.29343 1.76667 7.12399 1.60001 8.00776 1.60001C8.89154 1.60001 9.71954 1.76667 10.4918 2.10001C11.264 2.43334 11.9418 2.89167 12.5251 3.47501C13.1084 4.05834 13.5668 4.73734 13.9001 5.51201C14.2334 6.28678 14.4001 7.11456 14.4001 7.99534C14.4001 8.87623 14.2334 9.70556 13.9001 10.4833C13.5668 11.2611 13.1084 11.9417 12.5251 12.525C11.9418 13.1083 11.2628 13.5667 10.4881 13.9C9.71332 14.2333 8.88554 14.4 8.00476 14.4Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

package/src/components/ds-icon/custom-icons/special-running.tsx

@@ -0,0 +1,16 @@
+import { type FC, type SVGProps } from 'react';
+
+/**
+ * Special Running icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=27983-34077
+ */
+export const SpecialRunning: FC<SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<path
+				d="M7.08343 10.3667L10.2001 8.38334C10.3445 8.29067 10.4168 8.16195 10.4168 7.99717C10.4168 7.83239 10.3445 7.70556 10.2001 7.61667L7.08343 5.63334C6.92788 5.54445 6.7751 5.54184 6.6251 5.62551C6.4751 5.70917 6.4001 5.83956 6.4001 6.01667V9.98334C6.4001 10.1605 6.4751 10.2908 6.6251 10.3745C6.7751 10.4582 6.92788 10.4556 7.08343 10.3667ZM8.00476 14.4C7.12388 14.4 6.29454 14.2333 5.51676 13.9C4.73899 13.5667 4.05843 13.1083 3.4751 12.525C2.89176 11.9417 2.43343 11.2613 2.1001 10.484C1.76676 9.70667 1.6001 8.87612 1.6001 7.99234C1.6001 7.10856 1.76676 6.28056 2.1001 5.50834C2.43343 4.73612 2.89176 4.05834 3.4751 3.47501C4.05843 2.89167 4.73876 2.43334 5.5161 2.10001C6.29343 1.76667 7.12399 1.60001 8.00776 1.60001C8.89154 1.60001 9.71954 1.76667 10.4918 2.10001C11.264 2.43334 11.9418 2.89167 12.5251 3.47501C13.1084 4.05834 13.5668 4.73734 13.9001 5.51201C14.2334 6.28678 14.4001 7.11456 14.4001 7.99534C14.4001 8.87623 14.2334 9.70556 13.9001 10.4833C13.5668 11.2611 13.1084 11.9417 12.5251 12.525C11.9418 13.1083 11.2628 13.5667 10.4881 13.9C9.71332 14.2333 8.88554 14.4 8.00476 14.4Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

package/src/components/ds-icon/custom-icons/special-warning.tsx

@@ -0,0 +1,16 @@
+import { type FC, type SVGProps } from 'react';
+
+/**
+ * Special Warning icon
+ * @figma https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=28702-63149
+ */
+export const SpecialWarning: FC<SVGProps<SVGSVGElement>> = (props) => {
+	return (
+		<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+			<path
+				d="M1.8654 13.6C1.74418 13.6 1.6379 13.5725 1.54657 13.5175C1.45535 13.4625 1.38435 13.39 1.33357 13.3C1.27801 13.2111 1.25301 13.1111 1.25857 13C1.26413 12.8889 1.29468 12.7833 1.35024 12.6833L7.48357 2.44999C7.53913 2.34999 7.61429 2.27777 7.70907 2.23332C7.80374 2.18888 7.90096 2.16666 8.00074 2.16666C8.1004 2.16666 8.19746 2.18888 8.2919 2.23332C8.38635 2.27777 8.46135 2.34999 8.5169 2.44999L14.6502 12.6833C14.7058 12.7833 14.7363 12.8889 14.7419 13C14.7475 13.1111 14.7225 13.2111 14.6669 13.3C14.6113 13.3889 14.5391 13.4611 14.4502 13.5167C14.3613 13.5722 14.2563 13.6 14.1351 13.6H1.8654ZM7.99674 11.6C8.16574 11.6 8.30857 11.5428 8.42524 11.4285C8.5419 11.3142 8.60024 11.1725 8.60024 11.0035C8.60024 10.8345 8.54307 10.6917 8.42874 10.575C8.3144 10.4583 8.17274 10.4 8.00374 10.4C7.83474 10.4 7.6919 10.4572 7.57524 10.5715C7.45857 10.6858 7.40024 10.8275 7.40024 10.9965C7.40024 11.1655 7.4574 11.3083 7.57174 11.425C7.68607 11.5417 7.82774 11.6 7.99674 11.6ZM7.99674 9.59999C8.16574 9.59999 8.30857 9.54249 8.42524 9.42749C8.5419 9.31249 8.60024 9.16999 8.60024 8.99999V6.99999C8.60024 6.82999 8.54307 6.68749 8.42874 6.57249C8.3144 6.45749 8.17274 6.39999 8.00374 6.39999C7.83474 6.39999 7.6919 6.45749 7.57524 6.57249C7.45857 6.68749 7.40024 6.82999 7.40024 6.99999V8.99999C7.40024 9.16999 7.4574 9.31249 7.57174 9.42749C7.68607 9.54249 7.82774 9.59999 7.99674 9.59999Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

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

@@ -6,7 +6,7 @@
 	border-inline-end: 1px solid transparent;
 
 	&[data-state='open']:hover,
-	&[data-state='open']:focus-within {
+	&[data-state='open']:has(:focus-visible) {
 		border-color: var(--color-border);
 	}
 
@@ -57,12 +57,12 @@
 	}
 
 	.root:hover &,
-	.root:focus-within & {
+	.root:has(:focus-visible) & {
 		display: flex;
 	}
 
 	&:hover,
-	&:focus {
+	&:focus-visible {
 		color: var(--color-icon-primary);
 		border-color: var(--color-border-action-primary);
 		outline: none;

package/src/components/ds-progress-arc/ds-progress-arc.module.scss

@@ -0,0 +1,57 @@
+$icon-medium-size: 44px;
+$transition-duration: 0.2s;
+
+.root {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.svg {
+	position: absolute;
+	inset: 0;
+}
+
+.track {
+	stroke: var(--color-background-tertiary);
+	transition: stroke $transition-duration;
+}
+
+.progress {
+	transition: stroke-dasharray $transition-duration;
+}
+
+.default {
+	stroke: var(--color-background-selected);
+}
+
+.success {
+	stroke: var(--color-background-success-strong);
+}
+
+.error {
+	stroke: var(--color-background-danger-strong);
+}
+
+.center {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-font-main);
+}
+
+.iconSuccess {
+	color: var(--color-icon-success);
+}
+
+.iconError {
+	color: var(--color-icon-danger);
+}
+
+.iconMediumSize.iconMediumSize {
+	font-size: $icon-medium-size;
+	width: 1em;
+	height: 1em;
+}

package/src/components/ds-progress-arc/ds-progress-arc.tsx

@@ -0,0 +1,111 @@
+import type React from 'react';
+import classNames from 'classnames';
+
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+import styles from './ds-progress-arc.module.scss';
+import type { DsProgressArcProps, ProgressArcVariant } from './ds-progress-arc.types';
+import { clampValue, getArcGeometry, getProgressDasharray, getTrackDasharray } from './utils';
+
+const variantStyleMap: Record<ProgressArcVariant, string> = Object.freeze({
+	default: styles.default,
+	success: styles.success,
+	error: styles.error,
+});
+
+const DsProgressArc = ({
+	value = 0,
+	size = 'medium',
+	variant = 'default',
+	children,
+	className,
+	style,
+	ref,
+	...props
+}: DsProgressArcProps) => {
+	const { containerSize, strokeWidth, radius, circumference, arcLength, center, startRotation } =
+		getArcGeometry(size);
+
+	const effectiveValue = variant === 'success' ? 100 : clampValue(value);
+	const trackDasharray = getTrackDasharray(arcLength, circumference);
+	const progressDasharray = getProgressDasharray(effectiveValue, arcLength, circumference);
+
+	const renderIcon = (iconName: 'check' | 'close', colorClass: string) => {
+		return (
+			<DsIcon
+				variant="rounded"
+				icon={iconName}
+				size="large"
+				className={classNames({ [styles.iconMediumSize]: size === 'medium' }, colorClass)}
+			/>
+		);
+	};
+
+	const renderCenter = () => {
+		if (children) {
+			return children;
+		}
+
+		if (variant === 'success') {
+			return renderIcon('check', styles.iconSuccess);
+		}
+
+		if (variant === 'error') {
+			return renderIcon('close', styles.iconError);
+		}
+
+		return (
+			<DsTypography variant={size === 'medium' ? 'heading3' : 'body-md-md'} asChild>
+				<span>{effectiveValue}%</span>
+			</DsTypography>
+		);
+	};
+
+	return (
+		<div
+			{...props}
+			className={classNames(styles.root, className)}
+			style={{ width: containerSize, height: containerSize, ...style }}
+			ref={ref as React.Ref<HTMLDivElement>}
+			role="progressbar"
+			aria-valuenow={effectiveValue}
+			aria-valuemin={0}
+			aria-valuemax={100}
+		>
+			<svg
+				className={styles.svg}
+				width={containerSize}
+				height={containerSize}
+				viewBox={`0 0 ${String(containerSize)} ${String(containerSize)}`}
+			>
+				<circle
+					className={styles.track}
+					cx={center}
+					cy={center}
+					r={radius}
+					fill="none"
+					strokeWidth={strokeWidth}
+					strokeDasharray={trackDasharray}
+					strokeLinecap="round"
+					transform={`rotate(${String(startRotation)} ${String(center)} ${String(center)})`}
+				/>
+
+				<circle
+					className={classNames(styles.progress, variantStyleMap[variant])}
+					cx={center}
+					cy={center}
+					r={radius}
+					fill="none"
+					strokeWidth={strokeWidth}
+					strokeDasharray={progressDasharray}
+					strokeLinecap="round"
+					transform={`rotate(${String(startRotation)} ${String(center)} ${String(center)})`}
+				/>
+			</svg>
+
+			<div className={styles.center}>{renderCenter()}</div>
+		</div>
+	);
+};
+
+export default DsProgressArc;

package/src/components/ds-progress-arc/ds-progress-arc.types.ts

@@ -0,0 +1,34 @@
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+
+export const progressArcSizes = ['small', 'medium'] as const;
+export type ProgressArcSize = (typeof progressArcSizes)[number];
+
+export const progressArcVariants = ['default', 'success', 'error'] as const;
+export type ProgressArcVariant = (typeof progressArcVariants)[number];
+
+export interface DsProgressArcProps extends ComponentPropsWithoutRef<'div'> {
+	/**
+	 * Progress value between 0 and 100
+	 * @default 0
+	 */
+	value?: number;
+
+	/**
+	 * Size of the arc progress indicator
+	 * @default 'medium'
+	 */
+	size?: ProgressArcSize;
+
+	/**
+	 * Visual variant of the arc progress indicator
+	 * @default 'default'
+	 */
+	variant?: ProgressArcVariant;
+
+	/**
+	 * Custom content to display in the center of the arc, overriding the default text or icon
+	 */
+	children?: ReactNode;
+
+	ref?: Ref<HTMLElement>;
+}

package/src/components/ds-progress-arc/index.ts

@@ -0,0 +1,3 @@
+export { default as DsProgressArc } from './ds-progress-arc';
+
+export * from './ds-progress-arc.types';

package/src/components/ds-progress-arc/utils.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import { ARC_RATIO, getArcGeometry, getProgressDasharray, getTrackDasharray } from './utils';
+
+describe('Progress Arc Utils', () => {
+	describe('getArcGeometry', () => {
+		it('should return correct geometry for small size', () => {
+			const geo = getArcGeometry('small');
+
+			expect(geo.containerSize).toBe(80);
+			expect(geo.strokeWidth).toBe(4);
+			expect(geo.radius).toBe(38);
+			expect(geo.center).toBe(40);
+			expect(geo.startRotation).toBe(135);
+			expect(geo.circumference).toBeCloseTo(2 * Math.PI * 38);
+			expect(geo.arcLength).toBeCloseTo(ARC_RATIO * geo.circumference);
+		});
+
+		it('should return correct geometry for medium size', () => {
+			const geo = getArcGeometry('medium');
+
+			expect(geo.containerSize).toBe(120);
+			expect(geo.strokeWidth).toBe(6);
+			expect(geo.radius).toBe(57);
+			expect(geo.center).toBe(60);
+			expect(geo.startRotation).toBe(135);
+			expect(geo.circumference).toBeCloseTo(2 * Math.PI * 57);
+			expect(geo.arcLength).toBeCloseTo(ARC_RATIO * geo.circumference);
+		});
+
+		it('should have arcLength as 3/4 of circumference', () => {
+			const geo = getArcGeometry('medium');
+
+			expect(geo.arcLength / geo.circumference).toBeCloseTo(ARC_RATIO);
+		});
+	});
+
+	describe('getTrackDasharray', () => {
+		it('should format arcLength and circumference as space-separated string', () => {
+			const result = getTrackDasharray(100, 200);
+
+			expect(result).toBe('100 200');
+		});
+
+		it('should handle decimal values', () => {
+			const geo = getArcGeometry('small');
+			const result = getTrackDasharray(geo.arcLength, geo.circumference);
+
+			expect(result).toBe(`${String(geo.arcLength)} ${String(geo.circumference)}`);
+		});
+	});
+
+	describe('getProgressDasharray', () => {
+		it('should return zero progress length for value 0', () => {
+			const result = getProgressDasharray(0, 100, 200);
+
+			expect(result).toBe('0 200');
+		});
+
+		it('should return full arc length for value 100', () => {
+			const result = getProgressDasharray(100, 100, 200);
+
+			expect(result).toBe('100 200');
+		});
+
+		it('should return half arc length for value 50', () => {
+			const result = getProgressDasharray(50, 100, 200);
+
+			expect(result).toBe('50 200');
+		});
+
+		it('should calculate correctly with real geometry values', () => {
+			const geo = getArcGeometry('medium');
+			const result = getProgressDasharray(75, geo.arcLength, geo.circumference);
+			const expectedProgress = (75 / 100) * geo.arcLength;
+
+			expect(result).toBe(`${String(expectedProgress)} ${String(geo.circumference)}`);
+		});
+	});
+});

package/src/components/ds-progress-arc/utils.ts

@@ -0,0 +1,61 @@
+import type { ProgressArcSize } from './ds-progress-arc.types';
+
+export { clampValue } from '../../utils/numbers';
+
+const ARC_DEGREES = 270;
+const FULL_CIRCLE = 360;
+const START_ROTATION = 135;
+
+export const ARC_RATIO = ARC_DEGREES / FULL_CIRCLE;
+
+const containerSizeMap: Record<ProgressArcSize, number> = Object.freeze({
+	small: 80,
+	medium: 120,
+});
+
+const strokeWidthMap: Record<ProgressArcSize, number> = Object.freeze({
+	small: 4,
+	medium: 6,
+});
+
+export interface ArcGeometry {
+	containerSize: number;
+	strokeWidth: number;
+	radius: number;
+	circumference: number;
+	arcLength: number;
+	center: number;
+	startRotation: number;
+}
+
+export const getArcGeometry = (size: ProgressArcSize): ArcGeometry => {
+	const containerSize = containerSizeMap[size];
+	const strokeWidth = strokeWidthMap[size];
+	const radius = (containerSize - strokeWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const arcLength = ARC_RATIO * circumference;
+	const center = containerSize / 2;
+
+	return {
+		containerSize,
+		strokeWidth,
+		radius,
+		circumference,
+		arcLength,
+		center,
+		startRotation: START_ROTATION,
+	};
+};
+
+export const getTrackDasharray = (arcLength: number, circumference: number): string =>
+	`${String(arcLength)} ${String(circumference)}`;
+
+export const getProgressDasharray = (
+	effectiveValue: number,
+	arcLength: number,
+	circumference: number,
+): string => {
+	const progressLength = (effectiveValue / 100) * arcLength;
+
+	return `${String(progressLength)} ${String(circumference)}`;
+};

package/src/components/ds-progress-donut/ds-progress-donut.module.scss

@@ -0,0 +1,67 @@
+$transition-duration: 0.2s;
+
+.root {
+	display: inline-grid;
+}
+
+.small {
+	--size: 80px;
+	--thickness: 4px;
+}
+
+.medium {
+	--size: 120px;
+	--thickness: 6px;
+}
+
+.circle {
+	grid-area: 1 / 1;
+	display: block;
+}
+
+.track {
+	stroke: var(--color-background-tertiary);
+	transition: stroke $transition-duration;
+}
+
+.range {
+	transition: stroke-dashoffset $transition-duration;
+	stroke-linecap: round;
+}
+
+.default .range {
+	stroke: var(--color-background-selected);
+}
+
+.success .track,
+.success .range {
+	stroke: var(--color-background-success-strong);
+}
+
+.error .range {
+	stroke: var(--color-background-danger-strong);
+}
+
+.center {
+	grid-area: 1 / 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-font-main);
+}
+
+.iconSuccess {
+	color: var(--color-icon-success);
+}
+
+.iconError {
+	color: var(--color-icon-danger);
+}
+
+$icon-medium-size: 44px;
+
+.iconMediumSize.iconMediumSize {
+	font-size: $icon-medium-size;
+	width: 1em;
+	height: 1em;
+}