@drivenets/design-system 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -54,7 +54,8 @@
     "@tanstack/react-virtual": "^3.13.23",
     "@zag-js/react": "^1.37.0",
     "@zag-js/steps": "^1.37.0",
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "csstype": "^3.2.3"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",
@@ -67,13 +68,14 @@
     "@eslint/compat": "^2.0.3",
     "@faker-js/faker": "^10.3.0",
     "@hookform/resolvers": "^5.2.2",
-    "@rolldown/plugin-babel": "^0.2.1",
+    "@rolldown/plugin-babel": "^0.2.2",
     "@storybook/addon-a11y": "^10.2.19",
     "@storybook/addon-docs": "^10.2.19",
     "@storybook/addon-vitest": "^10.2.19",
     "@storybook/react-vite": "^10.2.19",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.166.2",
+    "@tsdown/css": "^0.21.6",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -88,29 +90,28 @@
     "eslint-plugin-storybook": "^10.2.19",
     "mockdate": "^3.0.5",
     "playwright": "^1.58.2",
-    "postcss": "^8.5.8",
-    "postcss-modules": "^6.0.1",
     "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.19",
-    "tsdown": "^0.21.0",
+    "tsdown": "^0.21.6",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^8.0.0",
+    "vite": "8.0.5",
     "vitest": "^4.1.0",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.3.6",
-    "@drivenets/vite-plugin-design-system": "0.0.6",
-    "@drivenets/eslint-plugin-internal": "0.0.0"
+    "@drivenets/eslint-plugin-internal": "0.0.0",
+    "@drivenets/vite-plugin-design-system": "0.0.7"
   },
   "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",
+    "lint": "pnpm generate-scss-dts && eslint --max-warnings=0 ${ESLINT_ARGS-} .; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
+    "//": "ESLINT_ARGS is used to pass arguments to eslint. We're using it so we don't need to duplicate the lint script.",
+    "lint:fix": "ESLINT_ARGS=--fix pnpm lint",
     "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",

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

