@drivenets/design-system 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "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.1",
+    "@ark-ui/react": "^5.36.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.23",
-    "@zag-js/react": "^1.37.0",
-    "@zag-js/steps": "^1.37.0",
+    "@tanstack/react-virtual": "^3.13.24",
+    "@zag-js/react": "^1.40.0",
+    "@zag-js/steps": "^1.40.0",
     "classnames": "^2.5.1",
     "csstype": "^3.2.3"
   },
@@ -79,6 +79,7 @@
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@typescript/native-preview": "7.0.0-dev.20260331.1",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.0",
     "@vitest/coverage-v8": "^4.1.0",
@@ -98,7 +99,7 @@
     "storybook": "^10.2.19",
     "tsdown": "^0.21.6",
     "typed-scss-modules": "^8.1.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "8.0.5",
     "vitest": "^4.1.0",
@@ -112,7 +113,7 @@
     "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",
+    "typecheck": "pnpm generate-scss-dts && tsgo; 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\"",

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

@@ -199,28 +199,28 @@ $focus-ring-width: 2px;
 	}
 }
 
-.root[data-color='negative'][data-variant='primary'] {
-	background-color: var(--background-background-negative);
+.root[data-color='error'][data-variant='primary'] {
+	background-color: var(--background-background-error);
 	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);
+		background-color: var(--background-background-error-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-negative-selected);
+		background-color: var(--background-background-error-selected);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-negative));
+		@include focus-ring(var(--border-border-error));
 
-		background-color: var(--background-background-negative-hover);
+		background-color: var(--background-background-error-hover);
 		border-color: var(--border-border-inverse);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-negative-selected);
+		background-color: var(--background-background-error-selected);
 	}
 
 	&:disabled:not([data-loading]) {
@@ -229,31 +229,31 @@ $focus-ring-width: 2px;
 	}
 }
 
-.root[data-color='negative'][data-variant='secondary'] {
+.root[data-color='error'][data-variant='secondary'] {
 	background-color: var(--background-background-action-secondary);
-	color: var(--font-font-negative);
-	border-color: var(--border-border-negative);
+	color: var(--font-font-error);
+	border-color: var(--border-border-error);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-negative-secondary-hover);
-		border-color: var(--border-border-negative-hover);
+		background-color: var(--background-background-error-secondary-hover);
+		border-color: var(--border-border-error-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-negative-secondary-selected);
-		border-color: var(--border-border-negative-hover);
+		background-color: var(--background-background-error-secondary-selected);
+		border-color: var(--border-border-error-hover);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-negative));
+		@include focus-ring(var(--border-border-error));
 
-		background-color: var(--background-background-negative-secondary-hover);
+		background-color: var(--background-background-error-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);
+		background-color: var(--background-background-error-secondary-selected);
+		border-color: var(--border-border-error-hover);
 	}
 
 	&:disabled:not([data-loading]) {
@@ -263,28 +263,28 @@ $focus-ring-width: 2px;
 	}
 }
 
-.root[data-color='negative'][data-variant='tertiary'] {
+.root[data-color='error'][data-variant='tertiary'] {
 	background-color: transparent;
-	color: var(--font-font-negative);
+	color: var(--font-font-error);
 	border-color: transparent;
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-background-negative-secondary-hover);
+		background-color: var(--background-background-error-secondary-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-background-negative-secondary-selected);
+		background-color: var(--background-background-error-secondary-selected);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--border-border-negative));
+		@include focus-ring(var(--border-border-error));
 
-		background-color: var(--background-background-negative-secondary-hover);
+		background-color: var(--background-background-error-secondary-hover);
 		border-color: var(--border-border-inverse);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-background-negative-secondary-selected);
