@drivenets/design-system 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -36,24 +36,24 @@
     "directory": "/packages/design-system"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.18.0",
+    "@ark-ui/react": "^5.31.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-checkbox": "^1.1.5",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.13",
-    "@radix-ui/react-dropdown-menu": "^2.1.14",
-    "@radix-ui/react-popover": "^1.1.11",
-    "@radix-ui/react-radio-group": "^1.2.4",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.2.4",
-    "@radix-ui/react-visually-hidden": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@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.6",
-    "@zag-js/react": "^1.17.4",
-    "@zag-js/steps": "^1.17.4",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@zag-js/react": "^1.33.1",
+    "@zag-js/steps": "^1.33.1",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -63,47 +63,48 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@faker-js/faker": "^9.7.0",
-    "@hookform/resolvers": "^5.0.1",
+    "@faker-js/faker": "^9.9.0",
+    "@hookform/resolvers": "^5.2.2",
     "@rollup/plugin-babel": "^6.1.0",
-    "@storybook/addon-a11y": "^10.1.9",
-    "@storybook/addon-docs": "^10.1.9",
-    "@storybook/addon-vitest": "^10.1.9",
-    "@storybook/builder-vite": "^10.1.9",
-    "@storybook/react-vite": "^10.1.9",
-    "@tanstack/react-query": "^5.90.12",
-    "@tanstack/react-router": "^1.141.2",
+    "@storybook/addon-a11y": "^10.2.7",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/addon-vitest": "^10.2.7",
+    "@storybook/builder-vite": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
+    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-router": "^1.158.4",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser": "^4.0.16",
-    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.39.2",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.1.9",
+    "eslint-plugin-storybook": "^10.2.7",
     "jsdom": "^25.0.1",
-    "playwright": "^1.57.0",
+    "mockdate": "^3.0.5",
+    "playwright": "^1.58.2",
     "postcss": "^8.5.6",
     "postcss-modules": "^6.0.1",
-    "publint": "^0.3.16",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-hook-form": "^7.55.0",
+    "publint": "^0.3.17",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.1",
     "rollup-plugin-sass": "^1.15.3",
-    "sass-embedded": "^1.97.0",
-    "storybook": "^10.1.9",
-    "tsdown": "^0.18.0",
+    "sass-embedded": "^1.97.3",
+    "storybook": "^10.2.7",
+    "tsdown": "^0.18.4",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16",
-    "zod": "^3.24.2",
-    "@drivenets/vite-plugin-design-system": "0.0.4"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "zod": "^3.25.76",
+    "@drivenets/vite-plugin-design-system": "0.0.5"
   },
   "scripts": {
     "lint": "pnpm generate-scss-dts; eslint --max-warnings=0 .",
@@ -111,7 +112,9 @@
     "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",
+    "test:coverage": "vitest --coverage",
     "build": "tsdown",
+    "build:watch": "pnpm build --watch",
     "build:storybook": "storybook build",
     "build:lint": "publint && attw --pack"
   }

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

