@drivenets/design-system 0.2.0 → 0.4.0

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

@@ -44,7 +44,11 @@ export const stringToDateValue = (dates: string | [string, string]): DateValue[]
 export const dateValuesToStrings = (dates: DateValue[], range: boolean): string | [string, string] => {
 	const values = dates.map((date) => date.toString());
 
-	return range ? [values[0], values[1]] : values[0];
+	if (range) {
+		return [values[0] ?? '', values[1] ?? ''];
+	}
+
+	return values[0] ?? '';
 };
 
 /**
@@ -68,7 +72,7 @@ export const formatDateInputValue = (value: DateValue[], range: boolean): string
 	}
 	const newValue = value.map(formatDateValue);
 
-	return range ? newValue.join(' - ') : newValue[0];
+	return range ? newValue.join(' - ') : (newValue[0] ?? '');
 };
 
 /**
@@ -86,6 +90,11 @@ const parseDateString = (dateStr: string): DateValue | null => {
 	}
 
 	const [, month, day, year] = match;
+
+	if (!month || !day || !year) {
+		return null;
+	}
+
 	const monthNum = parseInt(month, 10);
 	const dayNum = parseInt(day, 10);
 	const yearNum = parseInt(year, 10);
@@ -129,6 +138,11 @@ const parseRangeInput = (text: string): ParsedDateRange => {
 	}
 
 	const [startStr, endStr] = parts;
+
+	if (!startStr || !endStr) {
+		return { start: null, end: null, isValid: false };
+	}
+
 	const startDate = parseDateString(startStr);
 	const endDate = parseDateString(endStr);
 

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

@@ -46,9 +46,12 @@ const DsDrawer = ({
 						style={style}
 						className={classNames(
 							styles.drawer,
-							styles[`cols-${String(columns)}`],
 							styles[`position-${position}`],
 							className,
+
+							// @ts-expect-error: these classnames are generated dynamically in scss
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+							styles[`cols-${String(columns)}`],
 						)}
 					>
 						<div className={styles.content}>{children}</div>

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

@@ -8,7 +8,6 @@
 	max-height: var(--available-height, 400px);
 	overflow-y: auto;
 	width: auto;
-	z-index: var(--layer-index);
 
 	&:focus-visible {
 		outline-offset: 2px;

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

@@ -10,7 +10,10 @@ type BasePositioning = NonNullable<Menu.RootProps['positioning']>;
 /**
  * Positioning options for dropdown menu
  */
-export type DsDropdownMenuPositioning = Pick<BasePositioning, 'placement' | 'gutter' | 'sameWidth'>;
+export type DsDropdownMenuPositioning = Pick<
+	BasePositioning,
+	'placement' | 'gutter' | 'sameWidth' | 'getAnchorRect'
+>;
 
 /**
  * DEPRECATED: Legacy dropdown menu option configuration

package/src/components/ds-file-upload/utils/format-file-size.ts

@@ -11,5 +11,5 @@ export function formatFileSize(bytes: number): string {
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
 	const size = bytes / Math.pow(k, i);
 
-	return `${size.toFixed(2)} ${sizes[i]}`;
+	return `${size.toFixed(2)} ${String(sizes[i])}`;
 }

package/src/components/ds-form-control/ds-form-control.tsx

@@ -57,7 +57,14 @@ const DsFormControl = ({
 	return (
 		<FormControlContext.Provider value={{ controlId }}>
 			<div
-				className={classNames(styles.container, status && message && styles[status], className)}
+				className={classNames(
+					styles.container,
+					className,
+
+					// @ts-expect-error: `info` doesn't have its own classname
+					// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+					status && message && styles[status],
+				)}
 				style={style}
 			>
 				<div className={styles.labelContainer}>
@@ -77,7 +84,7 @@ const DsFormControl = ({
 				{message && (
 					<div className={styles.message}>
 						<DsIcon icon={messageIcon} size="tiny" filled />
-						<span className={styles.messageText}>{message}</span>
+						<span>{message}</span>
 					</div>
 				)}
 			</div>

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

@@ -0,0 +1,57 @@
+.loaderContainer {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.loader {
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.pulsingIcon {
+	--loader-pulsing-color: #5452f6;
+
+	color: var(--loader-pulsing-color);
+}
+
+.pulsingOuter {
+	fill: currentcolor;
+	opacity: 0.3;
+	transform-origin: center;
+	animation: pulse 1.4s ease-in-out infinite;
+}
+
+.pulsingInner {
+	fill: currentcolor;
+}
+
+@keyframes pulse {
+	0%,
+	100% {
+		transform: scale(0.7);
+		opacity: 0.3;
+	}
+
+	50% {
+		transform: scale(1.1);
+		opacity: 0.15;
+	}
+}
+
+.spinnerGradient {
+	--loader-spinner-color: #4192f6;
+
+	background: conic-gradient(from 90deg, var(--loader-spinner-color) 0deg, transparent 360deg);
+	height: 100%;
+	width: 100%;
+}

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

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import styles from './ds-loader.module.scss';
+import type { DsLoaderProps } from './ds-loader.types';
+import PulsingIcon from './pulsing-icon';
+import SpinnerIcon from './spinner-icon';
+
+/**
+ * Design system Loader component
+ */
+const DsLoader = ({ variant = 'spinner', className, ...props }: DsLoaderProps) => {
+	return (
+		<div className={classNames(styles.loaderContainer, className)} {...props}>
+			{variant === 'pulsing' ? <PulsingIcon /> : <SpinnerIcon />}
+		</div>
+	);
+};
+
+export default DsLoader;

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