@@ -200,7 +200,6 @@ $autocomplete-opacity-visible: 1;
 .disabled {
 	.control {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
 		border-color: var(--color-border-disabled);
 		cursor: not-allowed;
 

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

@@ -5,6 +5,27 @@ $button-size-small: 28px;
 $button-size-default: 32px;
 $button-size-large: 40px;
 
+@mixin content-size-tiny {
+	@include typography.body-xs-md;
+	height: $button-size-tiny;
+	border-radius: var(--spacing-4xs);
+	--icon-width-tiny: 13px;
+}
+
+@mixin content-size-small {
+	@include typography.body-xs-md;
+	height: $button-size-small;
+}
+
+@mixin content-size-medium {
+	height: $button-size-default;
+}
+
+@mixin content-size-large {
+	@include typography.body-md-md;
+	height: $button-size-large;
+}
+
 .button {
 	@include typography.body-sm-md;
 	display: flex;
@@ -31,24 +52,19 @@ $button-size-large: 40px;
 	}
 
 	&.tiny .content {
-		@include typography.body-xs-md;
-		height: $button-size-tiny;
-		border-radius: var(--spacing-4xs);
-		--icon-width-tiny: 13px;
+		@include content-size-tiny;
 	}
 
 	&.small .content {
-		@include typography.body-xs-md;
-		height: $button-size-small;
+		@include content-size-small;
 	}
 
 	&.medium .content {
-		height: $button-size-default;
+		@include content-size-medium;
 	}
 
 	&.large .content {
-		@include typography.body-md-md;
-		height: $button-size-large;
+		@include content-size-large;
 	}
 
 	&.iconButton {

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

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 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 type { DsButtonBaseProps } from './ds-button-new.types';
 import { DsIcon } from '../../../ds-icon';
 
 const isIconOnly = (children: React.ReactNode) => {
@@ -19,7 +20,7 @@ const isIconOnly = (children: React.ReactNode) => {
 /**
  * Design system Button component
  */
-const DsButton: React.FC<DsButtonProps> = ({
+const DsButton: React.FC<DsButtonBaseProps> = ({
 	buttonType,
 	variant = 'filled',
 	size = 'medium',
@@ -36,9 +37,8 @@ const DsButton: React.FC<DsButtonProps> = ({
 		styles[size],
 		className,
 
-		// @ts-expect-error: we don't have all variations of classnames defined
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-		styles[`${type}-${variant}`],
+		// Casting because we don't have all variations of classnames defined
+		styles[`${type}-${variant}` as keyof typeof styles],
 	);
 
 	return (

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

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type { ResponsiveValue } from '../../../../utils/responsive';
+
 export const buttonTypes = ['primary', 'secondary', 'secondary-light', 'tertiary'] as const;
 export type ButtonType = (typeof buttonTypes)[number];
 
@@ -9,7 +11,7 @@ export type ButtonVariant = (typeof buttonVariants)[number];
 export const buttonSizes = ['large', 'medium', 'small', 'tiny'] as const;
 export type ButtonSize = (typeof buttonSizes)[number];
 
-export interface DsButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface DsButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	/**
 	 * Type of the button
 	 * @default 'primary'
@@ -39,3 +41,11 @@ export interface DsButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElem
 	 */
 	contentClassName?: string;
 }
+
+export interface DsButtonProps extends Omit<DsButtonBaseProps, 'size'> {
+	/**
+	 * Size of the button. Accepts a static value or a responsive object.
+	 * @default 'medium'
+	 */
+	size?: ResponsiveValue<ButtonSize>;
+}

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

@@ -1,2 +1,5 @@
-export { default as DsButtonNew } from './ds-button-new';
+import { withResponsiveProps } from '../../../../utils/responsive';
+import DsButtonBase from './ds-button-new';
+
+export const DsButtonNew = withResponsiveProps(DsButtonBase, ['size']);
 export * from './ds-button-new.types';

package/src/components/ds-button-v3/ds-button-v3.module.scss

@@ -0,0 +1,391 @@
+@use '../../styles/root_updated';
+@use '../../styles/shared/button' as button;
+
+$height-large: 40px;
+$height-medium: 36px;
+$height-small: 28px;
+$border-radius: 4px;
+$focus-ring-width: 2px;
+
+@mixin focus-ring($outer-color) {
+	outline: $focus-ring-width solid $outer-color;
+}
+
+.root {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--3xs);
+	margin: 0;
+	border: 1px solid transparent;
+	border-radius: $border-radius;
+	background: transparent;
+	font-family: var(--font-family-base);
+	font-weight: var(--font-weight-medium);
+	text-align: center;
+	cursor: pointer;
+	transition:
+		background-color button.$transition-duration-default,
+		border-color button.$transition-duration-quick,
+		color button.$transition-duration-default,
+		outline-color button.$transition-duration-quick;
+
+	&:disabled:not([data-loading]) {
+		cursor: not-allowed;
+	}
+
+	&[data-loading] {
+		cursor: default;
+		pointer-events: none;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline-style: solid;
+	}
+
+	&[data-size='large'] {
+		padding: var(--3xs) var(--sm);
+		min-height: $height-large;
+		font-size: var(--font-size-md);
+		line-height: var(--line-height-md);
+	}
+
+	&[data-size='medium'] {
+		padding: var(--3xs) var(--sm);
+		min-height: $height-medium;
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-sm);
+	}
+
+	&[data-size='small'] {
+		padding: var(--3xs) var(--sm);
+		min-height: $height-small;
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-xs);
+	}
+
+	&[data-size='tiny'] {
+		min-height: var(--icon-width-tiny);
+		padding: 0 var(--3xs);
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-xs);
+	}
+
+	&[data-icon-only][data-size='large'] {
+		padding: var(--3xs);
+		min-width: $height-large;
+	}
+
+	&[data-icon-only][data-size='medium'] {
+		padding: var(--3xs);
+		min-width: $height-medium;
+	}
+
+	&[data-icon-only][data-size='small'] {
+		padding: var(--3xs);
+		min-width: $height-small;
+	}
+
+	&[data-icon-only][data-size='tiny'] {
+		padding: 0;
+		min-width: var(--icon-width-tiny);
+	}
+}
+
+.root[data-color='default'][data-variant='primary'] {
+	background-color: var(--background-background-primary);
+	color: var(--font-font-on-action);
+	border-color: transparent;
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-primary-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-primary-selected);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-border-action-primary));
+
+		background-color: var(--background-background-primary-hover);
+		border-color: var(--border-border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-primary-selected);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-background-disable);
+		color: var(--font-font-on-action);
+	}
+}
+
+.root[data-color='default'][data-variant='secondary'] {
+	background-color: var(--background-background-action-secondary);
+	color: var(--font-font-main);
+	border-color: var(--border-border);
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-secondary-hover);
+		color: var(--font-font-action-secondary);
+		border-color: var(--border-border-secondary-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-action-secondary-hover);
+		color: var(--font-font-action-secondary);
+		border-color: var(--border-border-secondary-hover);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-border-action-primary-hover));
+
+		background-color: var(--background-background-secondary-hover);
+		border-color: var(--border-border-inverse);
+		color: var(--font-font-action-secondary);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-action-secondary-hover);
+		color: var(--font-font-action-secondary);
+		border-color: var(--border-border-secondary-hover);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-background-action-secondary);
+		color: var(--font-font-disabled);
+		border-color: var(--border-border-disabled);
+	}
+}
+
+.root[data-color='default'][data-variant='tertiary'] {
+	background-color: transparent;
+	color: var(--font-font-main);
+	border-color: transparent;
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-secondary-hover);
+		color: var(--font-font-action-secondary);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-action-secondary-hover);
+		color: var(--font-font-action-secondary);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-border-action-primary-hover));
+
+		background-color: var(--background-background-secondary-hover);
+		border-color: var(--border-border-inverse);
+		color: var(--font-font-action-secondary);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-action-secondary-hover);
+		color: var(--font-font-action-secondary);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: transparent;
+		color: var(--font-font-disabled);
+	}
+}
+
+.root[data-color='negative'][data-variant='primary'] {
+	background-color: var(--background-background-negative);
+	color: var(--font-font-on-action);
+	border-color: transparent;
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-negative-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-negative-selected);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-border-negative));
+
+		background-color: var(--background-background-negative-hover);
+		border-color: var(--border-border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-negative-selected);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-background-disable);
+		color: var(--font-font-on-action);
+	}
+}
+
+.root[data-color='negative'][data-variant='secondary'] {
+	background-color: var(--background-background-action-secondary);
+	color: var(--font-font-negative);
+	border-color: var(--border-border-negative);
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-negative-secondary-hover);
+		border-color: var(--border-border-negative-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-negative-secondary-selected);
+		border-color: var(--border-border-negative-hover);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-border-negative));
+
+		background-color: var(--background-background-negative-secondary-hover);
+		border-color: var(--border-border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-negative-secondary-selected);
+		border-color: var(--border-border-negative-hover);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-background-action-secondary);
+		color: var(--font-font-disabled);
+		border-color: var(--border-border-disabled);
+	}
+}
+
+.root[data-color='negative'][data-variant='tertiary'] {
+	background-color: transparent;
+	color: var(--font-font-negative);
+	border-color: transparent;
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-negative-secondary-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-negative-secondary-selected);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-border-negative));
+
+		background-color: var(--background-background-negative-secondary-hover);
+		border-color: var(--border-border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-negative-secondary-selected);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: transparent;
+		color: var(--font-font-disabled);
+	}
+}
+
+.root[data-color='light'][data-variant='primary'] {
+	background-color: var(--background-background-ondark-primary);
+	color: var(--font-font-on-action);
+	border-color: transparent;
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-ondark-primary-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-ondark-primary-selected);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--outline-outline-inverse));
+
+		background-color: var(--background-background-ondark-primary-hover);
+		border-color: var(--border-border-action-secondary);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-ondark-primary-selected);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-background-ondark-disabled);
+		color: var(--font-font-disabled);
+	}
+}
+
+.root[data-color='light'][data-variant='secondary'] {
+	background-color: transparent;
+	color: var(--font-font-on-action);
+	border-color: var(--border-border-ondark-secondary);
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-ondark-secondary-hover);
+		color: var(--font-font-on-action);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-ondark-secondary-selected);
+		color: var(--font-font-on-action);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--outline-outline-inverse));
+
+		background-color: var(--background-background-ondark-secondary-hover);
+		border-color: var(--border-border-action-secondary);
+		color: var(--font-font-on-action);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-ondark-secondary-selected);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: transparent;
+		color: var(--font-font-ondark-disabled);
+		border-color: var(--background-background-ondark-disabled);
+	}
+}
+
+.root[data-color='light'][data-variant='tertiary'] {
+	background-color: transparent;
+	color: var(--font-font-on-action);
+	border-color: transparent;
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-background-ondark-secondary-hover);
+		color: var(--font-font-on-action);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-background-ondark-secondary-selected);
+		color: var(--font-font-on-action);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--outline-outline-inverse));
+
+		background-color: var(--background-background-ondark-secondary-hover);
+		border-color: var(--border-border-action-secondary);
+		color: var(--font-font-on-action);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-background-ondark-secondary-selected);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: transparent;
+		color: var(--font-font-ondark-disabled);
+	}
+}

