@drivenets/design-system 0.19.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -60,28 +60,30 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
+    "@drivenets/eslint-plugin-internal": "0.0.0",
+    "@drivenets/vite-plugin-design-system": "0.0.12",
     "@eslint/compat": "^2.1.1",
-    "@faker-js/faker": "^10.5.0",
-    "@figma/code-connect": "^1.4.9",
-    "@github-ui/storybook-addon-performance-panel": "^1.1.4",
-    "@hookform/resolvers": "^5.4.2",
+    "@faker-js/faker": "^10.6.0",
+    "@figma/code-connect": "^2.0.0",
+    "@github-ui/storybook-addon-performance-panel": "^1.2.0",
+    "@hookform/resolvers": "^5.9.1",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@storybook/addon-a11y": "^10.4.1",
-    "@storybook/addon-docs": "^10.4.1",
-    "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-vitest": "^10.4.1",
-    "@storybook/react-vite": "^10.4.1",
-    "@tanstack/react-query": "^5.101.4",
-    "@tanstack/react-router": "^1.170.18",
-    "@tsdown/css": "^0.22.14",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-mcp": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-router": "^1.170.32",
+    "@tsdown/css": "^0.23.0",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
     "@types/serve-handler": "^6.1.4",
     "@typescript/native": "npm:typescript@^7.0.2",
-    "@vitejs/plugin-react": "^6.0.4",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/browser-playwright": "^5.0.0",
+    "@vitest/coverage-v8": "^5.0.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -89,25 +91,23 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-storybook": "^10.6.0",
     "mockdate": "^3.0.5",
-    "playwright": "^1.62.0",
+    "playwright": "^1.63.0",
     "publint": "^0.3.24",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-hook-form": "^7.83.0",
+    "react-hook-form": "^7.87.0",
     "remark-gfm": "^4.0.1",
-    "sass-embedded": "^1.100.0",
+    "sass-embedded": "^1.104.0",
     "serve-handler": "^6.1.7",
-    "storybook": "^10.4.1",
-    "tsdown": "^0.22.14",
+    "storybook": "^10.6.0",
+    "tsdown": "^0.23.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "npm:@typescript/typescript6",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "8.1.5",
-    "vitest": "^4.1.10",
-    "vitest-browser-react": "^2.1.0",
-    "zod": "^4.4.3",
-    "@drivenets/eslint-plugin-internal": "0.0.0",
-    "@drivenets/vite-plugin-design-system": "0.0.11"
+    "vite": "8.2.2",
+    "vitest": "^5.0.0",
+    "vitest-browser-react": "^2.3.0",
+    "zod": "^4.5.4"
   },
   "scripts": {
     "start": "storybook dev -p 6006",

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

@@ -28,6 +28,9 @@ const state = instance.getEnum('state', {
 const checkedAttr =
 	checked === 'partial' ? 'defaultChecked="indeterminate"' : checked === 'checked' ? 'defaultChecked' : '';
 
+// `size` is not mapped: it lives on `Structure_CheckboxV1`, while the published
+// `DsCheckboxV3` set still exposes only `checked x state x color`. The snippet
+// therefore emits the `medium` default until design bubbles the variant up.
 const attrs = [
 	'label="Label"',
 	color === 'warning' ? 'variant="warning"' : '',

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

@@ -3,7 +3,10 @@
 
 $checkbox-size: 16px;
 $checkbox-border-radius: 2px;
+$checkbox-border-width: 1.5px;
 $checkbox-focus-ring-width: 2px;
+$row-padding-medium: var(--4xs);
+$row-padding-large: var(--xs);
 $transition-duration: 0.2s;
 
 .root {
@@ -11,7 +14,7 @@ $transition-duration: 0.2s;
 	display: inline-flex;
 	align-items: flex-start;
 	gap: var(--3xs);
-	padding: var(--4xs);
+	padding: $row-padding-medium;
 	border-radius: $checkbox-border-radius;
 	cursor: pointer;
 	transition: background-color $transition-duration ease-in-out;
@@ -34,7 +37,7 @@ $transition-duration: 0.2s;
 		flex-shrink: 0;
 		width: $checkbox-size;
 		height: $checkbox-size;
-		border: 1px solid var(--secondary-400);
+		border: $checkbox-border-width solid var(--border-contrast);
 		border-radius: $checkbox-border-radius;
 		background-color: transparent;
 		transition:
@@ -60,7 +63,7 @@ $transition-duration: 0.2s;
 	}
 
 	.label {
-		@include typography.body-sm-reg;
+		@include typography.body-sm-md;
 		line-height: normal;
 		color: var(--font-main);
 	}
@@ -103,24 +106,35 @@ $transition-duration: 0.2s;
 			}
 		}
 	}
-}
 