@@ -0,0 +1,24 @@
+import type React from 'react';
+
+export const loaderVariants = ['spinner', 'pulsing'] as const;
+export type LoaderVariant = (typeof loaderVariants)[number];
+
+export interface DsLoaderProps {
+	/**
+	 * Loader variant
+	 * @default 'spinner'
+	 */
+	variant?: LoaderVariant;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * Ref to the loader container element
+	 */
+	ref?: React.Ref<HTMLDivElement>;
+}

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

@@ -0,0 +1,2 @@
+export { default as DsLoader } from './ds-loader';
+export * from './ds-loader.types';

package/src/components/ds-loader/pulsing-icon.tsx

@@ -0,0 +1,17 @@
+import styles from './ds-loader.module.scss';
+
+const PulsingIcon = () => (
+	<svg
+		className={styles.pulsingIcon}
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<circle className={styles.pulsingOuter} cx="12" cy="12" r="8" />
+		<circle className={styles.pulsingInner} cx="12" cy="12" r="5.5" />
+	</svg>
+);
+
+export default PulsingIcon;

package/src/components/ds-loader/spinner-icon.tsx

@@ -0,0 +1,37 @@
+import styles from './ds-loader.module.scss';
+
+const SpinnerIcon = () => (
+	<svg
+		className={styles.loader}
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<mask id="path-2-inside-1_14836_15182" fill="white">
+			<path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" />
+		</mask>
+		<g clipPath="url(#paint0_angular_14836_15182_clip_path)" mask="url(#path-2-inside-1_14836_15182)">
+			<g transform="matrix(-0.008 0 0 0.008 12 12)">
+				<foreignObject x="-1375" y="-1375" width="2750" height="2750">
+					<div className={styles.spinnerGradient} />
+				</foreignObject>
+			</g>
+		</g>
+		<path
+			d="M12 4L12 7C9.23858 7 7 9.23858 7 12L4 12L1 12C1 5.92487 5.92487 1 12 1L12 4ZM4 12L7 12C7 14.7614 9.23858 17 12 17L12 20L12 23C5.92487 23 1 18.0751 1 12L4 12ZM12 20L12 17C14.7614 17 17 14.7614 17 12L20 12L23 12C23 18.0751 18.0751 23 12 23L12 20ZM20 12L17 12C17 9.23858 14.7614 7 12 7L12 4L12 1C18.0751 1 23 5.92487 23 12L20 12Z"
+			mask="url(#path-2-inside-1_14836_15182)"
+		/>
+		<defs>
+			<clipPath id="paint0_angular_14836_15182_clip_path">
+				<path
+					d="M12 4L12 7C9.23858 7 7 9.23858 7 12L4 12L1 12C1 5.92487 5.92487 1 12 1L12 4ZM4 12L7 12C7 14.7614 9.23858 17 12 17L12 20L12 23C5.92487 23 1 18.0751 1 12L4 12ZM12 20L12 17C14.7614 17 17 14.7614 17 12L20 12L23 12C23 18.0751 18.0751 23 12 23L12 20ZM20 12L17 12C17 9.23858 14.7614 7 12 7L12 4L12 1C18.0751 1 23 5.92487 23 12L20 12Z"
+					mask="url(#path-2-inside-1_14836_15182)"
+				/>
+			</clipPath>
+		</defs>
+	</svg>
+);
+
+export default SpinnerIcon;

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

@@ -1,20 +1,91 @@
-@use '../../styles/shared/modal' as shared;
-
-$pad-x: 24px;
-$pad-y: 16px;
+$pad-x: var(--spacing-lg);
+$pad-y: var(--spacing-standard);
 $max-width: 90vw;
