@drivenets/design-system 0.7.1 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -36,7 +36,7 @@
     "directory": "/packages/design-system"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.34.0",
+    "@ark-ui/react": "^5.34.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -51,9 +51,9 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.19",
-    "@zag-js/react": "^1.35.2",
-    "@zag-js/steps": "^1.35.2",
+    "@tanstack/react-virtual": "^3.13.21",
+    "@zag-js/react": "^1.35.3",
+    "@zag-js/steps": "^1.35.3",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -64,57 +64,61 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
-    "@eslint/compat": "^2.0.2",
+    "@eslint/compat": "^2.0.3",
     "@faker-js/faker": "^10.3.0",
     "@hookform/resolvers": "^5.2.2",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@storybook/addon-a11y": "^10.2.13",
-    "@storybook/addon-docs": "^10.2.13",
-    "@storybook/addon-vitest": "^10.2.13",
-    "@storybook/builder-vite": "^10.2.13",
-    "@storybook/react-vite": "^10.2.13",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-vitest": "^10.2.19",
+    "@storybook/builder-vite": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.163.3",
+    "@tanstack/react-router": "^1.166.2",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.13",
-    "jsdom": "^28.1.0",
+    "eslint-plugin-storybook": "^10.2.19",
     "mockdate": "^3.0.5",
     "playwright": "^1.58.2",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-modules": "^6.0.1",
-    "publint": "^0.3.17",
+    "publint": "^0.3.18",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.2",
     "rollup-plugin-sass": "^1.15.3",
     "sass-embedded": "^1.97.3",
-    "storybook": "^10.2.13",
-    "tsdown": "^0.20.3",
+    "storybook": "^10.2.19",
+    "tsdown": "^0.21.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0",
+    "vitest-browser-react": "^2.1.0",
     "zod": "^4.3.6",
