@drivenets/design-system 0.9.1 → 0.11.0

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

@@ -22,9 +22,9 @@
 	position: sticky;
 	top: 0;
 	z-index: 1;
-	padding: var(--spacing-3xs);
-	border-bottom: 1px solid var(--color-border-secondary);
-	background-color: var(--color-background);
+	padding: var(--3xs);
+	border-bottom: 1px solid var(--border-secondary);
+	background-color: var(--background);
 }
 
 .item {
@@ -33,7 +33,7 @@
 	.triggerItem {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 	}
 
 	&.selected {
@@ -45,10 +45,18 @@
 
 		&:hover {
 			.indicator {
-				color: var(--color-background-selected);
+				color: var(--background-primary);
 			}
 		}
 	}
+
+	&.variant-error {
+		color: var(--font-error);
+
+		&[data-highlighted] {
+			background: var(--background-error-secondary-hover);
+		}
+	}
 }
 
 .itemIcon {
@@ -61,8 +69,8 @@
 
 .separator {
 	height: 1px;
-	background-color: var(--color-border-secondary);
-	margin: var(--spacing-4xs) var(--spacing-xs);
+	background-color: var(--border-secondary);
+	margin: var(--4xs) var(--xs);
 }
 
 .actions {
@@ -72,17 +80,17 @@
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-3xs) var(--spacing-xs);
-	border-top: 1px solid var(--color-border-secondary);
-	background-color: var(--color-background);
+	gap: var(--xs);
+	padding: var(--3xs) var(--xs);
+	border-top: 1px solid var(--border-secondary);
+	background-color: var(--background);
 }
 
 .groupLabel {
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-3xs) var(--spacing-xs);
-	background-color: var(--color-background);
+	padding: var(--3xs) var(--xs);
+	background-color: var(--background);
 	outline-offset: -1px;
 
 	&Collapsible {
@@ -94,7 +102,7 @@
 		transition: background-color 0.15s ease;
 
 		&:hover {
-			background-color: var(--color-background-action-hover-weak);
+			background-color: var(--background-action-hover-weak);
 		}
 	}
 }

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