-$max-height: 90vh;
+$border-size: 1px;
+$border: $border-size solid var(--color-border-secondary);
 
 .overlay {
-	@include shared.overlay-base;
+	position: fixed;
+	inset: 0;
+	background: var(--color-background-brand);
+	opacity: 0.4;
+	z-index: 1199;
+
+	&[data-state='open'] {
+		animation: fade-in-overlay 0.2s ease-in-out both;
+	}
+
+	&[data-state='closed'] {
+		animation: fade-out-overlay 0.2s 0.1s ease-in-out both;
+	}
+}
+
+@keyframes fade-in-overlay {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 0.4;
+	}
+}
+
+@keyframes fade-out-overlay {
+	0% {
+		opacity: 0.4;
+	}
+
+	100% {
+		opacity: 0;
+	}
 }
 
 .modal {
-	@include shared.modal-base;
+	position: fixed;
+	inset: 50% auto auto 50%;
+	background: var(--color-background);
+	border-radius: 4px;
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	z-index: 1200;
+	overflow: hidden;
+	inline-size: min(var(--col-span-6), $max-width);
+
+	&[data-state='open'] {
+		animation: scale-in-modal 0.2s 0.1s ease-in-out both;
+	}
+
+	&[data-state='closed'] {
+		animation: scale-out-modal 0.2s ease-in-out both;
+	}
+}
+
+@keyframes scale-in-modal {
+	0% {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.9);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+
+@keyframes scale-out-modal {
+	0% {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.9);
+	}
 }
 
 .content {
-	@include shared.content-base;
+	display: flex;
+	flex-direction: column;
 	height: 100%;
 }
 
@@ -25,76 +96,68 @@ $max-height: 90vh;
 }
 
 .header {
-	@include shared.header-base;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	position: relative;
+	background: inherit;
+	flex-shrink: 0;
+
+	&::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: $pad-x;
+		right: $pad-x;
+		height: $border-size;
+		background: var(--color-border-secondary);
+	}
 }
 
 .footer {
-	@include shared.footer-base;
 	display: flex;
+	background: inherit;
+	flex-shrink: 0;
 }
 
 .title {
-	@include shared.title-base;
+	color: var(--color-font-main);
+	margin: 0;
+	flex: 1;
 }
 
 .body {
-	@include shared.body-base;
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	min-height: 0;
 }
 
 .actions {
-	@include shared.actions-base;
+	display: flex;
+	gap: var(--spacing-xs);
+	justify-content: flex-end;
 	margin-left: auto;
 }
 