@@ -0,0 +1,257 @@
+@use '../../styles/shared/dropdown';
+@use '../../styles/shared/input';
+
+$autocomplete-input-height: 36px;
+$autocomplete-max-visible-items: 4;
+$autocomplete-item-height: 38px;
+$autocomplete-dropdown-max-height: calc($autocomplete-max-visible-items * $autocomplete-item-height);
+$autocomplete-trigger-size: 24px;
+$autocomplete-trigger-border-radius: 4px;
+$autocomplete-highlight-border-radius: 2px;
+$autocomplete-animation-duration: 0.2s;
+$autocomplete-animation-translate: -8px;
+$autocomplete-outline-width: 2px;
+$autocomplete-outline-offset: 2px;
+$autocomplete-rotation-open: 180deg;
+$autocomplete-opacity-hidden: 0;
+$autocomplete-opacity-visible: 1;
+
+.root {
+	position: relative;
+	width: 100%;
+	display: inline-flex;
+	flex-direction: column;
+}
+
+.control {
+	@include input.base-input-container;
+	@include input.input-container-states;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	height: $autocomplete-input-height;
+	min-height: $autocomplete-input-height;
+	max-height: $autocomplete-input-height;
+
+	&[data-focus] {
+		border-color: var(--form-control-border-color, var(--color-border-action-primary)) !important;
+	}
+
+	&[data-invalid] {
+		border-color: var(--color-background-danger-strong);
+	}
+}
+
+.input {
+	@include input.base-input;
+	flex: 1;
+	min-width: 0;
+	outline: none;
+
+	&::placeholder {
+		color: var(--color-font-placeholder);
+	}
+}
+
+.startAdornment {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-background-action);
+	flex-shrink: 0;
+}
+
+.iconContainer {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	flex-shrink: 0;
+}
+
+.clearButton {
+	@include input.icon-button;
+	cursor: pointer;
+	opacity: $autocomplete-opacity-hidden;
+	visibility: hidden;
+	transition: opacity $autocomplete-animation-duration ease;
+
+	&:hover {
+		color: var(--color-background-action-hover);
+	}
+}
+
+.control:hover .clearButton,
+.control[data-focus] .clearButton {
+	opacity: $autocomplete-opacity-visible;
+	visibility: visible;
+}
+
+.trigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-background-deselected);
+	transition:
+		transform $autocomplete-animation-duration ease-in-out,
+		background-color $autocomplete-animation-duration ease,
+		color $autocomplete-animation-duration ease;
+	cursor: pointer;
+	background: transparent;
+	border: none;
+	padding: 0;
+	border-radius: $autocomplete-trigger-border-radius;
+	width: $autocomplete-trigger-size;
+	height: $autocomplete-trigger-size;
+
+	&:hover {
+		color: var(--color-background-deselected-hover);
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&[data-state='open'] {
+		transform: rotate($autocomplete-rotation-open);
+		color: var(--color-background-deselected-hover);
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&:focus-visible {
+		outline: $autocomplete-outline-width solid var(--color-focus);
+		outline-offset: $autocomplete-outline-offset;
+	}
+}
+
+.control[data-focus] .trigger {
+	color: var(--color-background-deselected-hover);
+	background: var(--color-background-action-hover-weak);
+}
+
+.positioner {
+	z-index: var(--z-index-dropdown, 9999);
+	width: var(--reference-width);
+}
+
+.content {
+	@include dropdown.dropdown-content;
+	overflow: hidden;
+	animation: expand $autocomplete-animation-duration ease;
+	width: 100%;
+	min-width: var(--reference-width);
+	max-height: $autocomplete-dropdown-max-height;
+
+	&[data-state='open'] {
+		animation: expand $autocomplete-animation-duration ease;
+	}
+
+	&[data-state='closed'] {
+		animation: collapse $autocomplete-animation-duration ease;
+	}
+}
+
+.itemGroup {
+	overflow-y: auto;
+	overflow-x: hidden;
+	max-height: $autocomplete-dropdown-max-height;
+	scrollbar-width: thin;
+}
+
+.item {
+	@include dropdown.dropdown-item;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	height: $autocomplete-item-height;
+	min-height: $autocomplete-item-height;
+
+	&[data-highlighted] {
+		background: var(--color-background-secondary-selected-weak);
+	}
+}
+
+.itemIcon {
+	color: var(--color-background-deselected);
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+}
+
+.itemText {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	mark {
+		background-color: var(--color-data-yellow);
+		color: var(--color-font-main);
+		font-weight: var(--font-weight-medium);
+		padding: 0;
+		border-radius: $autocomplete-highlight-border-radius;
+	}
+}
+
+.noMatches {
+	padding: var(--spacing-xs);
+	color: var(--color-font-disabled);
+	text-align: center;
+	font-size: var(--font-size-sm);
+}
+
+.disabled {
+	.control {
+		color: var(--color-background-deselected);
+		background: var(--color-background-secondary);
+		border-color: var(--color-border-disabled);
+		cursor: not-allowed;
+
+		.input {
+			color: var(--color-font-disabled);
+			cursor: not-allowed;
+		}
+
+		.trigger {
+			color: var(--color-background-disable);
+			cursor: not-allowed;
+			background: transparent;
+
+			&:hover {
+				background: transparent;
+				color: var(--color-background-disable);
+			}
+		}
+	}
+}
+
+.invalid {
+	.control {
+		border-color: var(--color-background-danger-strong);
+
+		&:hover,
+		&[data-focus] {
+			border-color: var(--color-background-danger-strong) !important;
+		}
+	}
+}
+
+@keyframes expand {
+	0% {
+		opacity: $autocomplete-opacity-hidden;
+		transform: translateY($autocomplete-animation-translate);
+	}
+
+	100% {
+		opacity: $autocomplete-opacity-visible;
+		transform: translateY(0);
+	}
+}
+
+@keyframes collapse {
+	0% {
+		opacity: $autocomplete-opacity-visible;
+		transform: translateY(0);
+	}
+
+	100% {
+		opacity: $autocomplete-opacity-hidden;
+		transform: translateY($autocomplete-animation-translate);
+	}
+}

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

@@ -0,0 +1,130 @@
+import { Combobox, useListCollection } from '@ark-ui/react/combobox';
+import { useFilter } from '@ark-ui/react/locale';
+import { Highlight } from '@ark-ui/react/highlight';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import styles from './ds-autocomplete.module.scss';
+import type { DsAutocompleteProps } from './ds-autocomplete.types';
+import { DsIcon } from '../ds-icon';
+
+export const DsAutocomplete = ({
+	id,
+	options,
+	style,
+	className,
+	placeholder = 'Start typing to search...',
+	disabled = false,
+	invalid = false,
+	onValueChange,
+	onInputValueChange,
+	noMatchesMessage = 'No matches found',
+	highlightMatch = true,
+	showTrigger = true,
+	startAdornment,
+}: DsAutocompleteProps) => {
+	const filterUtils = useFilter({ sensitivity: 'base' });
+
+	const { collection, filter } = useListCollection({
+		initialItems: options.map((opt) => opt.label),
+		filter: (item, query) => filterUtils.contains(item, query),
+	});
+
+	const handleInputValueChange = (details: Combobox.InputValueChangeDetails) => {
+		filter(details.inputValue);
+		onInputValueChange?.(details.inputValue);
+	};
+
+	const handleValueChange = (details: Combobox.ValueChangeDetails) => {
+		const selectedLabel = details.value[0];
+		if (!selectedLabel) {
+			return;
+		}
+
+		const selectedOption = options.find((opt) => opt.label === selectedLabel);
+
+		if (selectedOption) {
+			onValueChange?.(selectedOption.value);
+		}
+	};
+
+	const rootClass = classNames(
+		styles.root,
+		{
+			[styles.disabled]: disabled,
+			[styles.invalid]: invalid,
+		},
+		className,
+	);
+
+	return (
+		<Combobox.Root
+			id={id}
+			collection={collection}
+			className={rootClass}
+			style={style}
+			disabled={disabled}
+			invalid={invalid}
+			onInputValueChange={handleInputValueChange}
+			onValueChange={handleValueChange}
+			closeOnSelect
+		>
+			<Combobox.Control className={styles.control}>
+				{startAdornment && <span className={styles.startAdornment}>{startAdornment}</span>}
+
+				<Combobox.Input className={styles.input} placeholder={placeholder} />
+
+				<Combobox.Context>
+					{(context) => (
+						<div className={styles.iconContainer}>
+							{context.inputValue && !disabled && (
+								<Combobox.ClearTrigger className={styles.clearButton} aria-label="Clear">
+									<DsIcon icon="close" size="medium" />
+								</Combobox.ClearTrigger>
+							)}
+
+							{showTrigger && (
+								<Combobox.Trigger className={styles.trigger} aria-label="Toggle dropdown">
+									<DsIcon icon="keyboard_arrow_down" size="medium" />
+								</Combobox.Trigger>
+							)}
+						</div>
+					)}
+				</Combobox.Context>
+			</Combobox.Control>
+
+			<Portal>
+				<Combobox.Positioner className={styles.positioner}>
+					<Combobox.Content className={styles.content}>
+						{collection.items.length === 0 ? (
+							<div className={styles.noMatches}>{noMatchesMessage}</div>
+						) : (
+							<Combobox.ItemGroup className={styles.itemGroup}>
+								<Combobox.Context>
+									{(context) =>
+										collection.items.map((item) => {
+											const option = options.find((opt) => opt.label === item);
+											return (
+												<Combobox.Item key={item} item={item} className={styles.item}>
+													{option?.icon && (
+														<DsIcon className={styles.itemIcon} icon={option.icon} aria-hidden="true" />
+													)}
+													<Combobox.ItemText className={styles.itemText}>
+														{highlightMatch ? (
+															<Highlight query={context.inputValue} text={item} ignoreCase />
+														) : (
+															item
+														)}
+													</Combobox.ItemText>
+												</Combobox.Item>
+											);
+										})
+									}
+								</Combobox.Context>
+							</Combobox.ItemGroup>
+						)}
+					</Combobox.Content>
+				</Combobox.Positioner>
+			</Portal>
+		</Combobox.Root>
+	);
+};

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

@@ -0,0 +1,76 @@
+import type React from 'react';
+import type { IconName } from '../ds-icon';
+
+export interface DsAutocompleteOption {
+	/**
+	 * Label to display in the autocomplete dropdown
+	 */
+	label: string;
+	/**
+	 * Value to return when the option is selected
+	 */
+	value: string;
+	/**
+	 * Optional icon to display next to the label
+	 */
+	icon?: IconName;
+}
+
+export interface DsAutocompleteProps {
+	/**
+	 * Unique identifier for the autocomplete component
+	 */
+	id?: string;
+	/**
+	 * Options to display in the dropdown
+	 */
+	options: DsAutocompleteOption[];
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Placeholder text to display when input is empty
+	 */
+	placeholder?: string;
+	/**
+	 * Whether the autocomplete is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * Whether the autocomplete is in an invalid state
+	 */
+	invalid?: boolean;
+	/**
+	 * Event handler called when the value changes (when an option is selected or custom value is entered)
+	 */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Event handler called when the input value changes (on every keystroke)
+	 */
+	onInputValueChange?: (value: string) => void;
+	/**
+	 * Message to display when no options match the input
+	 * @default 'No matches found'
+	 */
+	noMatchesMessage?: string;
+	/**
+	 * Whether to highlight the matching text in the dropdown options
+	 * @default true
+	 */
+	highlightMatch?: boolean;
+	/**
+	 * Whether to show the dropdown trigger (arrow) button.
+	 * If false, the dropdown will only open on typing.
+	 * @default true
+	 */
+	showTrigger?: boolean;
+	/**
+	 * Content to display at the start of the input (e.g., a search icon).
+	 */
+	startAdornment?: React.ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { DsAutocomplete } from './ds-autocomplete';
+export * from './ds-autocomplete.types';

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

@@ -1,4 +1,4 @@
-@import './mixins';
+@use './mixins' as *;
 
 .avatar {
 	display: inline-flex;

package/src/components/ds-avatar-group/ds-avatar-group.module.scss

@@ -1,4 +1,4 @@
-@import '../ds-avatar/mixins';
+@use '../ds-avatar/mixins' as *;
 
 .avatarGroup {
 	display: flex;