package/src/components/ds-button-v3/ds-button-v3.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { DsIcon, type IconSize } from '../ds-icon';
+import { DsSpinner } from '../ds-spinner';
+import styles from './ds-button-v3.module.scss';
+import type { ButtonV3Size, DsButtonV3Props } from './ds-button-v3.types.ts';
+
+const iconSizeMap: Record<ButtonV3Size, IconSize> = Object.freeze({
+	large: 'small',
+	medium: 'tiny',
+	small: 'tiny',
+	tiny: 'tiny',
+});
+
+const DsButtonV3 = ({
+	ref,
+	className,
+	style,
+	children,
+	icon,
+	disabled,
+	loading = false,
+	color = 'default',
+	variant = 'primary',
+	size = 'medium',
+	selected = false,
+	type = 'button',
+	...rest
+}: DsButtonV3Props) => {
+	const isIconOnly = icon !== undefined && !children;
+
+	return (
+		<button
+			ref={ref}
+			// eslint-disable-next-line react/button-has-type -- Dynamic by nature of this component
+			type={type}
+			disabled={disabled || loading}
+			aria-busy={loading || undefined}
+			aria-pressed={selected}
+			className={classNames(styles.root, className)}
+			style={style}
+			data-color={color}
+			data-variant={variant}
+			data-size={size}
+			data-selected={selected ? 'true' : undefined}
+			data-icon-only={isIconOnly || undefined}
+			data-loading={loading && !disabled ? '' : undefined}
+			{...rest}
+		>
+			{loading ? <DsSpinner /> : icon && <DsIcon icon={icon} size={iconSizeMap[size]} aria-hidden />}
+			{children}
+		</button>
+	);
+};
+
+export default DsButtonV3;

