@drivenets/design-system 0.7.3 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.7.3",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -51,10 +51,11 @@
     "@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.21",
-    "@zag-js/react": "^1.35.3",
-    "@zag-js/steps": "^1.35.3",
-    "classnames": "^2.5.1"
+    "@tanstack/react-virtual": "^3.13.23",
+    "@zag-js/react": "^1.37.0",
+    "@zag-js/steps": "^1.37.0",
+    "classnames": "^2.5.1",
+    "csstype": "^3.2.3"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",
@@ -67,14 +68,14 @@
     "@eslint/compat": "^2.0.3",
     "@faker-js/faker": "^10.3.0",
     "@hookform/resolvers": "^5.2.2",
-    "@rollup/plugin-babel": "^7.0.0",
+    "@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/builder-vite": "^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",
@@ -89,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/eslint-plugin-internal": "0.0.0",
-    "@drivenets/vite-plugin-design-system": "0.0.6"
+    "@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

@@ -49,7 +49,7 @@ $autocomplete-opacity-visible: 1;
 	outline: none;
 
 	&::placeholder {
-		color: var(--color-font-placeholder);
+		color: var(--color-font-disabled);
 	}
 }
 
@@ -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-autocomplete/ds-autocomplete.tsx

@@ -45,10 +45,7 @@ export const DsAutocomplete = ({
 
 	const handleValueChange = (details: Combobox.ValueChangeDetails<DsAutocompleteOption>) => {
 		const selectedItem = details.items[0];
-
-		if (selectedItem) {
-			onValueChange?.(selectedItem.value);
-		}
+		onValueChange?.(selectedItem?.value ?? '');
 	};
 
 	const handleOpenChange = (details: Combobox.OpenChangeDetails) => {
@@ -83,12 +80,20 @@ export const DsAutocomplete = ({
 				<Combobox.Input className={styles.input} placeholder={placeholder} />
 
 				<Combobox.Context>
-					{(context) => (
+					{(combobox) => (
 						<div className={styles.iconContainer}>
-							{context.inputValue && !disabled && (
-								<Combobox.ClearTrigger className={styles.clearButton} aria-label="Clear">
+							{combobox.inputValue && !disabled && (
+								<button
+									type="button"
+									className={styles.clearButton}
+									aria-label="Clear"
+									onClick={() => {
+										combobox.setValue([]);
+										combobox.setInputValue('');
+									}}
+								>
 									<DsIcon icon="close" size="medium" />
-								</Combobox.ClearTrigger>
+								</button>
 							)}
 
 							{showTrigger && (

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

@@ -85,7 +85,8 @@ export interface DsAutocompleteProps {
 	startAdornment?: React.ReactNode;
 
 	/**
-	 * Event handler called when the value changes (when an option is selected)
+	 * Event handler called when the value changes.
+	 * Fires with the selected option's value, or an empty string when cleared.
 	 */
 	onValueChange?: (value: string) => void;
 	/**

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);
+	}
+}