@@ -104,6 +104,7 @@ const Content: React.FC<DsDropdownMenuContentProps> = ({
 const Item: React.FC<DsDropdownMenuItemProps> = ({
 	disabled,
 	selected,
+	variant = 'default',
 	value,
 	asChild,
 	onClick,
@@ -120,6 +121,7 @@ const Item: React.FC<DsDropdownMenuItemProps> = ({
 				{
 					[styles.selected]: selected,
 				},
+				variant === 'error' && styles['variant-error'],
 				className,
 			)}
 			style={style}

package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts

@@ -2,6 +2,9 @@ import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import type { Menu } from '@ark-ui/react/menu';
 import type { IconType } from '../ds-icon';
 
+export const dropdownMenuItemVariants = ['default', 'error'] as const;
+export type DropdownMenuItemVariant = (typeof dropdownMenuItemVariants)[number];
+
 /**
  * Base positioning type
  */
@@ -162,10 +165,40 @@ export interface DsDropdownMenuItemProps extends Pick<
 	Menu.ItemProps,
 	'disabled' | 'asChild' | 'className' | 'style' | 'onSelect' | 'onClick' | 'value' | 'children'
 > {
+	/**
+	 * Underlying value reported to the root's `onSelect` when this item is chosen.
+	 */
+	value: Menu.ItemProps['value'];
+	/**
+	 * Whether this item is disabled and cannot be selected.
+	 * @default false
+	 */
+	disabled?: Menu.ItemProps['disabled'];
+	/**
+	 * Render the item as its direct child via Radix-style slot forwarding. Useful
+	 * for wrapping links (`<a>`) as dropdown items.
+	 * @default false
+	 */
+	asChild?: Menu.ItemProps['asChild'];
+	/**
+	 * Called when the item is selected via click or keyboard activation.
+	 */
+	onSelect?: Menu.ItemProps['onSelect'];
+	/**
+	 * Called when the item is clicked. Fires before `onSelect` and runs even when
+	 * keyboard-activated via Space/Enter.
+	 */
+	onClick?: Menu.ItemProps['onClick'];
 	/**
 	 * Whether the item is selected (applies selected styling)
 	 */
 	selected?: boolean;
+	/**
+	 * Status variant that applies colored text to convey item state.
+	 * `error` renders text in danger color.
+	 * @default 'default'
+	 */
+	variant?: DropdownMenuItemVariant;
 }
 
 /**

package/src/components/ds-expandable-text-input/ds-expandable-text-input.module.scss

@@ -4,7 +4,7 @@
 
 	&:not(.expanded) {
 		gap: 0;
-		padding-inline: var(--spacing-xs);
+		padding-inline: var(--xs);
 	}
 
 	.trigger:focus {

package/src/components/ds-file-upload/components/file-upload/file-upload.module.scss

@@ -11,10 +11,10 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: var(--exo-spacing-small) var(--exo-spacing-standard);
-	border: var(--exo-spacing-4x-small) dashed var(--color-border);
-	border-radius: var(--exo-spacing-2x-small);
-	background-color: var(--color-background);
+	padding: var(--sm) var(--standard);
+	border: 1px dashed var(--border);
+	border-radius: var(--3xs);
+	background-color: var(--background);
 	transition: all 0.2s ease;
 	cursor: pointer;
 
@@ -32,13 +32,13 @@
 	}
 
 	.dropzoneIcon {
-		color: var(--color-icon-secondary);
+		color: var(--icon-action-secondary);
 	}
 
 	.dropzoneText {
-		color: var(--color-background-deselected);
+		color: var(--background-deselected);
 		text-align: center;
-		padding: var(--spacing-3xs) 0 var(--spacing-sm) 0;
+		padding: var(--3xs) 0 var(--sm) 0;
 	}
 
 	[data-part='trigger'] {
@@ -46,13 +46,13 @@
 	}
 
 	&:hover:not([data-disabled]) {
-		border-color: var(--color-background-selected);
-		background-color: var(--color-background-selected-weak);
+		border-color: var(--background-primary);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&[data-dragging] {
-		border-color: var(--color-background-selected);
-		background-color: var(--color-background-selected-weak);
+		border-color: var(--background-primary);
+		background-color: var(--background-secondary-hover);
 		border-style: solid;
 	}
 
@@ -61,7 +61,7 @@
 
 		.dropzoneIcon,
 		.dropzoneText {
-			color: var(--color-background-disable);
+			color: var(--background-disable);
 		}
 	}
 }
@@ -69,22 +69,22 @@
 .fileList {
 	display: flex;
 	flex-direction: column;
-	gap: var(--exo-spacing-x-small);
-	margin-top: var(--exo-spacing-x-small);
-	padding: var(--spacing-xs);
-	border-radius: var(--exo-spacing-2x-small);
-	background: var(--color-background-secondary);
+	gap: var(--xs);
+	margin-top: var(--xs);
+	padding: var(--xs);
+	border-radius: var(--3xs);
+	background: var(--background-secondary);
 }
 
 .infoText {
-	color: var(--color-font-secondary);
-	margin-top: var(--spacing-2xs);
+	color: var(--font-secondary);
+	margin-top: var(--2xs);
 }
 
 .errorText {
-	color: var(--color-background-danger-strong);
+	color: var(--background-error);
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
-	margin-top: var(--spacing-2xs);
+	gap: var(--3xs);
+	margin-top: var(--2xs);
 }

package/src/components/ds-file-upload/components/file-upload/file-upload.types.ts

@@ -94,6 +94,7 @@ export interface FileUploadProps {
 	disabled?: boolean;
 	/**
 	 * Whether the file upload layout is compact (inline)
+	 * @default false
 	 */
 	compact?: boolean;
 }

package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss

@@ -7,16 +7,16 @@
 	.fileItemContent {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-2xs);
+		gap: var(--2xs);
 		width: 100%;
-		background-color: var(--color-background);
-		padding: var(--spacing-4xs) var(--exo-spacing-x-small);
+		background-color: var(--background);
+		padding: var(--4xs) var(--xs);
 		border: 1px solid transparent;
-		border-radius: var(--exo-spacing-2x-small);
+		border-radius: var(--3xs);
 		transition: all 0.2s ease;
 
 		&:hover {
-			border-color: var(--color-border-secondary);
+			border-color: var(--border-secondary);
 		}
 
 		&[data-disabled] {
@@ -24,41 +24,41 @@
 		}
 
 		&.fileItemError {
-			background-color: var(--color-background-danger-weak);
+			background-color: var(--background-error-secondary-hover);
 
 			.progressRange {
-				background: var(--color-background-danger-strong);
+				background: var(--background-error);
 			}
 		}
 
 		&.fileItemCompleted {
 			.progressRange {
-				background: var(--color-background-success-strong);
+				background: var(--background-success-strong);
 			}
 		}
 
 		&.fileItemUploading {
 			.progressRange {
-				background: var(--color-background-selected);
+				background: var(--background-primary);
 			}
 		}
 
 		&.fileItemInterrupted {
 			.progressRange {
-				background: var(--color-background-warning-strong);
+				background: var(--background-warning-strong);
 			}
 		}
 	}
 }
 
 .filePreview {
-	color: var(--color-background-deselected);
+	color: var(--background-deselected);
 }
 
 .fileInfo {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-2xs);
+	gap: var(--2xs);
 	flex: 1;
 	min-width: 0;
 }