package/src/components/ds-button-v3/ds-button-v3.types.ts

@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, Ref } from 'react';
+import type { IconType } from '../ds-icon';
+
+export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const;
+export type ButtonV3Variant = (typeof buttonV3Variants)[number];
+
+export const buttonV3Colors = ['default', 'negative', 'light'] as const;
+export type ButtonV3Color = (typeof buttonV3Colors)[number];
+
+export const buttonV3Sizes = ['large', 'medium', 'small', 'tiny'] as const;
+export type ButtonV3Size = (typeof buttonV3Sizes)[number];
+
+export interface DsButtonV3Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+	ref?: Ref<HTMLButtonElement>;
+
+	/**
+	 * - `default` — standard light-UI palette
+	 * - `negative` — destructive / danger palette (red tones)
+	 * - `light` — palette for dark-background surfaces (Figma **Type** onDark)
+	 * @default 'default'
+	 */
+	color?: ButtonV3Color;
+
+	/**
+	 * @default 'primary'
+	 */
+	variant?: ButtonV3Variant;
+
+	/**
+	 * @default 'medium'
+	 */
+	size?: ButtonV3Size;
+
+	/**
+	 * @default false
+	 */
+	selected?: boolean;
+
+	/**
+	 * Leading icon. When set without children, renders as icon-only (square) layout.
+	 */
+	icon?: IconType;
+
+	/**
+	 * Shows a spinner as the leading element and disables interaction.
+	 * @default false
+	 */
+	loading?: boolean;
+}