@drivenets/design-system 0.0.4 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -57,6 +57,7 @@
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
+    "@internationalized/date": "^3.0.0",
     "react": "^19"
   },
   "devDependencies": {
@@ -97,7 +98,7 @@
     "vite": "^7.3.0",
     "vitest": "^4.0.16",
     "zod": "^3.24.2",
-    "@drivenets/vite-plugin-design-system": "0.0.3"
+    "@drivenets/vite-plugin-design-system": "0.0.4"
   },
   "scripts": {
     "lint": "eslint --max-warnings=0 .",

package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss

@@ -15,7 +15,6 @@ $button-size-large: 40px;
 	outline: none;
 	padding-block: 0;
 	padding-inline: 0;
-	align-self: stretch;
 	border: 2px solid transparent;
 	border-radius: var(--exo-spacing-2x-small);
 

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

@@ -0,0 +1,246 @@
+@use '../../styles/shared/input';
+@use '../../styles/shared/dropdown';
+
+.dateInputControl {
+	@include input.base-input-container;
+	@include input.input-container-states;
+	max-height: input.$input-text-height-default;
+	justify-content: space-between;
+	padding: var(--spacing-xs) var(--spacing-sm);
+	gap: var(--spacing-3xs);
+
+	border-color: var(--form-control-border-color, var(--color-border));
+
+	&:hover:not(.disabled) {
+		border-color: var(--form-control-border-color, var(--color-border-hover));
+	}
+
+	&:focus-within {
+		border-color: var(--form-control-border-color, var(--color-border-action));
+	}
+
+	&.disabled {
+		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);
+		}
+
+		.dateInputButton {
+			color: var(--color-background-disable);
+			cursor: not-allowed;
+		}
+	}
+
+	&.readOnly {
+		background: var(--color-background-secondary);
+		cursor: default;
+	}
+}
+
+.input {
+	@include input.base-input;
+	min-width: 0;
+	flex: 1;
+	padding: 0;
+}
+
+.dateInputButton {
+	@include input.icon-button;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	padding: 0;
+	transition: color 0.2s ease;
+
+	&:hover:not(:disabled) {
+		color: var(--color-background-action-hover);
+	}
+
+	&:disabled {
+		color: var(--color-background-disable);
+		cursor: not-allowed;
+	}
+}
+
+.positioner {
+	@include dropdown.dropdown-viewport;
+}
+
+.content {
+	@include dropdown.dropdown-content;
+	padding: var(--spacing-standard);
+}
+
+.viewControl {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: var(--spacing-xs);
+}
+
+.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;
+	}
+}
+
+.calendarView {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.table {
+	width: 100%;
+	border-collapse: collapse;
+
+	.tableBody .tableRow .tableCellTrigger:focus-visible {
+		.tableCellTriggerValue {
+			outline: 2px solid var(--color-background-action-hover);
+			border-radius: var(--spacing-2xs);
+			border-width: 0;
+		}
+	}
+}
+
+.tableHead {
+	border-bottom: 1px solid var(--color-border);
+}
+
+.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;
+
+	.tableCellTriggerValue {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--spacing-xl);
+		height: var(--spacing-xl);
+		margin: var(--spacing-3xs);
+		color: var(--color-font-main);
+		border-radius: var(--spacing-xs);
+	}
+
+	&:hover:not([data-disabled], [data-selected], [data-in-range], [data-in-hover-range])
+		.tableCellTriggerValue {
+		outline: 1px solid var(--color-border);
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&[data-outside-range] .tableCellTriggerValue {
+		color: var(--color-font-disabled);
+	}
+
+	&[data-selected] .tableCellTriggerValue {
+		background: var(--color-background-selected);
+		color: var(--color-font-on-action);
+	}
+
+	&[data-in-range]:not([data-selected]) {
+		position: relative;
+
+		.tableCellTriggerValue {
+			background: var(--color-background-action-secondary-hover);
+		}
+	}
+
+	&[data-today]:not([data-selected], [data-in-range]):hover .tableCellTriggerValue {
+		border-radius: var(--spacing-xs);
+	}
+
+	&[data-today]:not([data-selected]) .tableCellTriggerValue {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 75%;
+			bottom: 4px;
+			border-bottom: 1px solid var(--color-background-brand);
+		}
+	}
+
+	&[data-today][data-selected] .tableCellTriggerValue {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 75%;
+			bottom: 4px;
+			border-bottom: 1px solid var(--color-background);
+		}
+	}
+
+	&[data-disabled] .tableCellTriggerValue {
+		color: var(--color-font-disabled);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	&[data-unavailable] .tableCellTriggerValue {
+		text-decoration: line-through;
+		opacity: 0.4;
+	}
+}

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

