@drivenets/design-system 0.7.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -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.21",
-    "@zag-js/react": "^1.35.3",
-    "@zag-js/steps": "^1.35.3",
+    "@tanstack/react-virtual": "^3.13.23",
+    "@zag-js/react": "^1.37.0",
+    "@zag-js/steps": "^1.37.0",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -67,26 +67,25 @@
     "@eslint/compat": "^2.0.3",
     "@faker-js/faker": "^10.3.0",
     "@hookform/resolvers": "^5.2.2",
-    "@rollup/plugin-babel": "^7.0.0",
-    "@storybook/addon-a11y": "^10.2.16",
-    "@storybook/addon-docs": "^10.2.16",
-    "@storybook/addon-vitest": "^10.2.16",
-    "@storybook/builder-vite": "^10.2.16",
-    "@storybook/react-vite": "^10.2.16",
+    "@rolldown/plugin-babel": "^0.2.1",
+    "@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",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.3",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.16",
+    "eslint-plugin-storybook": "^10.2.19",
     "mockdate": "^3.0.5",
     "playwright": "^1.58.2",
     "postcss": "^8.5.8",
@@ -97,17 +96,17 @@
     "react-hook-form": "^7.71.2",
     "rollup-plugin-sass": "^1.15.3",
     "sass-embedded": "^1.97.3",
-    "storybook": "^10.2.16",
+    "storybook": "^10.2.19",
     "tsdown": "^0.21.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
-    "vitest-browser-react": "^2.0.5",
+    "vite": "^8.0.0",
+    "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.6",
+    "@drivenets/eslint-plugin-internal": "0.0.0"
   },
   "scripts": {
     "install:playwright": "pnpm exec playwright install chromium --with-deps",

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

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-comment-bubble/ds-comment-bubble.module.scss

@@ -62,7 +62,7 @@ $transition-duration: 0.2s;
 		resize: none;
 
 		&::placeholder {
-			color: var(--color-font-placeholder);
+			color: var(--color-font-disabled);
 		}
 	}
 }