+    "@drivenets/eslint-plugin-internal": "0.0.0",
     "@drivenets/vite-plugin-design-system": "0.0.6"
   },
   "scripts": {
+    "install:playwright": "pnpm exec playwright install chromium --with-deps",
     "lint": "pnpm generate-scss-dts && eslint --max-warnings=0 .; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
     "typecheck": "pnpm generate-scss-dts && tsc; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
     "generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
     "storybook": "storybook dev -p 6006",
     "test": "vitest --project=\"!requires-build\"",
     "test:coverage": "pnpm test --coverage",
+    "test:unit": "vitest --project=unit",
+    "test:browser": "vitest --project=browser",
     "test:requires-build": "vitest --project=requires-build",
     "build": "tsdown",
     "build:watch": "pnpm build --watch",

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

@@ -6,7 +6,7 @@ import styles from './ds-breadcrumb.module.scss';
 import type { DsBreadcrumbProps } from './ds-breadcrumb.types';
 import { DsIcon } from '../ds-icon';
 import { DsDropdownMenu } from '../ds-dropdown-menu';
-import { DsTextInput } from '../ds-text-input/index';
+import { DsTextInput } from '../ds-text-input';
 import { DsTypography } from '../ds-typography';
 
 /**

package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.tsx

@@ -5,6 +5,7 @@ import type { DsButtonProps } from './ds-button-legacy.types';
 
 /**
  * Design system Button component
+ * @deprecated Use [DsButton](../ds-button-new/ds-button-new.tsx) instead.
  */
 const DsButton: React.FC<DsButtonProps> = ({
 	schema = 'primary',

package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss

@@ -1,5 +1,6 @@
 @use '../../../../styles/typography';
 
+$button-size-tiny: 16px;
 $button-size-small: 28px;
 $button-size-default: 32px;
 $button-size-large: 40px;
@@ -29,6 +30,13 @@ $button-size-large: 40px;
 		flex-grow: 1;
 	}
 
+	&.tiny .content {
+		@include typography.body-xs-md;
+		height: $button-size-tiny;
+		border-radius: var(--spacing-4xs);
+		--icon-width-tiny: 13px;
+	}
+
 	&.small .content {
 		@include typography.body-xs-md;
 		height: $button-size-small;
@@ -66,6 +74,11 @@ $button-size-large: 40px;
 			height: $button-size-small;
 			width: $button-size-small;
 		}
+
+		&.tiny .content {
+			height: $button-size-tiny;
+			width: $button-size-tiny;
+		}
 	}
 
 	&.primary-filled {

package/src/components/ds-button/versions/ds-button-new/ds-button-new.tsx

@@ -3,7 +3,7 @@ import type React from 'react';
 import { Children, isValidElement } from 'react';
 import styles from './ds-button-new.module.scss';
 import type { DsButtonProps } from './ds-button-new.types';
-import DsIcon from '../../../ds-icon/ds-icon';
+import { DsIcon } from '../../../ds-icon';
 
 const isIconOnly = (children: React.ReactNode) => {
 	if (Children.count(children) !== 1) {

package/src/components/ds-button/versions/ds-button-new/ds-button-new.types.ts

@@ -6,7 +6,7 @@ export type ButtonType = (typeof buttonTypes)[number];
 export const buttonVariants = ['filled', 'ghost', 'danger', 'dark'] as const;
 export type ButtonVariant = (typeof buttonVariants)[number];
 
-export const buttonSizes = ['large', 'medium', 'small'] as const;
+export const buttonSizes = ['large', 'medium', 'small', 'tiny'] as const;
 export type ButtonSize = (typeof buttonSizes)[number];
 
 export interface DsButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

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

@@ -18,11 +18,11 @@
 		}
 	}
 
-	&:has(.checkboxRoot:focus-visible) {
+	&:has(.label):has(.checkboxRoot:focus-visible) {
 		border-color: var(--color-background-selected);
 	}
 
-	&:has([data-state='unchecked']:focus-visible) {
+	&:has(.label):has([data-state='unchecked']:focus-visible) {
 		border-color: var(--color-background-selected-hover);
 	}
 }
@@ -62,7 +62,8 @@
 			background-color: var(--color-background-selected);
 		}
 
-		&:hover {
+		&:hover,
+		&:focus-visible {
 			background: var(--color-background-action-secondary-hover);
 		}
 	}
@@ -72,7 +73,8 @@
 			border-color: var(--color-background-deselected);
 		}
 
-		&:hover {
+		&:hover,
+		&:focus-visible {
 			background: var(--color-background-action-hover-weak);
 		}
 	}
@@ -83,7 +85,8 @@
 			background-color: var(--color-background-selected);
 		}
 
-		&:hover {
+		&:hover,
+		&:focus-visible {
 			background: var(--color-background-action-secondary-hover);
 		}
 	}
@@ -128,3 +131,31 @@
 	cursor: pointer;
 	width: 100%;
 }
+
+.default {
+	border-color: transparent;
+}
+
+.warning {
+	&:has([data-state='checked']),
+	&:has([data-state='indeterminate']) {
+		.label {
+			color: var(--color-font-warning);
+		}
+	}
+
+	.checkboxRoot {
+		&[data-state='checked'],
+		&[data-state='indeterminate'] {
+			.checkboxWrapper {
+				border-color: var(--color-background-warning-strong);
+				background-color: var(--color-background-warning-strong);
+			}
+
+			&:hover,
+			&:focus-visible {
+				background: var(--color-background-warning);
+			}
+		}
+	}
+}

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