+		background-color: var(--background-background-error-secondary-selected);
 	}
 
 	&:disabled:not([data-loading]) {

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

@@ -2,7 +2,7 @@ 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';
+import type { ButtonV3Size, DsButtonV3BaseProps } from './ds-button-v3.types.ts';
 
 const iconSizeMap: Record<ButtonV3Size, IconSize> = Object.freeze({
 	large: 'small',
@@ -25,7 +25,7 @@ const DsButtonV3 = ({
 	selected = false,
 	type = 'button',
 	...rest
-}: DsButtonV3Props) => {
+}: DsButtonV3BaseProps) => {
 	const isIconOnly = icon !== undefined && !children;
 
 	return (

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

@@ -1,21 +1,22 @@
 import type { ButtonHTMLAttributes, Ref } from 'react';
 import type { IconType } from '../ds-icon';
+import type { ResponsiveValue } from '../../utils/responsive';
 
 export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const;
 export type ButtonV3Variant = (typeof buttonV3Variants)[number];
 
-export const buttonV3Colors = ['default', 'negative', 'light'] as const;
+export const buttonV3Colors = ['default', 'error', '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> {
+export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	ref?: Ref<HTMLButtonElement>;
 
 	/**
 	 * - `default` — standard light-UI palette
-	 * - `negative` — destructive / danger palette (red tones)
+	 * - `error` — destructive / danger palette (red tones)
 	 * - `light` — palette for dark-background surfaces (Figma **Type** onDark)
 	 * @default 'default'
 	 */
@@ -47,3 +48,11 @@ export interface DsButtonV3Props extends ButtonHTMLAttributes<HTMLButtonElement>
 	 */
 	loading?: boolean;
 }
+
+export interface DsButtonV3Props extends Omit<DsButtonV3BaseProps, 'size'> {
+	/**
+	 * Size of the button. Accepts a static value or a responsive object.
+	 * @default 'medium'
+	 */
+	size?: ResponsiveValue<ButtonV3Size>;
+}

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

@@ -1,2 +1,6 @@
-export { default as DsButtonV3 } from './ds-button-v3';
+import { withResponsiveProps } from '../../utils/responsive';
+import DsButtonV3Base from './ds-button-v3';
+
+export const DsButtonV3 = withResponsiveProps(DsButtonV3Base, ['size']);
+
 export * from './ds-button-v3.types';

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

@@ -1,4 +1,4 @@
-@import '../../styles/mixin';
+@use '../../styles/mixin' as mixins;
 
 $side-color-width: 4px;
 $border-width: 1px;
@@ -30,7 +30,7 @@ $transition-duration: 0.2s;
 		}
 	}
 
-	@include disabled-overlay;
+	@include mixins.disabled-overlay;
 }
 
 .sideColor {

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx

@@ -19,13 +19,16 @@ export const DsTableCell = <TData, TValue>({
 	primaryRowActions = [],
 	secondaryRowActions = [],
 }: DsTableCellProps<TData, TValue>) => {
-	if (primaryRowActions.length || secondaryRowActions.length) {
-		const hasSecondaryRowActions = secondaryRowActions.some((action) => !action.disabled?.(row.original));
+	const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
+	const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
+
+	if (visiblePrimary.length || visibleSecondary.length) {
+		const hasSecondaryRowActions = visibleSecondary.length > 0;
 		return (
 			<div className={styles.lastCell}>
 				<DsDefaultTableCell cell={cell} />
 				<div className={styles.cellActions}>
-					{primaryRowActions.map((action, i) => {
+					{visiblePrimary.map((action, i) => {
 						const isDisabled = action.disabled?.(row.original);
 						const label = typeof action.label === 'function' ? action.label(row.original) : action.label;
 						return (
@@ -67,7 +70,7 @@ export const DsTableCell = <TData, TValue>({
 								</button>
 							</DsDropdownMenu.Trigger>
 							<DsDropdownMenu.Content>
-								{secondaryRowActions.map((action, i) => {
+								{visibleSecondary.map((action, i) => {
 									const label =
 										typeof action.label === 'function' ? action.label(row.original) : action.label;
 									const isDisabled = action.disabled?.(row.original);

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts

@@ -20,6 +20,12 @@ export interface RowAction<TData> {
 	 */
 	tooltip?: string;
 
+	/**
+	 * Optional function to determine if the action should be hidden for a specific row.
+	 * When it returns `true`, the action is omitted from that row's menu. Takes precedence over `disabled`.
+	 */
+	hidden?: (row: TData) => boolean;
+
 	/**
 	 * Optional function to determine if the action should be disabled for a specific row
 	 */

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

@@ -15,12 +15,12 @@ export interface DsTreeNode {
 export const dsTreeSizes = ['medium', 'small'] as const;
 export type DsTreeSize = (typeof dsTreeSizes)[number];
 
-interface DsTreeBaseProps {
+export interface DsTreeBaseProps {
 	className?: string;
 	style?: CSSProperties;
 }
 
-interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
+export interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
 	children?: ReactNode;
 }
 

package/src/styles/_grid.scss

@@ -19,7 +19,11 @@
 	@for $i from 1 through grid-vars.$columns {
 		// Margins are added to all column spans to ensure proper alignment
 		// The last column span (full width) receives 2 margins (left + right), others receive 1 margin (typically left)
-		$margins: if($i == grid-vars.$columns, 2, 1);
+		$margins: 1;
+
+		@if $i == grid-vars.$columns {
+			$margins: 2;
+		}
 
 		// Calculate total width for spanning i columns:
 		// - i columns × column width

package/src/styles/_mixin.scss

@@ -1,2 +1,2 @@
-@import './mixins/disabled';
-@import './mixins/list';
+@forward './mixins/disabled';
+@forward './mixins/list';

package/src/styles/_root_updated.scss

@@ -181,15 +181,15 @@
 	--positive-050: var(--color-dap-green-050); // was --color-positive-050
 	--positive-700-default: var(--color-dap-green-700); // was --color-positive-700-default
 
-	/* Alias - negative */
-	--negative-100: var(--color-dap-red-100); // ⚠ NEW VALUE (was #f5c2bf in --color-negative-100)
-	--negative-200: var(--color-dap-red-200); // was --color-negative-200
-	--negative-300: var(--color-dap-red-300); // was --color-negative-300
-	--negative-500: var(--color-dap-red-500); // was --color-negative-500
-	--negative-600: var(--color-dap-red-600); // was --color-negative-600
-	--negative-700: var(--color-dap-red-700); // was --color-negative-700
-	--negative-050: var(--color-dap-red-050); // was --color-negative-050
-	--negative-400-default: var(--color-dap-red-400); // was --color-negative-400-default
+	/* Alias - error */
+	--error-100: var(--color-dap-red-100); // ⚠ NEW VALUE (was #f5c2bf in --color-negative-100)
+	--error-200: var(--color-dap-red-200); // was --color-negative-200
+	--error-300: var(--color-dap-red-300); // was --color-negative-300
+	--error-500: var(--color-dap-red-500); // was --color-negative-500
+	--error-600: var(--color-dap-red-600); // was --color-negative-600
+	--error-700: var(--color-dap-red-700); // was --color-negative-700
+	--error-050: var(--color-dap-red-050); // was --color-negative-050
+	--error-400-default: var(--color-dap-red-400); // was --color-negative-400-default
 
 	/* Alias - warning */
 	--warning-100: var(--color-dap-orange-100); // was --color-warning-100
@@ -268,11 +268,11 @@
 	--background-background-info-strong: var(--primary-800); // was --color-background-info-strong
 	--background-background-warning: var(--warning-100); // was --color-background-warning
 	--background-background-warning-strong: var(--warning-600-default); // was --color-background-warning-strong
-	--background-background-negative: var(--negative-400-default); // was --color-negative-400-default
-	--background-background-negative-hover: var(--negative-500); // was --color-background-danger-strong-hover
-	--background-background-negative-selected: var(--negative-600); // was --color-negative-600
-	--background-background-negative-secondary-hover: var(--negative-050); // was --color-negative-050
-	--background-background-negative-secondary-selected: var(--negative-100);
+	--background-background-error: var(--error-400-default); // was --color-negative-400-default
+	--background-background-error-hover: var(--error-500); // was --color-background-danger-strong-hover
+	--background-background-error-selected: var(--error-600); // was --color-negative-600
+	--background-background-error-secondary-hover: var(--error-050); // was --color-negative-050
+	--background-background-error-secondary-selected: var(--error-100);
 	--background-background-active-moderate: var(--primary-400); // was --color-background-active-moderate
 	--background-background-transparent-hover: rgba(255, 255, 255, 0.15);
 	--background-background-transparent-active: rgba(255, 255, 255, 0.3);
@@ -298,9 +298,9 @@
 	--border-border-action-secondary-hover: var(--brand-400); // was --color-border-action-secondary-hover
 	--border-border-positive: var(--positive-600); // was --color-positive-600
 	--border-border-warning-strong: var(--warning-600-default); // was --color-background-warning-strong
-	--border-border-negative-weak: var(--negative-100);
-	--border-border-negative: var(--negative-400-default); // was --color-negative-400-default
-	--border-border-negative-hover: var(--negative-500); // was --color-negative-500
+	--border-border-error-weak: var(--error-100);
+	--border-border-error: var(--error-400-default); // was --color-negative-400-default
+	--border-border-error-hover: var(--error-500); // was --color-negative-500
 	--border-border-inverse: var(--secondary-050); // was --color-border-inverse
 	--border-border-field: var(--secondary-200); // was --color-border-disabled
 	--border-border-field-hover: var(--brand-600); // was --color-background-action-hover
@@ -320,7 +320,7 @@
 	--font-font-on-disabled: var(--secondary-800); // was --color-font-on-disabled
 	--font-font-positive: var(--positive-700-default); // was --color-font-success
 	--font-font-warning: var(--warning-700); // was --color-font-warning
-	--font-font-negative: var(--negative-500); // was --color-font-danger
+	--font-font-error: var(--error-500); // was --color-font-danger
 	--font-font-code: var(--primary-900); // was --color-font-code
 	--font-font-highlight: var(--color-dap-data-deep-fuchsia); // was --color-font-highlight
 	--font-font-placeholder: var(--secondary-500-net-4); // was --color-font-disabled
@@ -339,7 +339,7 @@
 	--icon-icon-positive: var(--positive-700-default); // was --color-icon-success
 	--icon-icon-warning-light: var(--warning-400); // was --color-warning-400
 	--icon-icon-warning: var(--warning-600-default); // was --color-icon-warning
-	--icon-icon-negative: var(--negative-500); // was --color-negative-500
+	--icon-icon-error: var(--error-500); // was --color-negative-500
 	--icon-icon-pause: var(--paused-600); // was --color-data-blue
 	--icon-icon-information-main: var(--secondary-500-net-4); // was --color-icon-information-main
 	--icon-icon-information-secondary: var(--primary-600); // was --color-icon-information-secondary
@@ -397,7 +397,7 @@
 	--status-bg-pending: var(--warning-100); // was --color-status-bg-pending
 	--status-bg-warning: var(--warning-200); // was --color-status-bg-warning
 	--status-bg-inactive: var(--background-background-tertiary-selected-weak);
-	--status-bg-failed: var(--background-background-negative-secondary-hover);
+	--status-bg-failed: var(--background-background-error-secondary-hover);
 
 	/* Semantic - Dark Buttons */
 	--dark-buttons-primary: var(--darks-400); // was --color-dark-buttons-primary

package/src/styles/_scrollbars.scss

@@ -25,7 +25,12 @@ $scrollbar-thin-size: 4px;
 
 @mixin firefox-scrollbar($size) {
 	@-moz-document url-prefix() {
-		scrollbar-width: if($size == $scrollbar-thin-size, thin, auto);
+		@if $size == $scrollbar-thin-size {
+			scrollbar-width: thin;
+		} @else {
+			scrollbar-width: auto;
+		}
+
 		scrollbar-color: var(--color-background-deselected-hover) var(--color-background-secondary);
 	}
 }