@@ -0,0 +1,309 @@
+import { type ChangeEvent, Fragment, useRef, useState } from 'react';
+import { DatePicker } from '@ark-ui/react/date-picker';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import type { DsDateInputProps } from './ds-date-input.types';
+import {
+	dateValuesToStrings,
+	formatDateInputValue,
+	isoStringToDateValue,
+	parseInputText,
+	stringToDateValue,
+	validateDateString,
+} from './ds-date-input.utils';
+import { DsIcon } from '../ds-icon';
+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.
+ */
+const DsDateInput = ({
+	range = false,
+	placeholder,
+	style,
+	className,
+	disablePortal = false,
+	onValueChange,
+	onOpenChange,
+	value: _value,
+	defaultValue: _defaultValue,
+	min: _min,
+	max: _max,
+	disabled,
+	readOnly,
+	id,
+	...datePickerProps
+}: DsDateInputProps) => {
+	const min = _min ? isoStringToDateValue(_min) : undefined;
+	const max = _max ? isoStringToDateValue(_max) : undefined;
+
+	// Convert public API (string | [string, string]) to internal API (DateValue[])
+	const value = _value ? stringToDateValue(_value) : [];
+	const defaultValue = _defaultValue ? stringToDateValue(_defaultValue) : [];
+
+	// Local state for manual text editing
+	const [isFocused, setIsFocused] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+
+	const prevValue = useRef<string | null>(null);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	// Reformat the input value on every value change
+	// We don't format when the input is focused since the date value might get updated while the user is typing
+	// but we don't want to reformat the input text for him while he's typing.
+	if (!isFocused && prevValue.current !== JSON.stringify(value)) {
+		prevValue.current = JSON.stringify(value);
+
+		if (inputRef.current) {
+			inputRef.current.value = formatDateInputValue(value, range);
+		}
+	}
+
+	const clear = () => {
+		if (inputRef.current) {
+			inputRef.current.value = '';
+		}
+
+		onValueChange?.(undefined);
+	};
+
+	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const text = e.target.value;
+
+		// Try to parse and validate as the user types
+		const validation = validateDateString({ text, range, min, max });
+
+		if (validation.isValid) {
+			const parsedValue = parseInputText(text, range);
+			onValueChange?.(dateValuesToStrings(parsedValue, range) as never);
+		}
+	};
+
+	const handleBlur = () => {
+		setIsFocused(false);
+
+		const text = inputRef.current?.value || '';
+		const validation = validateDateString({ text, range, min, max });
+
+		// Clear invalid input on blur
+		if (!validation.isValid) {
+			clear();
+			return;
+		}
+
+		const parsedValue = parseInputText(text, range);
+
+		onValueChange?.(dateValuesToStrings(parsedValue, range) as never);
+	};
+
+	const showClearButton = !disabled && !readOnly && !!(value.length > 0 ? value : defaultValue).length;
+	const Wrapper = disablePortal ? Fragment : Portal;
+
+	return (
+		<DatePicker.Root
+			value={value}
+			defaultValue={defaultValue}
+			onValueChange={(details) => {
+				onValueChange?.(dateValuesToStrings(details.value, range) as never);
+			}}
+			selectionMode={range ? 'range' : 'single'}
+			positioning={{ placement: 'bottom-start', gutter: 4 }}
+			closeOnSelect={!range}
+			min={min}
+			max={max}
+			disabled={disabled}
+			readOnly={readOnly}
+			open={isOpen}
+			onOpenChange={(details) => {
+				// Don't close the calendar when the user is typing
+				if (!isFocused) {
+					setIsOpen(details.open);
+					onOpenChange?.(details.open);
+				}
+			}}
+			{...datePickerProps}
+		>
+			<DatePicker.Control
+				style={style}
+				className={classNames(
+					styles.dateInputControl,
+					disabled && styles.disabled,
+					readOnly && styles.readOnly,
+					className,
+				)}
+			>
+				<DatePicker.Trigger asChild>
+					<button
+						type="button"
+						className={styles.dateInputButton}
+						disabled={disabled}
+						aria-label="Open calendar"
+					>
+						<DsIcon icon="calendar_month" size="small" />
+					</button>
+				</DatePicker.Trigger>
+
+				<input
+					ref={inputRef}
+					id={id}
+					type="text"
+					className={styles.input}
+					placeholder={placeholder ?? (range ? 'MM/DD/YYYY - MM/DD/YYYY' : 'MM/DD/YYYY')}
+					defaultValue={formatDateInputValue(value.length > 0 ? value : defaultValue, range)}
+					onChange={handleInputChange}
+					onBlur={handleBlur}
+					onFocus={() => setIsFocused(true)}
+					disabled={disabled}
+					readOnly={readOnly}
+				/>
+
+				{showClearButton && (
+					<button
+						type="button"
+						className={styles.dateInputButton}
+						onClick={clear}
+						aria-label={range ? 'Clear date range' : 'Clear date'}
+					>
+						<DsIcon icon="close" size="small" />
+					</button>
+				)}
+			</DatePicker.Control>
+
+			<Wrapper>
+				<DatePicker.Positioner className={styles.positioner}>
+					<DatePicker.Content className={styles.content}>
+						<CalendarViewControl />
+						<div className={styles.calendarView}>
+							<DayView />
+							<MonthView />
+							<YearView />
+						</div>
+					</DatePicker.Content>
+				</DatePicker.Positioner>
+			</Wrapper>
+		</DatePicker.Root>
+	);
+};
+
+/**
+ * Calendar view control with navigation buttons
+ */
+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} asChild>
+			<button type="button">
+				<DsTypography variant="body-md-md" asChild>
+					<DatePicker.RangeText />
+				</DsTypography>
+			</button>
+		</DatePicker.ViewTrigger>
+		<DatePicker.NextTrigger className={styles.nextTrigger}>
+			<DsIcon icon="chevron_right" size="small" />
+		</DatePicker.NextTrigger>
+	</DatePicker.ViewControl>
+);
+
+/**
+ * Day view - displays calendar grid with days of the month
+ */
+const DayView = () => (
+	<DatePicker.View view="day">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<DatePicker.Table className={styles.table}>
+					<DatePicker.TableHead className={styles.tableHead}>
+						<DatePicker.TableRow className={styles.tableRow}>
+							{datePicker.weekDays.map((weekDay, id) => (
+								<DatePicker.TableHeader key={id} className={styles.tableHeader}>
+									<DsTypography variant="body-md-md">{weekDay.short}</DsTypography>
+								</DatePicker.TableHeader>
+							))}
+						</DatePicker.TableRow>
+					</DatePicker.TableHead>
+					<DatePicker.TableBody className={styles.tableBody}>
+						{datePicker.weeks.map((week, weekId) => (
+							<DatePicker.TableRow key={weekId} className={styles.tableRow}>
+								{week.map((day, dayId) => (
+									<DatePicker.TableCell key={dayId} value={day}>
+										<DatePicker.TableCellTrigger className={styles.tableCellTrigger}>
+											<DsTypography className={styles.tableCellTriggerValue} variant="body-md-md">
+												{day.day}
+											</DsTypography>
+										</DatePicker.TableCellTrigger>
+									</DatePicker.TableCell>
+								))}
+							</DatePicker.TableRow>
+						))}
+					</DatePicker.TableBody>
+				</DatePicker.Table>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);
+
+/**
+ * Month view - displays grid with months of the year
+ */
+const MonthView = () => (
+	<DatePicker.View view="month">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<DatePicker.Table className={styles.table}>
+					<DatePicker.TableBody className={styles.tableBody}>
+						{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, rowId) => (
+							<DatePicker.TableRow key={rowId} className={styles.tableRow}>
+								{months.map((month, monthId) => (
+									<DatePicker.TableCell key={monthId} value={month.value}>
+										<DatePicker.TableCellTrigger className={styles.tableCellTrigger}>
+											<DsTypography className={styles.tableCellTriggerValue} variant="body-md-md">
+												{month.label}
+											</DsTypography>
+										</DatePicker.TableCellTrigger>
+									</DatePicker.TableCell>
+								))}
+							</DatePicker.TableRow>
+						))}
+					</DatePicker.TableBody>
+				</DatePicker.Table>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);
+
+/**
+ * Year view - displays grid with years in a decade
+ */
+const YearView = () => (
+	<DatePicker.View view="year">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<DatePicker.Table className={styles.table}>
+					<DatePicker.TableBody className={styles.tableBody}>
+						{datePicker.getYearsGrid({ columns: 4 }).map((years, rowId) => (
+							<DatePicker.TableRow key={rowId} className={styles.tableRow}>
+								{years.map((year, yearId) => (
+									<DatePicker.TableCell key={yearId} value={year.value}>
+										<DatePicker.TableCellTrigger className={styles.tableCellTrigger}>
+											<DsTypography className={styles.tableCellTriggerValue} variant="body-md-md">
+												{year.label}
+											</DsTypography>
+										</DatePicker.TableCellTrigger>
+									</DatePicker.TableCell>
+								))}
+							</DatePicker.TableRow>
+						))}
+					</DatePicker.TableBody>
+				</DatePicker.Table>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);
+
+export default DsDateInput;

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