@@ -199,7 +199,7 @@ $transition-duration: 0.2s;
 	overflow-y: auto;
 
 	&::placeholder {
-		color: var(--color-font-placeholder);
+		color: var(--color-font-disabled);
 	}
 
 	&:focus {
@@ -225,6 +225,10 @@ $transition-duration: 0.2s;
 	align-items: center;
 	justify-content: space-between;
 	padding: var(--spacing-xs) 0;
+
+	> :last-child {
+		margin-left: auto;
+	}
 }
 
 .sendButton {

package/src/components/ds-comment-bubble/ds-comment-bubble.tsx

@@ -15,6 +15,7 @@ export const DsCommentBubble = ({
 	ref,
 	comment,
 	currentUser,
+	hideActionRequired = false,
 	actionRequired = false,
 	onActionRequiredChange,
 	value = '',
@@ -96,7 +97,7 @@ export const DsCommentBubble = ({
 			className={classNames(
 				styles.bubble,
 				{
-					[styles.actionRequired]: actionRequired,
+					[styles.actionRequired]: !hideActionRequired && actionRequired,
 					[styles.initial]: isInitialMode,
 					[styles.typing]: isTypingMode,
 					[styles.thread]: hasThread,
@@ -117,7 +118,9 @@ export const DsCommentBubble = ({
 						<div className={styles.headerInfo}>
 							<span className={styles.commentId}>#{comment.numericId}</span>
 							{renderReferenceTag()}
-							{actionRequired && <span className={styles.actionRequiredBadge}>Action required</span>}
+							{!hideActionRequired && actionRequired && (
+								<span className={styles.actionRequiredBadge}>Action required</span>
+							)}
 						</div>
 					</div>
 
@@ -130,9 +133,11 @@ export const DsCommentBubble = ({
 									</DsButton>
 								</DsDropdownMenu.Trigger>
 								<DsDropdownMenu.Content className={styles.dropdownContent}>
-									<DsDropdownMenu.Item value="toggle-action" onClick={onToggleActionRequired}>
-										{actionRequired ? 'Remove action requirement' : 'Require action'}
-									</DsDropdownMenu.Item>
+									{!hideActionRequired && (
+										<DsDropdownMenu.Item value="toggle-action" onClick={onToggleActionRequired}>
+											{actionRequired ? 'Remove action requirement' : 'Require action'}
+										</DsDropdownMenu.Item>
+									)}
 									<DsDropdownMenu.Item value="forward" onClick={onForward}>
 										Forward
 									</DsDropdownMenu.Item>
@@ -205,8 +210,8 @@ export const DsCommentBubble = ({
 				{(isInitialMode || hasThread) && (
 					<DsButton
 						design="v1.2"
-						buttonType="tertiary"
-						size="tiny"
+						buttonType="primary"
+						size="small"
 						disabled={!hasContent}
 						onClick={handleSend}
 						aria-label="Send"
@@ -218,17 +223,19 @@ export const DsCommentBubble = ({
 
 			{showFooter && (
 				<div className={styles.footer}>
-					<DsCheckbox
-						variant="warning"
-						label="Action required"
-						checked={actionRequired}
-						onCheckedChange={(checked) => onActionRequiredChange?.(checked === true)}
-					/>
+					{!hideActionRequired && (
+						<DsCheckbox
+							variant="warning"
+							label="Action required"
+							checked={actionRequired}
+							onCheckedChange={(checked) => onActionRequiredChange?.(checked === true)}
+						/>
+					)}
 
 					<DsButton
 						design="v1.2"
-						buttonType="tertiary"
-						size="tiny"
+						buttonType="primary"
+						size="small"
 						disabled={!hasContent}
 						onClick={handleSend}
 						aria-label="Send"

package/src/components/ds-comment-bubble/ds-comment-bubble.types.ts

@@ -5,6 +5,7 @@ export interface DsCommentBubbleProps {
 	ref?: Ref<HTMLDivElement>;
 	comment?: CommentData;
 	currentUser?: CommentAuthor;
+	hideActionRequired?: boolean;
 	actionRequired?: boolean;
 	onActionRequiredChange?: (checked: boolean) => void;
 	value?: string;

package/src/components/ds-date-input/ds-date-input.tsx

@@ -16,10 +16,9 @@ import { DsTypography } from '../ds-typography';
 import styles from './ds-date-input.module.scss';
 
 /**
- * Design system date input component with integrated calendar picker.
- *
- * Supports both single date and date range selection with a single text input field.
- * Features built-in validation, manual text entry, and calendar selection.
+ * @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
  */
 const DsDateInput = ({
 	range = false,

package/src/components/ds-date-input/ds-date-input.types.ts

@@ -105,6 +105,8 @@ type DsDateInputBaseProps = Pick<
 };
 
 /**
- * Props for the DsDateInput component
+ * @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
  */
 export type DsDateInputProps = DsDateInputBaseProps & DsDateInputRangeProps;

package/src/components/ds-date-input/index.ts

@@ -1,2 +1,12 @@
+/**
+ * @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
+ */
 export { default as DsDateInput } from './ds-date-input';
+/**
+ * @deprecated These types are deprecated. Use DsDatePicker or DsDateRangePicker types instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
+ */
 export type { DsDateInputProps } from './ds-date-input.types';

package/src/components/ds-date-picker/components/calendar-table.module.scss

@@ -0,0 +1,93 @@
+.table {
+	width: 100%;
+	border-collapse: collapse;
+
+	.tableBody .tableRow .tableCellTrigger:focus-visible {
+		.tableCellTrigger {
+			outline: 2px solid var(--color-background-action-hover);
+			border-radius: var(--spacing-2xs);
+			border-width: 0;
+		}
+	}
+}
+
+.tableHeader {
+	text-align: center;
+	padding: var(--spacing-2xs);
+	color: var(--color-font-secondary);
+	font-weight: var(--font-weight-medium);
+}
+
+.tableRow {
+	&:first-child {
+		.tableCellTrigger {
+			margin-top: var(--spacing-xs);
+		}
+	}
+}
+
+.tableCellTrigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	outline: none;
+	border-radius: var(--spacing-xs);
+	color: var(--color-font-main);
+	margin: var(--spacing-3xs);
+
+	&:hover:not([data-disabled], [data-selected]) {
+		outline: 1px solid var(--color-border);
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&[data-outside-range] {
+		color: var(--color-font-disabled);
+	}
+
+	&[data-selected] {
+		background: var(--color-background-selected);
+		color: var(--color-font-on-action);
+	}
+
+	&[data-today]:not([data-selected]):hover {
+		border-radius: var(--spacing-xs);
+	}
+
+	&[data-today]:not([data-selected]) {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 75%;
+			bottom: 4px;
+			border-bottom: 1px solid var(--color-background-brand);
+		}
+	}
+
+	&[data-today][data-selected] {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 75%;
+			bottom: 4px;
+			border-bottom: 1px solid var(--color-background);
+		}
+	}
+
+	&[data-disabled] {
+		color: var(--color-font-disabled);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	&[data-unavailable] {
+		text-decoration: line-through;
+		opacity: 0.4;
+	}
+}

package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.module.scss

@@ -0,0 +1,48 @@
+.viewControl {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: var(--spacing-sm);
+}
+
+.viewTrigger {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	padding: var(--spacing-2xs) var(--spacing-xs);
+	border-radius: var(--spacing-2xs);
+	color: var(--color-font-main);
+	transition: background-color 0.2s;
+
+	&:hover {
+		background: var(--color-background-hover);
+	}
+}
+
+.prevTrigger,
+.nextTrigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	padding: var(--spacing-2xs);
+	border-radius: var(--spacing-2xs);
+	color: var(--color-font-secondary);
+	transition: all 0.2s;
+
+	&:hover {
+		background: var(--color-background-hover);
+		color: var(--color-font-main);
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+}

package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.tsx

@@ -0,0 +1,20 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import { DsIcon } from '../../../ds-icon';
+import { DsTypography } from '../../../ds-typography';
+import styles from './calendar-view-control.module.scss';
+
+export const CalendarViewControl = () => (
+	<DatePicker.ViewControl className={styles.viewControl}>
+		<DatePicker.PrevTrigger className={styles.prevTrigger}>
+			<DsIcon icon="chevron_left" size="small" />
+		</DatePicker.PrevTrigger>
+		<DatePicker.ViewTrigger className={styles.viewTrigger}>
+			<DsTypography variant="body-md-md" asChild>
+				<DatePicker.RangeText />
+			</DsTypography>
+		</DatePicker.ViewTrigger>
+		<DatePicker.NextTrigger className={styles.nextTrigger}>
+			<DsIcon icon="chevron_right" size="small" />
+		</DatePicker.NextTrigger>
+	</DatePicker.ViewControl>
+);

package/src/components/ds-date-picker/components/calendar-view-control/index.ts

@@ -0,0 +1 @@
+export * from './calendar-view-control';

package/src/components/ds-date-picker/components/day-view/day-view.module.scss

@@ -0,0 +1,12 @@
+$trigger-size: 32px;
+
+.dayView {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.trigger {
+	width: $trigger-size;
+	height: $trigger-size;
+}

package/src/components/ds-date-picker/components/day-view/day-view.tsx

@@ -0,0 +1,45 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import classNames from 'classnames';
+import { DsTypography } from '../../../ds-typography';
+import styles from './day-view.module.scss';
+import tableStyles from '../calendar-table.module.scss';
+import { CalendarViewControl } from '../calendar-view-control';
+
+export const DayView = ({ children }: { children?: React.ReactNode }) => (
+	<DatePicker.View view="day">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<div className={styles.dayView}>
+					<CalendarViewControl />
+					<DatePicker.Table className={tableStyles.table}>
+						<DatePicker.TableHead>
+							<DatePicker.TableRow className={tableStyles.tableRow}>
+								{datePicker.weekDays.map((weekDay, idx) => (
+									<DatePicker.TableHeader key={idx} className={tableStyles.tableHeader}>
+										<DsTypography variant="body-md-md">{weekDay.narrow}</DsTypography>
+									</DatePicker.TableHeader>
+								))}
+							</DatePicker.TableRow>
+						</DatePicker.TableHead>
+						<DatePicker.TableBody className={tableStyles.tableBody}>
+							{datePicker.weeks.map((week, weekIdx) => (
+								<DatePicker.TableRow key={weekIdx} className={tableStyles.tableRow}>
+									{week.map((day, dayIdx) => (
+										<DatePicker.TableCell key={dayIdx} value={day}>
+											<DatePicker.TableCellTrigger
+												className={classNames(tableStyles.tableCellTrigger, styles.trigger)}
+											>
+												<DsTypography variant="body-md-md">{day.day}</DsTypography>
+											</DatePicker.TableCellTrigger>
+										</DatePicker.TableCell>
+									))}
+								</DatePicker.TableRow>
+							))}
+						</DatePicker.TableBody>
+					</DatePicker.Table>
+					{children}
+				</div>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);

package/src/components/ds-date-picker/components/day-view/index.ts

@@ -0,0 +1 @@
+export * from './day-view';

package/src/components/ds-date-picker/components/month-view/index.ts

@@ -0,0 +1 @@
+export { MonthView } from './month-view';

package/src/components/ds-date-picker/components/month-view/month-view.module.scss

@@ -0,0 +1,4 @@
+.trigger {
+	width: 72px;
+	height: 40px;
+}

package/src/components/ds-date-picker/components/month-view/month-view.tsx

@@ -0,0 +1,35 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import classNames from 'classnames';
+import { DsTypography } from '../../../ds-typography';
+import styles from './month-view.module.scss';
+import tableStyles from '../calendar-table.module.scss';
+import { CalendarViewControl } from '../calendar-view-control';
+
+export const MonthView = () => (
+	<DatePicker.View view="month">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<>
+					<CalendarViewControl />
+					<DatePicker.Table className={tableStyles.table}>
+						<DatePicker.TableBody className={tableStyles.tableBody}>
+							{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, rowIdx) => (
+								<DatePicker.TableRow key={rowIdx} className={tableStyles.tableRow}>
+									{months.map((month, monthIdx) => (
+										<DatePicker.TableCell key={monthIdx} value={month.value}>
+											<DatePicker.TableCellTrigger
+												className={classNames(tableStyles.tableCellTrigger, styles.trigger)}
+											>
+												<DsTypography variant="body-md-md">{month.label}</DsTypography>
+											</DatePicker.TableCellTrigger>
+										</DatePicker.TableCell>
+									))}
+								</DatePicker.TableRow>
+							))}
+						</DatePicker.TableBody>
+					</DatePicker.Table>
+				</>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);

package/src/components/ds-date-picker/components/year-view/index.ts

@@ -0,0 +1 @@
+export { YearView } from './year-view';

package/src/components/ds-date-picker/components/year-view/year-view.module.scss

@@ -0,0 +1,4 @@
+.trigger {
+	width: 72px;
+	height: 40px;
+}

package/src/components/ds-date-picker/components/year-view/year-view.tsx

@@ -0,0 +1,35 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import classNames from 'classnames';
+import { DsTypography } from '../../../ds-typography';
+import styles from './year-view.module.scss';
+import tableStyles from '../calendar-table.module.scss';
+import { CalendarViewControl } from '../calendar-view-control';
+
+export const YearView = () => (
+	<DatePicker.View view="year">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<>
+					<CalendarViewControl />
+					<DatePicker.Table className={tableStyles.table}>
+						<DatePicker.TableBody className={tableStyles.tableBody}>
+							{datePicker.getYearsGrid({ columns: 4 }).map((years, rowIdx) => (
+								<DatePicker.TableRow key={rowIdx} className={tableStyles.tableRow}>
+									{years.map((year, yearIdx) => (
+										<DatePicker.TableCell key={yearIdx} value={year.value}>
+											<DatePicker.TableCellTrigger
+												className={classNames(tableStyles.tableCellTrigger, styles.trigger)}
+											>
+												<DsTypography variant="body-md-md">{year.label}</DsTypography>
+											</DatePicker.TableCellTrigger>
+										</DatePicker.TableCell>
+									))}
+								</DatePicker.TableRow>
+							))}
+						</DatePicker.TableBody>
+					</DatePicker.Table>
+				</>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);

package/src/components/ds-date-picker/ds-date-picker.module.scss

@@ -0,0 +1,19 @@
+@use '../../styles/shared/dropdown';
+
+.control {
+	display: flex;
+}
+
+.positioner {
+	@include dropdown.dropdown-viewport;
+}
+
+.content {
+	@include dropdown.dropdown-content;
+	padding: var(--spacing-standard);
+	min-width: fit-content;
+}
+
+.timePickerPopoverContent {
+	z-index: dropdown.$dropdown-z-index + 1;
+}