@@ -11,6 +11,7 @@ import { DsIcon } from '../ds-icon';
  */
 const DsCheckbox: React.FC<DsCheckboxProps> = ({
 	id,
+	variant = 'default',
 	label,
 	labelInfo,
 	className,
@@ -23,7 +24,7 @@ const DsCheckbox: React.FC<DsCheckboxProps> = ({
 	const checkboxId = id || generatedId;
 
 	return (
-		<div className={classNames(styles.container, className)}>
+		<div className={classNames(styles.container, styles[variant], className)}>
 			<CheckboxPrimitive.Root
 				className={styles.checkboxRoot}
 				id={checkboxId}

package/src/components/ds-checkbox/{ds-checkbox.types.tsx → ds-checkbox.types.ts}

@@ -1,7 +1,14 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { Root } from '@radix-ui/react-checkbox';
 
+export const checkboxVariants = ['default', 'warning'] as const;
+export type CheckboxVariant = (typeof checkboxVariants)[number];
+
 export interface DsCheckboxProps extends ComponentPropsWithoutRef<typeof Root> {
+	/**
+	 * Visual variant of the checkbox
+	 */
+	variant?: CheckboxVariant;
 	/**
 	 * Label for the checkbox
 	 */

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

@@ -7,7 +7,7 @@ import styles from './ds-chip-group.module.scss';
 import type { DsChipGroupProps } from './ds-chip-group.types';
 import { useChipRowCalculation } from './hooks/use-chip-row-calculation';
 import { DsTypography } from '../ds-typography';
-import DsChip from '../ds-chip/ds-chip';
+import { DsChip } from '../ds-chip';
 import { DsCheckbox } from '../ds-checkbox';
 import { DsButton } from '../ds-button';
 import { DsIcon } from '../ds-icon';

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

@@ -1,29 +1,10 @@
 $avatar-size: 24px;
 $avatar-fallback-font-size: 10px;
 $header-height: 24px;
-$icon-button-size: 16px;
 $dropdown-min-width: 180px;
 $border-radius-circle: 50%;
 $transition-duration: 0.2s;
 
-@mixin icon-button-size {
-	&#{&} {
-		width: $icon-button-size;
-		height: $icon-button-size;
-		min-width: $icon-button-size;
-		min-height: $icon-button-size;
-		padding: 0;
-		border: none;
-	}
-}
-
-.iconButtonContent {
-	height: $icon-button-size !important;
-	min-height: $icon-button-size !important;
-	padding: 0 !important;
-	border: none !important;
-}
-
 .threadItem {
 	display: flex;
 	gap: var(--spacing-lg);
@@ -120,10 +101,6 @@ $transition-duration: 0.2s;
 	transition: opacity $transition-duration ease;
 }
 
-.actionButton {
-	@include icon-button-size;
-}
-
 .editContainer {
 	width: 100%;
 	align-self: stretch;

package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.tsx

@@ -97,14 +97,7 @@ export const DsThreadItem = ({
 					{hasEditActions && (
 						<DsDropdownMenu.Root>
 							<DsDropdownMenu.Trigger asChild>
-								<DsButton
-									design="v1.2"
-									buttonType="tertiary"
-									size="small"
-									aria-label="More actions"
-									className={styles.actionButton}
-									contentClassName={styles.iconButtonContent}
-								>
+								<DsButton design="v1.2" buttonType="tertiary" size="tiny" aria-label="More actions">
 									<DsIcon icon="more_vert" size="tiny" />
 								</DsButton>
 							</DsDropdownMenu.Trigger>
@@ -131,11 +124,9 @@ export const DsThreadItem = ({
 						<DsButton
 							design="v1.2"
 							buttonType="tertiary"
-							size="small"
+							size="tiny"
 							onClick={() => onResolved(id)}
 							aria-label="Mark message as resolved"
-							className={styles.actionButton}
-							contentClassName={styles.iconButtonContent}
 						>
 							<DsIcon icon="check_circle" size="tiny" />
 						</DsButton>

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

@@ -8,33 +8,13 @@ $input-min-height-initial: 20px;
 $input-min-height-typing: 40px;
 $input-min-height-thread: 28px;
 $input-max-height: 480px;
-$icon-button-size: 16px;
 $scrollbar-width-textarea: 4px;
 $scrollbar-border-radius-pill: 100px;
 $dropdown-min-width: 160px;
 $border-width: 1px;
-$checkbox-border-radius: 2px;
 
 $transition-duration: 0.2s;
 
-@mixin icon-button-size {
-	&#{&} {
-		width: $icon-button-size;
-		height: $icon-button-size;
-		min-width: $icon-button-size;
-		min-height: $icon-button-size;
-		padding: 0;
-		border: none;
-	}
-}
-
-.iconButtonContent {
-	height: $icon-button-size !important;
-	min-height: $icon-button-size !important;
-	padding: 0 !important;
-	border: none !important;
-}
-
 .bubble {
 	display: flex;
 	flex-direction: column;
@@ -180,11 +160,6 @@ $transition-duration: 0.2s;
 	}
 }
 
-.headerActionButton {
-	@include icon-button-size;
-	opacity: 1;
-}
-
 .inputArea {
 	display: flex;
 	align-items: center;
@@ -252,20 +227,6 @@ $transition-duration: 0.2s;
 	padding: var(--spacing-xs) 0;
 }
 
-.actionRequiredCheckbox {
-	&.checked {
-		[data-state='checked'] {
-			background: var(--color-background-warning-strong);
-			border-color: var(--color-border-warning);
-			border-radius: $checkbox-border-radius;
-		}
-
-		label {
-			color: var(--color-font-warning);
-		}
-	}
-}
-
 .sendButton {
 	flex-shrink: 0;
 }

package/src/components/ds-comment-bubble/ds-comment-bubble.tsx

@@ -9,7 +9,7 @@ import { DsIcon } from '../ds-icon';
 import { DsTag } from '../ds-tag';
 import { DsDropdownMenu } from '../ds-dropdown-menu';
 import { useClickOutside, useAutoResize } from './hooks';
-import { mergeRefs } from '../ds-table/utils/merge-refs';
+import { mergeRefs } from '../../utils/merge-refs';
 
 export const DsCommentBubble = ({
 	ref,
@@ -125,14 +125,7 @@ export const DsCommentBubble = ({
 						<div className={styles.headerActions}>
 							<DsDropdownMenu.Root>
 								<DsDropdownMenu.Trigger asChild>
-									<DsButton
-										design="v1.2"
-										buttonType="tertiary"
-										size="small"
-										aria-label="More actions"
-										className={styles.headerActionButton}
-										contentClassName={styles.iconButtonContent}
-									>
+									<DsButton design="v1.2" buttonType="tertiary" size="tiny" aria-label="More actions">
 										<DsIcon icon="more_vert" size="tiny" />
 									</DsButton>
 								</DsDropdownMenu.Trigger>
@@ -159,11 +152,9 @@ export const DsCommentBubble = ({
 								<DsButton
 									design="v1.2"
 									buttonType="tertiary"
-									size="small"
+									size="tiny"
 									onClick={() => onResolve()}
 									aria-label="Resolve"
-									className={styles.headerActionButton}
-									contentClassName={styles.iconButtonContent}
 								>
 									<DsIcon icon="check_circle" size="tiny" />
 								</DsButton>
@@ -174,10 +165,8 @@ export const DsCommentBubble = ({
 							<DsButton
 								design="v1.2"
 								buttonType="tertiary"
-								size="small"
+								size="tiny"
 								onClick={() => onClose()}
-								className={styles.headerActionButton}
-								contentClassName={styles.iconButtonContent}
 								aria-label="Close"
 							>
 								<DsIcon icon="close" size="tiny" />
@@ -214,7 +203,14 @@ export const DsCommentBubble = ({
 				</div>
 
 				{(isInitialMode || hasThread) && (
-					<DsButton design="v1.2" size="small" disabled={!hasContent} onClick={handleSend} aria-label="Send">
+					<DsButton
+						design="v1.2"
+						buttonType="tertiary"
+						size="tiny"
+						disabled={!hasContent}
+						onClick={handleSend}
+						aria-label="Send"
+					>
 						<DsIcon icon="send" size="tiny" />
 					</DsButton>
 				)}
@@ -223,15 +219,20 @@ export const DsCommentBubble = ({
 			{showFooter && (
 				<div className={styles.footer}>
 					<DsCheckbox
+						variant="warning"
 						label="Action required"
 						checked={actionRequired}
 						onCheckedChange={(checked) => onActionRequiredChange?.(checked === true)}
-						className={classNames(styles.actionRequiredCheckbox, {
-							[styles.checked]: actionRequired,
-						})}
 					/>
 
-					<DsButton design="v1.2" size="small" disabled={!hasContent} onClick={handleSend} aria-label="Send">
+					<DsButton
+						design="v1.2"
+						buttonType="tertiary"
+						size="tiny"
+						disabled={!hasContent}
+						onClick={handleSend}
+						aria-label="Send"
+					>
 						<DsIcon icon="send" size="tiny" />
 					</DsButton>
 				</div>

package/src/components/ds-comment-card/ds-comment-card.tsx

@@ -101,7 +101,7 @@ export const DsCommentCard = ({
 							{showMoreMenu && (
 								<DsDropdownMenu.Root>
 									<DsDropdownMenu.Trigger asChild>
-										<DsButton design="v1.2" buttonType="tertiary" size="small" aria-label="More actions">
+										<DsButton design="v1.2" buttonType="tertiary" size="tiny" aria-label="More actions">
 											<DsIcon icon="more_vert" size="tiny" />
 										</DsButton>
 									</DsDropdownMenu.Trigger>
@@ -139,7 +139,7 @@ export const DsCommentCard = ({
 								<DsButton
 									design="v1.2"
 									buttonType="tertiary"
-									size="small"
+									size="tiny"
 									onClick={handleResolve}
 									aria-label="Resolve comment"
 								>

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

@@ -1,4 +1,4 @@
-import DsModal from '../ds-modal/ds-modal';
+import { DsModal } from '../ds-modal';
 import type { DsConfirmationProps } from './ds-confirmation.types';
 
 /**

package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -10,7 +10,7 @@
 	width: auto;
 
 	&:focus-visible {
-		outline-offset: 2px;
+		outline: 0;
 	}
 
 	&[hidden] {

package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -6,8 +6,8 @@ import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import styles from './ds-dropdown-menu.module.scss';
 import { DsIcon } from '../ds-icon';
-import DsTypography from '../ds-typography/ds-typography';
-import DsTextInput from '../ds-text-input/ds-text-input';
+import { DsTypography } from '../ds-typography';
+import { DsTextInput } from '../ds-text-input';
 import type {
 	DsDropdownMenuActionsProps,
 	DsDropdownMenuContentProps,

package/src/components/ds-expandable-text-input/ds-expandable-text-input.tsx

@@ -3,7 +3,7 @@ import { DsTextInput } from '../ds-text-input';
 import { DsIcon } from '../ds-icon';
 import classNames from 'classnames';
 import styles from './ds-expandable-text-input.module.scss';
-import { mergeRefs } from '../ds-table/utils/merge-refs';
+import { mergeRefs } from '../../utils/merge-refs';
 import type { DsExpandableTextInputProps } from './ds-expandable-text-input.types';
 import { DsButton } from '../ds-button';
 
@@ -11,6 +11,7 @@ export function DsExpandableTextInput({
 	onClear,
 	onExpandChange,
 	icon,
+	size,
 	...props
 }: DsExpandableTextInputProps) {
 	const hasInitialValue = Boolean(props.value ?? props.defaultValue);
@@ -29,9 +30,12 @@ export function DsExpandableTextInput({
 		}
 	};
 
+	const clearButtonSize = size === 'small' ? 'tiny' : 'small';
+
 	return (
 		<DsTextInput
 			{...props}
+			size={size}
 			ref={mergeRefs(ref, props.ref)}
 			tabIndex={expanded ? 0 : -1}
 			className={classNames(
@@ -80,7 +84,7 @@ export function DsExpandableTextInput({
 				endAdornment: (
 					<DsButton
 						design="v1.2"
-						size="small"
+						size={clearButtonSize}
 						buttonType="tertiary"
 						variant="filled"
 						className={styles.clearTrigger}

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

@@ -2,7 +2,7 @@ import type React from 'react';
 import { SegmentGroup } from '@ark-ui/react/segment-group';
 import classNames from 'classnames';
 import styles from './ds-segment-group.module.scss';
-import DsTypography from '../ds-typography/ds-typography';
+import { DsTypography } from '../ds-typography';
 import {
 	type DsSegmentGroupItemProps,
 	type DsSegmentGroupItemTextProps,