@@ -66,14 +66,14 @@
 .fileName {
 	@include typography.body-sm-reg;
 	@include typography.ellipsis;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex: 1 0 75%;
 }
 
 .progressContainer {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	width: 100%;
 }
 
@@ -85,14 +85,14 @@
 .progressTrack {
 	width: 100%;
 	height: 100%;
-	background-color: var(--color-background-tertiary);
-	border-radius: var(--exo-spacing-2x-small);
+	background-color: var(--background-tertiary);
+	border-radius: var(--3xs);
 	overflow: hidden;
 }
 
 .progressRange {
 	height: 100%;
-	background-color: var(--color-background-selected);
+	background-color: var(--background-primary);
 	border-radius: 2px;
 	transition: width 0.3s ease;
 }
@@ -100,26 +100,26 @@
 @mixin infoText {
 	@include typography.body-xs-reg;
 	display: flex;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-3xs) var(--spacing-sm);
+	gap: var(--3xs);
+	padding: var(--3xs) var(--sm);
 }
 
 .progressText {
 	@include infoText;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .completedText {
 	@include infoText;
-	color: var(--color-background-success-strong);
+	color: var(--background-success-strong);
 }
 
 .interruptedText {
 	@include infoText;
-	color: var(--color-font-warning);
+	color: var(--font-warning);
 }
 
 .errorMessage {
 	@include infoText;
-	color: var(--color-background-danger-strong);
+	color: var(--background-error);
 }

package/src/components/ds-file-upload/ds-file-upload-api.types.ts

@@ -5,23 +5,65 @@ export type UploadFileStatus = 'pending' | 'uploading' | 'interrupted' | 'comple
 export type FileMetadata = Record<string, unknown>;
 
 export interface UploadedFile extends File {
+	/**
+	 * Stable identifier assigned by the uploader. Used to correlate progress
+	 * updates, retries, and deletions with this specific file.
+	 */
 	id: string;
+	/**
+	 * Current upload progress as a number between `0` and `1`.
+	 */
 	progress: number;
+	/**
+	 * Current lifecycle state of the upload.
+	 */
 	status: UploadFileStatus;
+	/**
+	 * Validation or upload errors associated with this file. Present when
+	 * `status` is `error` or when the file fails client-side validation.
+	 */
 	errors?: FileError[];
+	/**
+	 * Native `File` the user selected. Kept alongside so consumers can access
+	 * the original binary even after `UploadedFile` has been enriched.
+	 */
 	originalFile: File;
 }
 
 export interface FileUploadOptions {
+	/**
+	 * The file to upload.
+	 */
 	file: File;
+	/**
+	 * Stable identifier for this upload. Must match the `id` on the corresponding
+	 * `UploadedFile` so progress and cancellation are routed correctly.
+	 */
 	fileId: string;
+	/**
+	 * Optional custom metadata forwarded by the consumer (e.g., tags, parent ids).
+	 */
 	metadata?: FileMetadata;
+	/**
+	 * Called by the adapter with upload progress updates as a number between `0`
+	 * and `1`.
+	 */
 	onProgress?: (progress: number) => void;
+	/**
+	 * AbortSignal that fires when the consumer cancels the upload. Adapters should
+	 * observe this and abort any in-flight network request.
+	 */
 	signal?: AbortSignal;
 }
 
 export interface FileUploadResult {
+	/**
+	 * URL of the successfully uploaded file, returned by the backend.
+	 */
 	url: string;
+	/**
+	 * Optional metadata returned by the backend alongside the URL.
+	 */
 	metadata?: FileMetadata;
 }
 
@@ -33,7 +75,20 @@ export interface FileUploadResult {
  * - reject with FatalFileUploadError for permanent failures
  */
 export interface FileUploadAdapter {
+	/**
+	 * Uploads a single file. Resolve with `FileUploadResult` on success; reject
+	 * with `RetryableFileUploadError` for transient failures (will be retried) or
+	 * `FatalFileUploadError` for permanent failures (surfaces to the user).
+	 */
 	upload: (options: FileUploadOptions) => FileUploadResult | Promise<FileUploadResult>;
+	/**
+	 * Optional hook called when the user cancels an in-flight upload. Implementations
+	 * should abort any pending network work for the given `fileId`.
+	 */
 	cancel?: (fileId: string) => void | Promise<void>;
+	/**
+	 * Optional hook called when the user removes a previously uploaded file. Typically
+	 * issues a delete request to the backend so stored files can be cleaned up.
+	 */
 	delete?: (fileId: string) => void | Promise<void>;
 }

package/src/components/ds-filter-status-icon/ds-filter-status-icon.module.scss

@@ -1,19 +1,19 @@
 .running {
-	color: var(--color-primary-700-default);
+	color: var(--primary-700-default);
 }
 
 .warning {
-	color: var(--color-warning-400);
+	color: var(--warning-400);
 }
 
 .failed {
-	color: var(--color-negative-400-default);
+	color: var(--negative-400-default);
 }
 
 .paused {
-	color: var(--color-purple-600);
+	color: var(--color-dap-purple-600);
 }
 
 .inactive {
-	color: var(--color-font-disabled);
+	color: var(--font-disabled);
 }

package/src/components/ds-form-control/ds-form-control.module.scss

@@ -9,26 +9,26 @@ $form-control-description-max-height: calc(
 .container {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-4xs);
+	gap: var(--4xs);
 
 	&.success {
 		.message {
-			color: var(--color-background-success-strong);
+			color: var(--background-success-strong);
 		}
 	}
 
 	&.warning {
 		.message {
-			color: var(--color-font-warning);
+			color: var(--font-warning);
 		}
 	}
 
 	&.error {
-		--form-control-border-color: var(--color-background-danger-strong);
-		--form-control-selection-color: var(--color-background-danger-weak);
+		--form-control-border-color: var(--background-error);
+		--form-control-selection-color: var(--background-error-secondary-hover);
 
 		.message {
-			color: var(--color-background-danger-strong);
+			color: var(--background-error);
 		}
 	}
 }
@@ -36,12 +36,12 @@ $form-control-description-max-height: calc(
 .labelContainer {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-4xs);
+	gap: var(--4xs);
 }
 
 .label {
 	@include typography.body-sm-reg;
-	color: var(--color-font-main);
+	color: var(--font-main);
 
 	&.required::after {
 		@include typography.body-sm-reg;
@@ -49,14 +49,14 @@ $form-control-description-max-height: calc(
 		position: relative;
 		top: -1px;
 		right: -1px;
-		color: var(--color-icon-danger);
+		color: var(--icon-error);
 	}
 
 	&.disabled {
 		color: var(--color-background-disabled);
 
 		&::after {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 }
@@ -69,7 +69,7 @@ $form-control-description-max-height: calc(
 
 .description {
 	@include typography.p-s;
-	color: var(--neutral-2);
+	color: var(--color-dap-gray-600);
 	line-height: $form-control-description-line-height;
 	max-height: $form-control-description-max-height;
 	overflow: hidden;
@@ -117,7 +117,7 @@ $form-control-description-max-height: calc(
 	.icon {
 		position: absolute;
 		pointer-events: none;
-		color: var(--neutral-3);
+		color: var(--color-dap-gray-500);
 	}
 
 	.icon {
@@ -127,7 +127,7 @@ $form-control-description-max-height: calc(
 
 .message {
 	@include typography.body-xs-reg;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	display: flex;
 	align-items: center;
 	gap: 4px;

package/src/components/ds-form-control/ds-form-control.types.ts

@@ -22,6 +22,9 @@ export interface DsFormControlProps extends React.PropsWithChildren {
 	 */
 	required?: boolean;
 
+	/**
+	 * Optional render slots for customizing parts of the control.
+	 */
 	slots?: {
 		/**
 		 * Adornment to display at the end of the label

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

@@ -1,11 +1,17 @@
-import type React from 'react';
+import type { CSSProperties } from 'react';
 import classNames from 'classnames';
-import type { DsGridItemProps, DsGridProps } from './ds-grid.types';
 
-/**
- * Design system Grid component
- */
-export const DsGrid: React.FC<DsGridProps> = ({ children, columns, rows, className }) => {
+import type { DsGridBaseProps, DsGridItemBaseProps } from './ds-grid.types';
+
+export const DsGridBase = ({
+	children,
+	columns,
+	rows,
+	gutter,
+	margin,
+	className,
+	style,
+}: DsGridBaseProps) => {
 	const gridClass = classNames(
 		'ds-grid',
 		{
@@ -15,20 +21,31 @@ export const DsGrid: React.FC<DsGridProps> = ({ children, columns, rows, classNa
 		className,
 	);
 
-	return <div className={gridClass}>{children}</div>;
+	const cssVars: Record<string, string> = {};
+
+	if (gutter !== undefined) {
+		cssVars['--ds-grid-gutter'] = typeof gutter === 'number' ? `${String(gutter)}px` : gutter;
+	}
+
+	if (margin !== undefined) {
+		cssVars['--ds-grid-margin'] = typeof margin === 'number' ? `${String(margin)}px` : margin;
+	}
+
+	return (
+		<div className={gridClass} style={{ ...style, ...cssVars } as CSSProperties}>
+			{children}
+		</div>
+	);
 };
 
-/**
- * Design system GridItem component
- */
-export const DsGridItem: React.FC<DsGridItemProps> = ({
+export const DsGridItemBase = ({
 	children,
 	colSpan,
 	colStart,
 	rowSpan,
 	rowStart,
 	className,
-}) => {
+}: DsGridItemBaseProps) => {
 	const gridItemClass = classNames(
 		{
 			[`ds-grid-col-span-${String(colSpan)}`]: colSpan,