-// 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;
+	// 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. The control is the row's first child, so the offset is the
+	// root's own padding — which is size-dependent.
+	.hiddenInput {
+		position: absolute !important;
+		inset-block-start: $row-padding-medium !important;
+		inset-inline-start: $row-padding-medium !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;
+	}
+
+	&[data-size='large'] {
+		padding: $row-padding-large;
+
+		.hiddenInput {
+			inset-block-start: $row-padding-large !important;
+			inset-inline-start: $row-padding-large !important;
+		}
+	}
 }
 
 .warning {
@@ -142,3 +156,71 @@ $transition-duration: 0.2s;
 		}
 	}
 }
+
+// Only rendered when `actions` is set, so the plain checkbox keeps its
+// original single-element layout.
+//
+// The row reads as one unit, so the hover surface lives here rather than on
+// `.root`. `.root` is the `<label>`, which ends with the label text — painting
+// there leaves `actions` as a cold gap outside the highlight.
+.wrapper {
+	display: inline-flex;
+	align-items: flex-start;
+	gap: var(--3xs);
+	border-radius: $checkbox-border-radius;
+	transition: background-color $transition-duration ease-in-out;
+
+	// Balances the root's inline padding on the far side of `actions`, so the
+	// highlight is not inset at one end and tight against the pin at the other.
+	padding-inline-end: $row-padding-medium;
+
+	&[data-size='large'] {
+		padding-inline-end: $row-padding-large;
+	}
+
+	&:not([data-disabled]):hover,
+	&:not([data-disabled]):has(.root[data-focus-visible]) {
+		background-color: var(--background-secondary-hover);
+	}
+
+	&[data-variant='warning']:not([data-disabled]):hover,
+	&[data-variant='warning']:not([data-disabled]):has(.root[data-focus-visible]) {
+		background-color: var(--background-warning);
+	}
+
+	&:has(.root[data-focus-visible]) {
+		outline: $checkbox-focus-ring-width solid var(--background-primary-hover);
+		outline-offset: 0;
+	}
+
+	// The wrapper paints the row, so the label half must not paint a second,
+	// narrower highlight or ring inside it.
+	.root {
+		&:hover,
+		&[data-hover],
+		&[data-focus-visible] {
+			background-color: transparent;
+			outline: none;
+		}
+	}
+}
+
+// Matches the height of the root's first row — the control plus the root's
+// block padding — so the slot centres against the control at either size,
+// with or without `labelInfo`.
+//
+// `margin-inline-start: auto` pins the slot to the end of the row whenever the
+// row is wider than its content — a stretched list row, as inside a
+// `DsCheckboxGroup` — matching Figma, where the pin sits at the row's trailing
+// edge rather than hugging the label. It is inert when the row is content-width.
+.actions {
+	display: inline-flex;
+	align-items: center;
+	flex-shrink: 0;
+	margin-inline-start: auto;
+	min-block-size: calc(#{$checkbox-size} + #{$row-padding-medium} * 2);
+
+	&[data-size='large'] {
+		min-block-size: calc(#{$checkbox-size} + #{$row-padding-large} * 2);
+	}
+}

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

@@ -15,19 +15,28 @@ import { DsIcon } from '../ds-icon';
  */
 const DsCheckbox = ({
 	variant = 'default',
+	size = 'medium',
 	label,
 	labelInfo,
+	actions,
 	className,
+	style,
 	onCheckedChange,
 	value,
 	...props
 }: DsCheckboxProps) => {
-	return (
+	// `className` and `style` belong to whichever element is outermost, so they
+	// move to the wrapper when `actions` adds one.
+	const hasActions = Boolean(actions);
+
+	const checkbox = (
 		<Checkbox.Root
-			className={classNames(styles.root, variant === 'warning' && styles.warning, className)}
+			className={classNames(styles.root, variant === 'warning' && styles.warning, !hasActions && className)}
+			style={hasActions ? undefined : style}
 			onCheckedChange={(details) => onCheckedChange?.(details.checked)}
 			{...props}
 			value={value === undefined ? undefined : String(value)}
+			data-size={size}
 		>
 			<Checkbox.Control className={styles.control}>
 				<Checkbox.Indicator className={styles.indicator}>
@@ -46,6 +55,25 @@ const DsCheckbox = ({
 			)}
 		</Checkbox.Root>
 	);
+
+	if (!hasActions) {
+		return checkbox;
+	}
+
+	return (
+		<div
+			className={classNames(styles.wrapper, className)}
+			style={style}
+			data-size={size}
+			data-variant={variant}
+			data-disabled={props.disabled ? '' : undefined}
+		>
+			{checkbox}
+			<div className={styles.actions} data-size={size}>
+				{actions}
+			</div>
+		</div>
+	);
 };
 
 DsCheckbox.displayName = 'DsCheckbox';

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

@@ -4,6 +4,9 @@ import { type Checkbox } from '@ark-ui/react/checkbox';
 export const checkboxVariants = ['default', 'warning'] as const;
 export type CheckboxVariant = (typeof checkboxVariants)[number];
 
+export const checkboxSizes = ['medium', 'large'] as const;
+export type CheckboxSize = (typeof checkboxSizes)[number];
+
 export interface DsCheckboxProps extends Omit<
 	ComponentPropsWithoutRef<typeof Checkbox.Root>,
 	'onCheckedChange' | 'value'
@@ -16,6 +19,7 @@ export interface DsCheckboxProps extends Omit<
 	 * Visual variant of the checkbox
 	 */
 	variant?: CheckboxVariant;
+	size?: CheckboxSize;
 	/**
 	 * Label for the checkbox
 	 */
@@ -24,6 +28,12 @@ export interface DsCheckboxProps extends Omit<
 	 * Additional label info for the checkbox
 	 */
 	labelInfo?: ReactNode;
+	/**
+	 * Trailing slot for interactive content, such as a pin or overflow menu.
+	 * Rendered as a sibling of the checkbox rather than inside it: the checkbox
+	 * root is a `<label>`,
+	 */
+	actions?: ReactNode;
 	/**
 	 * Disables the checkbox, preventing user interaction
 	 */

package/src/components/ds-code-input/collapsed-code-field/collapsed-code-field.module.scss

@@ -0,0 +1,169 @@
+@use '../../../styles/typography' as typography;
+@use '../../../styles/shared/input' as input;
+
+.container {
+	@include input.inputContainer;
+	gap: var(--xs);
+
+	&[data-invalid] {
+		--form-control-border-color: var(--background-error);
+	}
+
+	&.small {
+		height: input.$input-text-height-small;
+		padding-block: var(--none);
+
+		.input,
+		.echo,
+		.input::placeholder {
+			line-height: calc(#{input.$input-text-height-small} - 2px);
+		}
+	}
+
+	&:hover:not([data-disabled]) {
+		border-color: var(--form-control-border-color, var(--background-action-hover));
+	}
+
+	&:focus-within {
+		border-color: var(--form-control-border-color, var(--border-action-primary));
+	}
+}
+
+.field {
+	position: relative;
+	display: flex;
+	flex: 1;
+	align-self: stretch;
+	min-width: 0;
+	cursor: text;
+}
+
+.editorSlot {
+	display: flex;
+	flex: 1;
+	align-self: stretch;
+	min-width: 0;
+}
+
+.editorSlotHidden {
+	position: absolute;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+}
+
+.editorHost {
+	display: flex;
+	flex: 1;
+	align-self: stretch;
+	min-width: 0;
+	height: 100%;
+}
+
+.echo {
+	@include typography.code-sm-reg;
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: baseline;
+	overflow: hidden;
+	color: var(--font-main);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+}
+
+.placeholder {
+	color: var(--font-placeholder);
+}
+
+.input {
+	@include input.input;
+	@include typography.code-sm-reg;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	appearance: none;
+	transition: none;
+	white-space: pre;
+	overflow: hidden;
+	resize: none;
+
+	&:focus,
+	&:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+
+	&::placeholder {
+		@include typography.code-sm-reg;
+		color: var(--font-placeholder);
+	}
+
+	&:disabled {
+		color: var(--font-disabled);
+	}
+}
+
+.container[data-disabled] .echo {
+	color: var(--font-disabled);
+}
+
+.fadeStart,
+.fadeEnd {
+	position: absolute;
+	inset-block: 0;
+	width: var(--xl);
+	pointer-events: none;
+}
+
+.fadeStart {
+	inset-inline-start: 0;
+	background: linear-gradient(to right, var(--background), transparent);
+}
+
+.fadeEnd {
+	inset-inline-end: 0;
+	background: linear-gradient(to left, var(--background), transparent);
+}
+
+.ellipsis {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-end: 0;
+	display: flex;
+	align-items: center;
+	pointer-events: none;
+	color: var(--font-main);
+	background: var(--background);
+
+	&::after {
+		content: '…';
+		@include typography.code-sm-reg;
+	}
+}
+
+.indicator,
+.indicatorButton {
+	@include typography.code-xs-reg;
+	flex: none;
+	color: var(--font-secondary);
+	white-space: nowrap;
+}
+
+.indicatorButton {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--font-main);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--border-action-primary);
+		outline-offset: 2px;
+	}
+}

package/src/components/ds-code-input/collapsed-code-field/collapsed-code-field.tsx

@@ -0,0 +1,92 @@
+import { type ReactNode, type Ref } from 'react';
+import classNames from 'classnames';
+import type { CodeInputSize } from '../ds-code-input.types';
+import type { CollapsedIndicator } from '../use-collapsed-viewport';
+import { DsStack } from '../../ds-stack';
+import styles from './collapsed-code-field.module.scss';
+
+export interface CollapsedCodeFieldProps {
+	size: CodeInputSize;
+	placeholder?: string;
+	disabled: boolean;
+	invalid: boolean;
+	showEcho: boolean;
+	echoText: string;
+	fadeStart: boolean;
+	fadeEnd: boolean;
+	showEllipsis: boolean;
+	indicator: CollapsedIndicator | null;
+	additionalLinesLabel: (count: number) => string;
+	additionalLines: (count: number) => string;
+	linePosition: (current: number, total: number) => string;
+	selectionStatus: (selected: number, total: number) => string;
+	editorSlotRef: Ref<HTMLDivElement>;
+	adornment: ReactNode;
+	className?: string;
+	onExpand: () => void;
+}
+
+const CollapsedCodeField = ({
+	size,
+	placeholder,
+	disabled,
+	invalid,
+	showEcho,
+	echoText,
+	fadeStart,
+	fadeEnd,
+	showEllipsis,
+	indicator,
+	additionalLinesLabel,
+	additionalLines,
+	linePosition,
+	selectionStatus,
+	editorSlotRef,
+	adornment,
+	className,
+	onExpand,
+}: CollapsedCodeFieldProps) => (
+	<div
+		className={classNames(styles.container, styles[size], className)}
+		data-disabled={disabled || undefined}
+		data-invalid={invalid || undefined}
+	>
+		<div className={styles.field}>
+			{/* While expanded, paint a fake line so the overlay can take the real
+			    textarea without the compact row going empty. */}
+			{showEcho && (
+				<div className={classNames(styles.echo, !echoText && styles.placeholder)}>
+					{echoText || placeholder}
+				</div>
+			)}
+			<div
+				ref={editorSlotRef}
+				className={classNames(styles.editorSlot, showEcho && styles.editorSlotHidden)}
+			/>
+			{fadeStart && <div className={styles.fadeStart} aria-hidden />}
+			{fadeEnd && <div className={styles.fadeEnd} aria-hidden />}
+			{showEllipsis && !showEcho && <div className={styles.ellipsis} aria-hidden />}
+		</div>
+		<DsStack direction="row" alignItems="center" flex="none" gap="var(--xs)">
+			{indicator?.kind === 'plusN' && (
+				<button
+					type="button"
+					className={styles.indicatorButton}
+					aria-label={additionalLinesLabel(indicator.count)}
+					onClick={onExpand}
+				>
+					{additionalLines(indicator.count)}
+				</button>
+			)}
+			{indicator?.kind === 'line' && (
+				<span className={styles.indicator}>{linePosition(indicator.current, indicator.total)}</span>
+			)}
+			{indicator?.kind === 'selection' && (
+				<span className={styles.indicator}>{selectionStatus(indicator.selected, indicator.total)}</span>
+			)}
+			{adornment}
+		</DsStack>
+	</div>
+);
+
+export default CollapsedCodeField;

package/src/components/ds-code-input/collapsed-code-field/index.ts

@@ -0,0 +1 @@
+export { default as CollapsedCodeField } from './collapsed-code-field';