-// width classes derived from DS grid
-.modal {
-	inline-size: min(var(--col-span-6), $max-width);
-}
-
-.modal.cols-1 {
-	inline-size: min(var(--col-span-1), $max-width);
-}
-
-.modal.cols-2 {
-	inline-size: min(var(--col-span-2), $max-width);
-}
-
-.modal.cols-3 {
-	inline-size: min(var(--col-span-3), $max-width);
-}
-
-.modal.cols-4 {
-	inline-size: min(var(--col-span-4), $max-width);
-}
-
-.modal.cols-5 {
-	inline-size: min(var(--col-span-5), $max-width);
-}
-
-.modal.cols-6 {
-	inline-size: min(var(--col-span-6), $max-width);
-}
-
-.modal.cols-7 {
-	inline-size: min(var(--col-span-7), $max-width);
-}
+// Dividers mode: full-width borders on header and footer
+.content[data-dividers] {
+	.header {
+		border-bottom: $border;
 
-.modal.cols-8 {
-	inline-size: min(var(--col-span-8), $max-width);
-}
-
-.modal.cols-9 {
-	inline-size: min(var(--col-span-9), $max-width);
-}
-
-.modal.cols-10 {
-	inline-size: min(var(--col-span-10), $max-width);
-}
+		&::after {
+			display: none;
+		}
+	}
 
-.modal.cols-11 {
-	inline-size: min(var(--col-span-11), $max-width);
+	.footer {
+		border-top: $border;
+	}
 }
 
-.modal.cols-12 {
-	inline-size: min(var(--col-span-12), $max-width);
+// Width classes derived from DS grid
+@for $i from 1 through 12 {
+	.modal.cols-#{$i} {
+		inline-size: min(var(--col-span-#{$i}), $max-width);
+	}
 }

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

@@ -14,14 +14,15 @@ import { DsTypography } from '../ds-typography';
  */
 const DsModal = ({
 	open,
-	onOpenChange,
 	columns = 6,
+	dividers = false,
 	style,
 	className,
 	modal = true,
 	closeOnEscape,
 	closeOnInteractOutside = false,
 	children,
+	onOpenChange,
 }: DsModalProps) => {
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);
@@ -40,9 +41,17 @@ const DsModal = ({
 				<Dialog.Positioner>
 					<Dialog.Content
 						style={style}
-						className={classNames(styles.modal, styles[`cols-${String(columns)}`], className)}
+						className={classNames(
+							styles.modal,
+							className,
+
+							// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+							styles[`cols-${columns}`],
+						)}
 					>
-						<div className={classNames(styles.content)}>{children}</div>
+						<div className={styles.content} data-dividers={dividers || undefined}>
+							{children}
+						</div>
 					</Dialog.Content>
 				</Dialog.Positioner>
 			</Portal>

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

@@ -17,21 +17,24 @@ export interface DsModalProps extends Pick<
 	 * Whether the modal is open
 	 */
 	open: boolean;
-	/**
-	 * Callback when modal open state changes
-	 * @param open - whether the modal is open
-	 */
-	onOpenChange: (open: boolean) => void;
 
 	/**
 	 * Number of grid columns for modal width
 	 * @default 6
 	 */
 	columns?: DsModalColumns;
+
+	/**
+	 * Show full-width dividers between header, body, and footer sections
+	 * @default false
+	 */
+	dividers?: boolean;
+
 	/**
 	 * Optional inline styles to apply to the component
 	 */
 	style?: CSSProperties;
+
 	/**
 	 * Additional CSS class name
 	 */
@@ -41,4 +44,10 @@ export interface DsModalProps extends Pick<
 	 * Modal body content
 	 */
 	children: ReactNode;
+
+	/**
+	 * Callback when modal open state changes
+	 * @param open - whether the modal is open
+	 */
+	onOpenChange: (open: boolean) => void;
 }

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

@@ -66,7 +66,7 @@ const DsSelect = ({
 		onValueChange: (details) => {
 			// Single select mode.
 			if (!multiselectProps.multiple) {
-				multiselectProps.onValueChange?.(details.value[0]);
+				multiselectProps.onValueChange?.(details.value[0] ?? '');
 				return;
 			}
 

package/src/components/ds-skeleton/ds-skeleton-circle.tsx

@@ -0,0 +1,29 @@
+import type { CSSProperties } from 'react';
+import classNames from 'classnames';
+import type { DsSkeletonCircleProps } from './ds-skeleton.types';
+import { circleSizeMap } from './ds-skeleton.config';
+import styles from './ds-skeleton.module.scss';
+
+/**
+ * Circle skeleton component - for avatars and icons
+ * Matches DsAvatar sizes
+ */
+const DsSkeletonCircle = ({ size = 'regular', color = 'gray', className, style }: DsSkeletonCircleProps) => {
+	const pixelSize = typeof size === 'number' ? size : circleSizeMap[size];
+
+	const circleStyle: CSSProperties = {
+		width: `${String(pixelSize)}px`,
+		height: `${String(pixelSize)}px`,
+		...style,
+	};
+
+	return (
+		<span
+			className={classNames(styles.skeleton, styles.circle, styles[color], className)}
+			style={circleStyle}
+			aria-hidden="true"
+		/>
+	);
+};
+
+export default DsSkeletonCircle;

package/src/components/ds-skeleton/ds-skeleton-rect.tsx

@@ -0,0 +1,36 @@
+import type React from 'react';
+import classNames from 'classnames';
+import type { DsSkeletonRectProps } from './ds-skeleton.types';
+import { radiusMap } from './ds-skeleton.config';
+import styles from './ds-skeleton.module.scss';
+
+/**
+ * Rectangle skeleton component - for buttons, images, and custom shapes
+ */
+const DsSkeletonRect = ({
+	width,
+	height,
+	radius = 'default',
+	color = 'gray',
+	className,
+	style,
+}: DsSkeletonRectProps) => {
+	const borderRadius = typeof radius === 'number' ? radius : radiusMap[radius];
+
+	const rectStyle: React.CSSProperties = {
+		width: typeof width === 'number' ? `${String(width)}px` : width,
+		height: typeof height === 'number' ? `${String(height)}px` : height,
+		borderRadius: `${String(borderRadius)}px`,
+		...style,
+	};
+
+	return (
+		<span
+			className={classNames(styles.skeleton, styles.rectangle, styles[color], className)}
+			style={rectStyle}
+			aria-hidden="true"
+		/>
+	);
+};
+
+export default DsSkeletonRect;