@@ -0,0 +1,104 @@
+import { type DatePickerRootProps } from '@ark-ui/react/date-picker';
+
+/**
+ * Range-specific props with discriminated union for type safety
+ */
+type DsDateInputRangeProps =
+	| {
+			/**
+			 * Whether to enable range selection
+			 * @default false
+			 */
+			range?: false;
+
+			/**
+			 * Controlled value as ISO date string (YYYY-MM-DD)
+			 * @example '2024-12-25'
+			 */
+			value?: string;
+
+			/**
+			 * Default value for uncontrolled mode
+			 * @example '2024-12-25'
+			 */
+			defaultValue?: string;
+
+			/**
+			 * Callback when the value changes
+			 * @param value - ISO date string (YYYY-MM-DD) or undefined when empty
+			 * @example '2024-12-25'
+			 */
+			onValueChange?: (value: string | undefined) => void;
+	  }
+	| {
+			/**
+			 * Whether to enable range selection
+			 */
+			range: true;
+
+			/**
+			 * Controlled value as ISO date string tuple (YYYY-MM-DD)
+			 * @example ['2024-12-01', '2024-12-31']
+			 */
+			value?: [string, string];
+
+			/**
+			 * Default value for uncontrolled mode
+			 * @example ['2024-12-01', '2024-12-31']
+			 */
+			defaultValue?: [string, string];
+
+			/**
+			 * Callback when the value changes
+			 * @param value - ISO date string tuple (YYYY-MM-DD) or undefined when empty
+			 * @example ['2024-12-01', '2024-12-31']
+			 */
+			onValueChange?: (value: [string, string] | undefined) => void;
+	  };
+
+/**
+ * Base props shared across all modes
+ */
+type DsDateInputBaseProps = Pick<
+	DatePickerRootProps,
+	'disabled' | 'readOnly' | 'id' | 'open' | 'name' | 'style'
+> & {
+	/**
+	 * Callback when the open state changes
+	 * @param open - Whether the calendar is open
+	 */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * Minimum allowed date as ISO string (YYYY-MM-DD)
+	 * @example '2024-01-01'
+	 */
+	min?: string;
+
+	/**
+	 * Maximum allowed date as ISO string (YYYY-MM-DD)
+	 * @example '2024-12-31'
+	 */
+	max?: string;
+
+	/**
+	 * Placeholder text for the input
+	 * @default 'MM/DD/YYYY' for single date, 'MM/DD/YYYY - MM/DD/YYYY' for range
+	 */
+	placeholder?: string;
+
+	/**
+	 * Custom class name for the root container
+	 */
+	className?: string;
+
+	/**
+	 * Whether to disable the portal for the calendar content
+	 * @default false
+	 */
+	disablePortal?: boolean;
+};
+
+/**
+ * Props for the DsDateInput component
+ */
+export type DsDateInputProps = DsDateInputBaseProps & DsDateInputRangeProps;