@drivenets/design-system 0.9.1 → 0.11.0

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

@@ -8,12 +8,12 @@ $border-radius: 4px;
 	width: 100%;
 
 	&.sizeSmall {
-		gap: var(--spacing-4xs);
+		gap: var(--4xs);
 	}
 
 	&.sizeMedium,
 	&.sizeLarge {
-		gap: var(--spacing-3xs);
+		gap: var(--3xs);
 	}
 }
 
@@ -25,18 +25,18 @@ $border-radius: 4px;
 
 .label {
 	@include typography.body-sm-md;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .valueText {
 	@include typography.body-sm-reg;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex-shrink: 0;
 }
 
 .track {
 	width: 100%;
-	background-color: var(--color-background-tertiary);
+	background-color: var(--background-tertiary);
 	border-radius: $border-radius;
 	overflow: hidden;
 }
@@ -60,41 +60,41 @@ $border-radius: 4px;
 }
 
 .variantProgress {
-	background-color: var(--color-background-selected);
+	background-color: var(--background-primary);
 }
 
 .variantInterrupted {
-	background-color: var(--color-background-warning-strong);
+	background-color: var(--background-warning-strong);
 }
 
 .variantSuccess {
-	background-color: var(--color-background-success-strong);
+	background-color: var(--background-success-strong);
 }
 
 .variantError {
-	background-color: var(--color-background-danger-strong);
+	background-color: var(--background-error);
 }
 
 .caption {
 	@include typography.body-xs-reg;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
-	padding-top: var(--spacing-4xs);
+	gap: var(--3xs);
+	padding-top: var(--4xs);
 }
 
 .captionDefault {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .captionSuccess {
-	color: var(--color-background-success-strong);
+	color: var(--background-success-strong);
 }
 
 .captionError {
-	color: var(--color-background-danger-strong);
+	color: var(--background-error);
 }
 
 .captionInterrupted {
-	color: var(--color-font-warning);
+	color: var(--font-warning);
 }

package/src/components/ds-radio-group/ds-radio-group.module.scss

@@ -1,90 +1,99 @@
 @use '../../styles/typography';
 
+$radio-click-target: 20px;
+$radio-circle-size: 16px;
+$radio-dot-size: 8px;
+
 .radioGroupRoot {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--standard);
 }
 
 .radioItemContainer {
-	position: relative;
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	gap: 4px;
+	column-gap: var(--3xs);
 	cursor: pointer;
-	padding-right: 1px;
-	border: 1px solid transparent;
-	border-radius: 4px;
+	border-radius: var(--4xs);
+
+	&:has(.labelInfo) {
+		align-items: flex-start;
+
+		.radioLabel {
+			padding-bottom: var(--4xs);
+			padding-right: var(--4xs);
+		}
+	}
 
 	&:has([data-disabled]) {
 		cursor: not-allowed;
 
+		.radioLabel {
+			color: var(--font-disabled);
+		}
+
 		.labelInfo {
-			color: var(--color-secondary-500-net-4);
+			color: var(--font-disabled);
 		}
 	}
 
-	&:has([data-state='checked']:focus-visible) {
-		border-radius: 4px;
-		border-color: var(--color-primary-700-net-1);
+	&:not(:has([data-disabled])):hover {
+		background-color: var(--background-secondary-hover);
 	}
 
-	&:has([data-state='unchecked']:focus-visible) {
-		border-color: var(--color-primary-800);
-	}
+	&:has([data-focus-visible]) {
+		position: relative;
+		background-color: var(--background-secondary-hover);
 
-	&:has(.labelInfo) {
-		margin-bottom: 4px;
+		&::after {
+			content: '';
+			position: absolute;
+			inset: calc(-1px - var(--4xs));
+			border: var(--4xs) solid var(--border-action-primary-hover);
+			border-radius: var(--3xs);
+			pointer-events: none;
+		}
 	}
 }
 
 .radioItem {
 	all: unset;
-	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 2px solid transparent;
-	border-radius: 50%;
-	transition:
-		background-color 0.2s ease-in-out,
-		border-color 0.2s ease-in-out;
+	width: $radio-click-target;
+	height: $radio-click-target;
+	flex-shrink: 0;
 
 	.radioItemWrapper {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: 16px;
-		width: 16px;
-		border: 2px solid var(--color-secondary-500-net-4);
-		padding: 2px;
+		height: $radio-circle-size;
+		width: $radio-circle-size;
+		border: 1.5px solid var(--border-contrast);
 		border-radius: 50%;
-		background: none;
+		background: var(--background);
+		transition: border-color 0.2s;
 	}
 
 	&[data-state='checked'],
 	[data-state='checked'] > & {
 		.radioItemWrapper {
-			border-color: var(--color-primary-700-default);
-		}
-
-		&:hover {
-			border-color: var(--color-primary-100);
+			border-color: var(--border-action-primary);
 		}
 	}
 
 	&[data-state='checked'][data-disabled],
 	[data-state='checked'][data-disabled] > & {
-		.radioIndicator {
-			background: var(--color-secondary-300);
+		.radioItemWrapper {
+			border-color: var(--border-disabled);
 		}
-	}
 
-	&[data-state='unchecked'],
-	[data-state='unchecked'] > & {
-		&:hover {
-			border-color: var(--color-secondary-100);
-			background-color: var(--color-secondary-100);
+		.radioIndicator {
+			background: var(--border-disabled);
 		}
 	}
 
@@ -92,20 +101,16 @@
 	[data-disabled] > & {
 		pointer-events: none;
 
-		& + label {
-			pointer-events: none;
-		}
-
 		.radioItemWrapper {
-			border-color: var(--color-secondary-300);
+			border-color: var(--border-disabled);
 		}
 	}
 }
 
 .radioIndicator {
-	width: 8px;
-	height: 8px;
-	background: var(--color-primary-700-default);
+	width: $radio-dot-size;
+	height: $radio-dot-size;
+	background: var(--background-primary);
 	border-radius: 50%;
 
 	&[data-part='indicator'] {
@@ -123,16 +128,13 @@
 }
 
 .radioLabel {
-	@include typography.body-sm-reg;
-	color: var(--color-secondary-800);
-	cursor: pointer;
+	@include typography.body-sm-md;
+	color: var(--font-main);
 }
 
 .labelInfo {
-	@include typography.body-xs-reg;
-	@include typography.ellipsis;
-	position: absolute;
-	color: var(--color-secondary-600-net-2);
-	cursor: pointer;
-	width: 100%;
+	color: var(--font-secondary);
+	flex-basis: 100%;
+	padding-left: calc($radio-click-target + var(--xs));
+	padding-right: var(--4xs);
 }

package/src/components/ds-radio-group/ds-radio-group.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { RadioGroup } from '@ark-ui/react/radio-group';
 import classNames from 'classnames';
+import { DsTypography } from '../ds-typography';
 import styles from './ds-radio-group.module.scss';
 import type {
 	DsRadioGroupItemProps,
@@ -47,13 +47,11 @@ const Item: React.FC<DsRadioGroupItemProps> = ({
 				</div>
 			</RadioGroup.ItemControl>
 			<RadioGroup.ItemHiddenInput />
-			{label ? (
-				<RadioGroup.ItemText className={styles.radioLabel}>
-					{label}
-					{labelInfo && <div className={styles.labelInfo}>{labelInfo}</div>}
-				</RadioGroup.ItemText>
-			) : (
-				children
+			{label ? <RadioGroup.ItemText className={styles.radioLabel}>{label}</RadioGroup.ItemText> : children}
+			{!!labelInfo && (
+				<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+					{labelInfo}
+				</DsTypography>
 			)}
 		</RadioGroup.Item>
 	);
@@ -70,35 +68,44 @@ export const DsRadioGroupLegacy: React.FC<DsRadioGroupLegacyProps> = ({
 	value,
 	defaultValue,
 	onValueChange,
+	disabled,
 	className,
-	...props
+	style,
 }) => (
-	<RadioGroupPrimitive.Root
+	<RadioGroup.Root
 		className={classNames(styles.radioGroupRoot, className)}
-		value={value}
+		style={style}
+		value={value ?? undefined}
 		defaultValue={defaultValue}
-		onValueChange={onValueChange}
-		{...props}
+		disabled={disabled}
+		onValueChange={(details) => {
+			if (details.value !== null) {
+				onValueChange?.(details.value);
+			}
+		}}
 	>
 		{options.map((option) => (
-			<div key={option.value} className={styles.radioItemContainer}>
-				<RadioGroupPrimitive.Item
-					className={styles.radioItem}
-					value={option.value}
-					disabled={option.disabled}
-					id={option.value}
-				>
+			<RadioGroup.Item
+				key={option.value}
+				value={option.value}
+				disabled={option.disabled}
+				className={styles.radioItemContainer}
+			>
+				<RadioGroup.ItemControl className={styles.radioItem}>
 					<div className={styles.radioItemWrapper}>
-						<RadioGroupPrimitive.Indicator className={styles.radioIndicator} />
+						<div className={styles.radioIndicator} data-part="indicator" />
 					</div>
-				</RadioGroupPrimitive.Item>
-				<label className={styles.radioLabel} htmlFor={option.value}>
-					{option.label}
-					{option.labelInfo && <div className={styles.labelInfo}>{option.labelInfo}</div>}
-				</label>
-			</div>
+				</RadioGroup.ItemControl>
+				<RadioGroup.ItemHiddenInput />
+				<RadioGroup.ItemText className={styles.radioLabel}>{option.label}</RadioGroup.ItemText>
+				{!!option.labelInfo && (
+					<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+						{option.labelInfo}
+					</DsTypography>
+				)}
+			</RadioGroup.Item>
 		))}
-	</RadioGroupPrimitive.Root>
+	</RadioGroup.Root>
 );
 /* c8 ignore stop */
 

package/src/components/ds-radio-group/ds-radio-group.types.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import type * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { type RadioGroupItemProps, type RadioGroupRootProps } from '@ark-ui/react/radio-group';
 
 /**
@@ -9,6 +8,28 @@ export interface DsRadioGroupRootProps extends Pick<
 	RadioGroupRootProps,
 	'id' | 'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'orientation' | 'children'
 > {
+	/**
+	 * Currently selected radio value (controlled). Pair with `onValueChange`.
+	 */
+	value?: RadioGroupRootProps['value'];
+	/**
+	 * Initially selected radio value when uncontrolled.
+	 */
+	defaultValue?: RadioGroupRootProps['defaultValue'];
+	/**
+	 * Whether the entire radio group is disabled.
+	 * @default false
+	 */
+	disabled?: RadioGroupRootProps['disabled'];
+	/**
+	 * HTML name attribute applied to each radio input, used in form submissions.
+	 */
+	name?: RadioGroupRootProps['name'];
+	/**
+	 * Layout orientation of the radio items.
+	 * @default vertical
+	 */
+	orientation?: RadioGroupRootProps['orientation'];
 	/**
 	 * Event handler called when the selected value changes
 	 */
@@ -22,6 +43,16 @@ export interface DsRadioGroupItemProps extends Pick<
 	RadioGroupItemProps,
 	'value' | 'disabled' | 'className' | 'style' | 'children'
 > {
+	/**
+	 * Underlying value submitted when this item is selected.
+	 */
+	value: RadioGroupItemProps['value'];
+	/**
+	 * Whether this radio item is disabled. Takes precedence over the group-level
+	 * `disabled` when the group is enabled.
+	 * @default false
+	 */
+	disabled?: RadioGroupItemProps['disabled'];
 	/**
 	 * Optional label text for the radio item
 	 */
@@ -61,9 +92,7 @@ export interface DsRadioOptionLegacy<ValueType = string> {
  * Use compound component pattern instead
  * @deprecated
  */
-export interface DsRadioGroupLegacyProps<
-	TOption extends DsRadioOptionLegacy = DsRadioOptionLegacy,
-> extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+export interface DsRadioGroupLegacyProps<TOption extends DsRadioOptionLegacy = DsRadioOptionLegacy> {
 	/**
 	 * The radio group options
 	 */
@@ -78,16 +107,18 @@ export interface DsRadioGroupLegacyProps<
 	defaultValue?: TOption['value'];
 	/**
 	 * Event handler called when the selected value changes
-	 *
-	 * @param value
 	 */
 	onValueChange?: (value: TOption['value']) => void;
+	/**
+	 * Whether the entire radio group is disabled.
+	 */
+	disabled?: boolean;
 	/**
 	 * Additional CSS class names
 	 */
 	className?: string;
 	/**
-	 * Additional styles to apply to the component
+	 * Additional inline styles
 	 */
 	style?: React.CSSProperties;
 }

package/src/components/ds-segment-group/ds-segment-group.module.scss

@@ -2,19 +2,19 @@
 	display: inline-flex;
 	align-items: center;
 	position: relative;
-	background: var(--color-background-secondary);
-	border: 1px solid var(--color-border-contrast);
+	background: var(--background-secondary);
+	border: 1px solid var(--border-contrast);
 	border-radius: 4px;
-	gap: var(--spacing-2xs);
+	gap: var(--2xs);
 	height: 36px;
-	padding: var(--spacing-3xs);
+	padding: var(--3xs);
 
 	&.small {
 		height: 28px;
-		padding: var(--spacing-4xs);
+		padding: var(--4xs);
 
 		.segmentItem {
-			padding: var(--spacing-4xs) var(--spacing-xs);
+			padding: var(--4xs) var(--xs);
 		}
 	}
 }
@@ -24,8 +24,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: var(--spacing-3xs) var(--spacing-sm);
-	gap: var(--spacing-2xs);
+	padding: var(--3xs) var(--sm);
+	gap: var(--2xs);
 	flex: 1;
 	z-index: 1;
 	cursor: pointer;
@@ -33,7 +33,7 @@
 
 	&[data-state='checked'] {
 		.segmentItemText {
-			color: var(--color-font-main);
+			color: var(--font-main);
 			font-weight: var(--font-weight-medium);
 		}
 	}
@@ -42,30 +42,30 @@
 		background: transparent;
 
 		.segmentItemText {
-			color: var(--color-background-action);
+			color: var(--background-action);
 		}
 
 		&:hover:not([data-disabled]) {
-			background: var(--color-background-action-secondary);
+			background: var(--background-action-secondary);
 		}
 
 		&:active:not([data-disabled]) {
-			background: var(--color-background);
-			border-color: var(--color-border-contrast);
+			background: var(--background);
+			border-color: var(--border-contrast);
 		}
 	}
 
 	&[data-disabled] {
 		cursor: not-allowed;
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 
 		.segmentItemText {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--color-border-action-secondary);
+		outline: 2px solid var(--border-action-secondary);
 		outline-offset: 2px;
 	}
 }
@@ -86,8 +86,8 @@
 
 .segmentIndicator {
 	position: absolute;
-	background: var(--color-background);
-	border: 1px solid var(--color-border-contrast);
+	background: var(--background);
+	border: 1px solid var(--border-contrast);
 	border-radius: 4px;
 	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	z-index: 0;

package/src/components/ds-segment-group/ds-segment-group.types.ts

@@ -17,6 +17,23 @@ export interface DsSegmentGroupRootProps extends Pick<
 	SegmentGroupRootProps,
 	'value' | 'defaultValue' | 'disabled' | 'name' | 'className' | 'style' | 'children'
 > {
+	/**
+	 * Currently selected segment value (controlled). Pair with `onValueChange`.
+	 */
+	value?: SegmentGroupRootProps['value'];
+	/**
+	 * Initially selected segment value when uncontrolled.
+	 */
+	defaultValue?: SegmentGroupRootProps['defaultValue'];
+	/**
+	 * Whether the entire segment group is disabled.
+	 * @default false
+	 */
+	disabled?: SegmentGroupRootProps['disabled'];
+	/**
+	 * HTML name attribute used when the group participates in a form submission.
+	 */
+	name?: SegmentGroupRootProps['name'];
 	/**
 	 * Size variant of the segment group
 	 * @default 'default'

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

@@ -33,18 +33,18 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	color: var(--color-font-secondary);
-	padding: var(--spacing-xs);
+	color: var(--font-secondary);
+	padding: var(--xs);
 	border-radius: 2px;
 	cursor: pointer;
 	outline: none;
 
 	&[data-highlighted],
 	&:hover {
-		background: var(--color-background-selected-weak);
+		background: var(--background-secondary-hover);
 
 		.itemIcon {
-			color: var(--color-background-selected);
+			color: var(--background-primary);
 		}
 	}
 }
@@ -56,14 +56,14 @@
 	text-align: start;
 
 	.trigger:not([data-disabled]) & {
-		color: var(--color-font-secondary);
+		color: var(--font-secondary);
 	}
 }
 
 .multiSelectItemsContainer {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-3xs);
-	border-bottom: 1px solid var(--color-border-secondary);
+	gap: var(--3xs);
+	padding: var(--3xs);
+	border-bottom: 1px solid var(--border-secondary);
 }

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

@@ -65,18 +65,39 @@ export type DsSelectProps = {
 	renderOption?: (option: DsSelectOption) => ReactNode;
 } & (
 	| {
+			/**
+			 * When `false` or omitted, the select cannot be cleared. `onClear` is not
+			 * accepted in this branch.
+			 * @default false
+			 */
 			clearable?: undefined | false;
 			onClear?: never;
 	  }
 	| {
+			/**
+			 * When `true`, renders a clear affordance on the trigger. Pair with `onClear`.
+			 */
 			clearable: true;
+			/**
+			 * Called when the user clicks the clear affordance.
+			 */
 			onClear?: () => void;
 	  }
 ) &
 	(
 		| {
+				/**
+				 * Single-selection mode. When `false` or omitted, `value` is a single string.
+				 * @default false
+				 */
 				multiple?: undefined | false;
+				/**
+				 * Currently selected option value (controlled).
+				 */
 				value: SelectOptionValue;
+				/**
+				 * Called when the selection changes. Receives the newly selected option value.
+				 */
 				onValueChange?: (value: SelectOptionValue) => void;
 				/**
 				 * Custom render function for the selected value in the trigger.
@@ -86,8 +107,19 @@ export type DsSelectProps = {
 				renderValue?: (selectedOption: DsSelectOption) => ReactNode;
 		  }
 		| {
+				/**
+				 * Multi-selection mode. When `true`, `value` is an array of selected option
+				 * values and `onValueChange` receives the full updated array.
+				 */
 				multiple: true;
+				/**
+				 * Currently selected option values (controlled).
+				 */
 				value: SelectOptionValue[];
+				/**
+				 * Called when the selection changes. Receives the full updated array of
+				 * selected values.
+				 */
 				onValueChange?: (value: SelectOptionValue[]) => void;
 				/**
 				 * Custom render function for the selected value in the trigger.

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

@@ -34,7 +34,7 @@
 
 .text {
 	display: block;
-	margin-bottom: var(--spacing-xs);
+	margin-bottom: var(--xs);
 
 	&:last-child {
 		margin-bottom: 0;