@drivenets/design-system 0.9.1 → 0.11.0

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

@@ -1,161 +1,144 @@
+@use '../../styles/root_new';
 @use '../../styles/typography';
 
-.container {
+$checkbox-size: 16px;
+$checkbox-border-radius: 2px;
+$checkbox-focus-ring-width: 2px;
+$transition-duration: 0.2s;
+
+.root {
 	position: relative;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	padding-right: 1px;
-	border: 1px solid transparent;
-	border-radius: 4px;
-
-	&:has([data-disabled]) {
-		cursor: not-allowed;
-		pointer-events: none;
+	display: inline-flex;
+	align-items: flex-start;
+	gap: var(--3xs);
+	padding: var(--4xs);
+	border-radius: $checkbox-border-radius;
+	cursor: pointer;
+	transition: background-color $transition-duration ease-in-out;
 
-		.labelInfo {
-			color: var(--color-font-disabled);
-		}
+	&:hover,
+	&[data-hover],
+	&[data-focus-visible] {
+		background-color: var(--background-secondary-hover);
 	}
 
-	&:has(.label):has(.checkboxRoot:focus-visible) {
-		border-color: var(--color-background-selected);
+	&[data-focus-visible] {
+		outline: $checkbox-focus-ring-width solid var(--background-primary-hover);
+		outline-offset: 0;
 	}
 
-	&:has(.label):has([data-state='unchecked']:focus-visible) {
-		border-color: var(--color-background-selected-hover);
+	.control {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: $checkbox-size;
+		height: $checkbox-size;
+		border: 1px solid var(--secondary-400);
+		border-radius: $checkbox-border-radius;
+		background-color: transparent;
+		transition:
+			background-color $transition-duration ease-in-out,
+			border-color $transition-duration ease-in-out;
 	}
-}
 
-.checkboxRoot {
-	all: unset;
-	position: relative;
-	border-radius: 2px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: all 0.2s ease-in-out;
-	cursor: pointer;
-
-	&[data-disabled] {
-		border-color: var(--color-background-disable);
-		pointer-events: none;
-
-		&[data-state='unchecked'] {
-			.checkboxWrapper {
-				border-color: var(--color-background-disable);
-			}
-		}
+	.indicator {
+		line-height: 0;
+		color: var(--icon-inverse);
 
-		&[data-state='checked'],
-		&[data-state='indeterminate'] {
-			.checkboxWrapper {
-				border-color: var(--color-background-disable);
-				background-color: var(--color-background-disable);
-			}
+		svg {
+			width: 100%;
+			height: 100%;
 		}
 	}
 
-	&[data-state='checked'] {
-		.checkboxWrapper {
-			border-color: var(--color-background-selected);
-			background-color: var(--color-background-selected);
-		}
-
-		&:hover,
-		&:focus-visible {
-			background: var(--color-background-action-secondary-hover);
-		}
+	.labelColumn {
+		display: flex;
+		flex-direction: column;
+		gap: var(--4xs);
+		min-width: 0;
 	}
 
-	&[data-state='unchecked'] {
-		.checkboxWrapper {
-			border-color: var(--color-background-deselected);
-		}
+	.label {
+		@include typography.body-sm-reg;
+		line-height: normal;
+		color: var(--font-main);
+	}
 
-		&:hover,
-		&:focus-visible {
-			background: var(--color-background-action-hover-weak);
-		}
+	.labelInfo {
+		@include typography.body-xs-reg;
+		@include typography.ellipsis;
+		color: var(--font-secondary);
 	}
 
+	&[data-state='checked'],
 	&[data-state='indeterminate'] {
-		.checkboxWrapper {
-			border-color: var(--color-background-selected);
-			background-color: var(--color-background-selected);
-		}
-
-		&:hover,
-		&:focus-visible {
-			background: var(--color-background-action-secondary-hover);
+		.control {
+			background-color: var(--background-primary);
+			border-color: var(--background-primary);
 		}
 	}
 
-	.checkboxWrapper {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 16px;
-		width: 16px;
-		margin: var(--spacing-4xs);
-		border: 2px solid transparent;
-		border-radius: 2px;
-	}
-}
+	&[data-disabled] {
+		cursor: not-allowed;
+		background-color: transparent;
 
-.checkboxIndicator {
-	flex: 1;
-	color: white;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+		.label {
+			color: var(--font-disabled);
+		}
 
-	svg {
-		width: 100%;
-		height: 100%;
-	}
-}
+		.labelInfo {
+			color: var(--font-disabled);
+		}
 
-.label {
-	@include typography.body-sm-reg;
-	color: var(--color-font-main);
-	cursor: pointer;
-}
+		&[data-state='checked'],
+		&[data-state='indeterminate'] {
+			.label {
+				color: var(--font-disabled);
+			}
 
-.labelInfo {
-	@include typography.body-xs-reg;
-	@include typography.ellipsis;
-	position: absolute;
-	color: var(--color-font-secondary);
-	cursor: pointer;
-	width: 100%;
+			.control {
+				background-color: var(--background-disable);
+				border-color: var(--background-disable);
+			}
+		}
+	}
 }
 
-.default {
-	border-color: transparent;
+// Overlay the native input over the control so `getByRole('checkbox')` clicks
+// land on a real interactive surface. Ark applies `visuallyHiddenStyle` inline
+// (1x1, clipped, off-screen) which Playwright refuses to click; `!important`
+// is required to beat inline-style specificity.
+.hiddenInput {
+	position: absolute !important;
+	inset-block-start: var(--4xs) !important;
+	inset-inline-start: var(--4xs) !important;
+	width: $checkbox-size !important;
+	height: $checkbox-size !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	clip: auto !important;
+	overflow: visible !important;
+	opacity: 0 !important;
+	cursor: inherit !important;
 }
 
 .warning {
-	&:has([data-state='checked']),
-	&:has([data-state='indeterminate']) {
-		.label {
-			color: var(--color-font-warning);
-		}
+	&:hover,
+	&[data-hover],
+	&[data-focus-visible] {
+		background-color: var(--background-warning);
 	}
 
-	.checkboxRoot {
-		&[data-state='checked'],
-		&[data-state='indeterminate'] {
-			.checkboxWrapper {
-				border-color: var(--color-background-warning-strong);
-				background-color: var(--color-background-warning-strong);
-			}
+	&[data-state='checked'],
+	&[data-state='indeterminate'] {
+		.label {
+			color: var(--font-warning);
+		}
 
-			&:hover,
-			&:focus-visible {
-				background: var(--color-background-warning);
-			}
+		.control {
+			background-color: var(--background-warning-strong);
+			border-color: var(--background-warning-strong);
 		}
 	}
 }

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

@@ -1,6 +1,4 @@
-import type React from 'react';
-import { useId } from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Checkbox } from '@ark-ui/react/checkbox';
 import classNames from 'classnames';
 import styles from './ds-checkbox.module.scss';
 import type { DsCheckboxProps } from './ds-checkbox.types';
@@ -9,47 +7,38 @@ import { DsIcon } from '../ds-icon';
 /**
  * Design system Checkbox component
  */
-const DsCheckbox: React.FC<DsCheckboxProps> = ({
-	id,
+const DsCheckbox = ({
 	variant = 'default',
 	label,
 	labelInfo,
 	className,
-	checked,
-	defaultChecked,
 	onCheckedChange,
+	value,
 	...props
-}) => {
-	const generatedId = useId();
-	const checkboxId = id || generatedId;
-
+}: DsCheckboxProps) => {
 	return (
-		<div className={classNames(styles.container, styles[variant], className)}>
-			<CheckboxPrimitive.Root
-				className={styles.checkboxRoot}
-				id={checkboxId}
-				checked={checked}
-				defaultChecked={defaultChecked}
-				onCheckedChange={onCheckedChange}
-				{...props}
-			>
-				<div className={styles.checkboxWrapper}>
-					<CheckboxPrimitive.Indicator className={styles.checkboxIndicator}>
-						<DsIcon
-							icon={checked === 'indeterminate' ? 'check_indeterminate_small' : 'check_small'}
-							size="small"
-							variant="outlined"
-						/>
-					</CheckboxPrimitive.Indicator>
-				</div>
-			</CheckboxPrimitive.Root>
-			{label && (
-				<label className={styles.label} htmlFor={checkboxId}>
-					{label}
+		<Checkbox.Root
+			className={classNames(styles.root, variant === 'warning' && styles.warning, className)}
+			onCheckedChange={(details) => onCheckedChange?.(details.checked)}
+			{...props}
+			value={value === undefined ? undefined : String(value)}
+		>
+			<Checkbox.Control className={styles.control}>
+				<Checkbox.Indicator className={styles.indicator}>
+					<DsIcon icon="check_small" size="tiny" variant="rounded" />
+				</Checkbox.Indicator>
+				<Checkbox.Indicator className={styles.indicator} indeterminate>
+					<DsIcon icon="check_indeterminate_small" size="tiny" variant="rounded" />
+				</Checkbox.Indicator>
+			</Checkbox.Control>
+			<Checkbox.HiddenInput className={styles.hiddenInput} />
+			{(label || labelInfo) && (
+				<div className={styles.labelColumn}>
+					{label && <Checkbox.Label className={styles.label}>{label}</Checkbox.Label>}
 					{labelInfo && <div className={styles.labelInfo}>{labelInfo}</div>}
-				</label>
+				</div>
 			)}
-		</div>
+		</Checkbox.Root>
 	);
 };
 

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

@@ -1,10 +1,17 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import type { Root } from '@radix-ui/react-checkbox';
+import { type Checkbox } from '@ark-ui/react/checkbox';
 
 export const checkboxVariants = ['default', 'warning'] as const;
 export type CheckboxVariant = (typeof checkboxVariants)[number];
 
-export interface DsCheckboxProps extends ComponentPropsWithoutRef<typeof Root> {
+export interface DsCheckboxProps extends Omit<
+	ComponentPropsWithoutRef<typeof Checkbox.Root>,
+	'onCheckedChange' | 'value'
+> {
+	/**
+	 * Value when used in a group or for form submission. Coerced to string for the native control.
+	 */
+	value?: string | number;
 	/**
 	 * Visual variant of the checkbox
 	 */
@@ -18,17 +25,11 @@ export interface DsCheckboxProps extends ComponentPropsWithoutRef<typeof Root> {
 	 */
 	labelInfo?: ReactNode;
 	/**
-	 * The controlled checked state of the checkbox
-	 */
-	checked?: boolean | 'indeterminate';
-	/**
-	 * The default checked state of the checkbox
+	 * Disables the checkbox, preventing user interaction
 	 */
-	defaultChecked?: boolean | 'indeterminate';
+	disabled?: boolean;
 	/**
-	 * Event handler called when the checked state of the checkbox changes.
-	 *
-	 * @param checked
+	 * Callback invoked when the checked state changes
 	 */
 	onCheckedChange?: (checked: boolean | 'indeterminate') => void;
 }

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

@@ -0,0 +1,13 @@
+.root {
+	display: flex;
+	gap: var(--3xs);
+}
+
+.vertical {
+	flex-direction: column;
+}
+
+.horizontal {
+	flex-direction: row;
+	flex-wrap: wrap;
+}

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

@@ -0,0 +1,20 @@
+import type React from 'react';
+import { Checkbox } from '@ark-ui/react/checkbox';
+import classNames from 'classnames';
+import styles from './ds-checkbox-group.module.scss';
+import type { DsCheckboxGroupProps } from './ds-checkbox-group.types';
+
+const DsCheckboxGroup: React.FC<DsCheckboxGroupProps> = ({
+	orientation = 'vertical',
+	className,
+	children,
+	...props
+}) => {
+	return (
+		<Checkbox.Group className={classNames(styles.root, styles[orientation], className)} {...props}>
+			{children}
+		</Checkbox.Group>
+	);
+};
+
+export default DsCheckboxGroup;

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

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type Checkbox } from '@ark-ui/react/checkbox';
+
+export type DsCheckboxGroupOrientation = 'vertical' | 'horizontal';
+
+export interface DsCheckboxGroupProps extends ComponentPropsWithoutRef<typeof Checkbox.Group> {
+	orientation?: DsCheckboxGroupOrientation;
+}

package/src/components/ds-checkbox-group/hooks/index.ts

@@ -0,0 +1,6 @@
+export { useCheckboxSelectAll } from './use-checkbox-select-all';
+export type {
+	CheckedState,
+	UseCheckboxSelectAllOptions,
+	UseCheckboxSelectAllResult,
+} from './use-checkbox-select-all';

package/src/components/ds-checkbox-group/hooks/use-checkbox-select-all.ts

@@ -0,0 +1,65 @@
+export type CheckedState = boolean | 'indeterminate';
+
+export interface UseCheckboxSelectAllOptions<T> {
+	/** Currently selected values. */
+	value: T[];
+	/** Full set of values represented by the group. */
+	allValues: readonly T[];
+	/** Callback to update selected values. */
+	onValueChange: (next: T[]) => void;
+	/**
+	 * Optional predicate to exclude values from bulk select/deselect.
+	 * Non-selectable values that are already in `value` are preserved on toggle.
+	 */
+	isSelectable?: (value: T) => boolean;
+}
+
+export interface UseCheckboxSelectAllResult {
+	/** Tri-state value for the select-all checkbox. */
+	selectAllState: CheckedState;
+	/** Count of selected values that are also selectable. */
+	selectedCount: number;
+	/** Count of selectable values. */
+	selectableCount: number;
+	/** Handler for the select-all checkbox's `onCheckedChange`. */
+	onSelectAllChange: (checked: CheckedState) => void;
+}
+
+/**
+ * Headless helper for a "select all" checkbox bound to a checkbox group.
+ *
+ * - Derives tri-state (`true` / `false` / `'indeterminate'`) from current selection.
+ * - Toggling selects or clears only selectable values; preserves any already-selected
+ *   non-selectable values so bulk actions don't silently mutate protected items.
+ */
+export function useCheckboxSelectAll<T>({
+	value,
+	allValues,
+	onValueChange,
+	isSelectable,
+}: UseCheckboxSelectAllOptions<T>): UseCheckboxSelectAllResult {
+	const selectableValues = isSelectable ? allValues.filter(isSelectable) : [...allValues];
+	const selectableSet = new Set(selectableValues);
+	const selectedCount = value.reduce((count, v) => (selectableSet.has(v) ? count + 1 : count), 0);
+	const selectableCount = selectableValues.length;
+
+	let selectAllState: CheckedState = 'indeterminate';
+
+	if (selectableCount === 0 || selectedCount === 0) {
+		selectAllState = false;
+	} else if (selectedCount === selectableCount) {
+		selectAllState = true;
+	}
+
+	const onSelectAllChange = (checked: CheckedState) => {
+		const preserved = value.filter((v) => !selectableSet.has(v));
+		onValueChange(checked === true ? [...preserved, ...selectableValues] : preserved);
+	};
+
+	return {
+		selectAllState,
+		selectedCount,
+		selectableCount,
+		onSelectAllChange,
+	};
+}

package/src/components/ds-checkbox-group/index.ts

@@ -0,0 +1,3 @@
+export { default as DsCheckboxGroup } from './ds-checkbox-group';
+export * from './ds-checkbox-group.types';
+export * from './hooks';

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

@@ -3,12 +3,12 @@
 .chip {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
-	padding: 1px var(--spacing-3xs) 1px var(--spacing-xs);
-	background: var(--color-background);
-	border: 1px solid var(--color-border-contrast);
+	gap: var(--3xs);
+	padding: 1px var(--3xs) 1px var(--xs);
+	background: var(--background);
+	border: 1px solid var(--border-contrast);
 	border-radius: 100vmax;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	cursor: default;
 	overflow: hidden;
 	transition:
@@ -20,31 +20,31 @@
 		cursor: pointer;
 
 		&:hover {
-			background: var(--color-background-action-hover-weak);
-			border-color: var(--color-border-action-secondary-hover);
+			background: var(--background-action-hover-weak);
+			border-color: var(--border-action-secondary-hover);
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--color-background-selected);
+			outline: 2px solid var(--background-primary);
 			outline-offset: 2px;
 		}
 	}
 
 	&.small {
-		padding: 0 var(--spacing-4xs) 0 var(--spacing-3xs);
-		gap: var(--spacing-4xs);
+		padding: 0 var(--4xs) 0 var(--3xs);
+		gap: var(--4xs);
 	}
 
 	&[aria-pressed='true'] {
-		background: var(--color-background-selected-weak);
-		border-color: var(--color-border-action-primary);
-		color: var(--color-font-action);
+		background: var(--background-secondary-hover);
+		border-color: var(--border-action-primary);
+		color: var(--font-action);
 	}
 }
 
 .label {
 	@include typography.ellipsis;
-	padding: var(--spacing-4xs) var(--spacing-3xs);
+	padding: var(--4xs) var(--3xs);
 	flex: 1;
 }
 
@@ -54,7 +54,7 @@
 	justify-content: center;
 	border: none;
 	background: transparent;
-	color: var(--color-icon-information-main);
+	color: var(--icon-information-main);
 	cursor: pointer;
 	transition:
 		background-color 0.2s,
@@ -62,10 +62,10 @@
 	flex-shrink: 0;
 
 	&:hover {
-		color: var(--color-icon-secondary);
+		color: var(--icon-action-secondary);
 	}
 
 	.chip.small & {
-		padding: 1px var(--spacing-4xs);
+		padding: 1px var(--4xs);
 	}
 }

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

@@ -1,11 +1,11 @@
 .container {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-standard);
-	padding: var(--spacing-xs) var(--spacing-standard);
-	background: var(--color-background-selected-weak);
-	border: 1px solid var(--color-outline-weak);
-	border-radius: var(--spacing-3xs);
+	gap: var(--standard);
+	padding: var(--xs) var(--standard);
+	background: var(--background-secondary-hover);
+	border: 1px solid var(--outline-weak);
+	border-radius: var(--3xs);
 }
 
 .chipsWrapper {
@@ -13,8 +13,8 @@
 	flex: 1;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--spacing-xs);
-	max-height: var(--spacing-3xl);
+	gap: var(--xs);
+	max-height: var(--3xl);
 	overflow: hidden;
 
 	.hidden {
@@ -25,7 +25,7 @@
 }
 
 .label {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	white-space: nowrap;
 }
 
@@ -35,11 +35,11 @@
 
 .dialog {
 	position: fixed;
-	background: var(--color-background);
-	border: 1px solid var(--color-border-secondary);
-	border-radius: var(--spacing-3xs);
+	background: var(--background);
+	border: 1px solid var(--border-secondary);
+	border-radius: var(--3xs);
 	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
-	padding: var(--spacing-xs);
+	padding: var(--xs);
 	max-height: 80vh;
 	overflow-y: auto;
 	z-index: 1001;

package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.module.scss

@@ -22,11 +22,11 @@ $transition-duration: 0.2s;
 .followingComments {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-sm);
+	gap: var(--sm);
 	flex: 1;
 	overflow-y: auto;
 	min-height: 0;
-	padding: var(--spacing-sm) 0;
+	padding: var(--sm) 0;
 
 	&::-webkit-scrollbar {
 		width: $scrollbar-width;
@@ -37,7 +37,7 @@ $transition-duration: 0.2s;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius-pill;
 		width: $scrollbar-thumb-width;
 	}