@drivenets/design-system 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -97,6 +97,7 @@
     "sass-embedded": "^1.97.0",
     "storybook": "^10.1.9",
     "tsdown": "^0.18.0",
+    "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^7.3.0",
@@ -105,8 +106,9 @@
     "@drivenets/vite-plugin-design-system": "0.0.4"
   },
   "scripts": {
-    "lint": "eslint --max-warnings=0 .",
-    "typecheck": "tsc",
+    "lint": "pnpm generate-scss-dts; eslint --max-warnings=0 .",
+    "typecheck": "pnpm generate-scss-dts; tsc",
+    "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",
     "build": "tsdown",

package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.tsx

@@ -16,13 +16,7 @@ const DsButton: React.FC<DsButtonProps> = ({
 	children,
 	...props
 }) => {
-	const buttonClass = classNames(
-		styles.button,
-		styles[`${schema}-${variant}`],
-		styles[size],
-		{ [styles.disabled]: disabled },
-		className,
-	);
+	const buttonClass = classNames(styles.button, styles[`${schema}-${variant}`], styles[size], className);
 
 	return (
 		<button type="button" className={buttonClass} disabled={disabled} {...props}>

package/src/components/ds-button/versions/ds-button-new/ds-button-new.tsx

@@ -33,10 +33,12 @@ const DsButton: React.FC<DsButtonProps> = ({
 	const buttonClass = classNames(
 		styles.button,
 		{ [styles.iconButton]: isIconOnly(children) },
-		styles[`${type}-${variant}`],
 		styles[size],
-		{ [styles.disabled]: disabled },
 		className,
+
+		// @ts-expect-error: we don't have all variations of classnames defined
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		styles[`${type}-${variant}`],
 	);
 
 	return (

package/src/components/ds-chip-group/hooks/use-chip-row-calculation.ts

@@ -33,6 +33,11 @@ export const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChip
 
 			for (index = 0; index < children.length; index++) {
 				const current = children[index];
+
+				if (!current) {
+					continue;
+				}
+
 				const offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap;
 				const next = offset + current.offsetWidth;
 

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

@@ -73,6 +73,7 @@
 .content {
 	@include dropdown.dropdown-content;
 	padding: var(--spacing-standard);
+	min-width: fit-content;
 }
 
 .viewControl {

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.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.tsx

@@ -40,7 +40,13 @@ 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>
 					</Dialog.Content>

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;

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

@@ -0,0 +1,49 @@
+import type { CSSProperties } from 'react';
+import classNames from 'classnames';
+import type { DsSkeletonTextProps } from './ds-skeleton.types';
+import { typographyHeightMap, DEFAULT_LINE_GAP, radiusMap } from './ds-skeleton.config';
+import styles from './ds-skeleton.module.scss';
+
+/**
+ * Text skeleton component - matches typography variants
+ * It renders pill-shaped lines that match the height of text content
+ */
+const DsSkeletonText = ({
+	typographyVariant = 'body-sm-reg',
+	color = 'gray',
+	lines = 1,
+	width,
+	radius = 'default',
+	className,
+	style,
+}: DsSkeletonTextProps) => {
+	const height = typographyHeightMap[typographyVariant];
+	const borderRadius = typeof radius === 'number' ? radius : radiusMap[radius];
+
+	const getLineWidth = (): string | number => {
+		if (width !== undefined) {
+			return width;
+		}
+
+		return '100%';
+	};
+
+	const lineClassName = classNames(styles.skeleton, styles.text, styles[color], className);
+
+	const createLineStyle = (lineWidth: string | number): CSSProperties => ({
+		height,
+		width: typeof lineWidth === 'number' ? String(lineWidth) + 'px' : lineWidth,
+		borderRadius,
+		...style,
+	});
+
+	return (
+		<div aria-hidden="true" className={styles.container} style={{ gap: DEFAULT_LINE_GAP }}>
+			{Array.from({ length: lines }, (_, index) => (
+				<span key={index} className={lineClassName} style={createLineStyle(getLineWidth())} />
+			))}
+		</div>
+	);
+};
+
+export default DsSkeletonText;

package/src/components/ds-skeleton/ds-skeleton.config.ts

@@ -0,0 +1,68 @@
+import type { DsAvatarSize } from '../ds-avatar';
+import type { SemanticVariant } from '../ds-typography';
+import type { SkeletonRadiusVariant } from './ds-skeleton.types';
+
+/**
+ * Circle size mapping matching DsAvatar component
+ * Maps semantic size names to pixel values
+ */
+export const circleSizeMap: Record<DsAvatarSize, number> = Object.freeze({
+	xsm: 24,
+	sm: 32,
+	regular: 40,
+	md: 48,
+	lg: 64,
+	xl: 80,
+});
+
+/**
+ * Typography variant height mapping
+ * Maps semantic variants to approximate heights in pixels
+ * Based on line-height values from design system
+ */
+export const typographyHeightMap: Record<SemanticVariant, number> = Object.freeze({
+	// Body variants - based on line-height
+	'body-md-reg': 20,
+	'body-md-md': 20,
+	'body-md-semi-bold': 20,
+	'body-md-bold': 20,
+	'body-md-link': 20,
+
+	'body-sm-reg': 18,
+	'body-sm-md': 18,
+	'body-sm-semi-bold': 18,
+	'body-sm-bold': 18,
+	'body-sm-link': 18,
+
+	'body-xs-reg': 16,
+	'body-xs-md': 16,
+	'body-xs-semi-bold': 16,
+	'body-xs-bold': 16,
+	'body-xs-link': 16,
+
+	// Code variants
+	'code-sm-reg': 18,
+	'code-sm-semi-bold': 18,
+	'code-xs-reg': 16,
+	'code-xs-semi-bold': 16,
+
+	// Heading variants - based on line-height
+	heading1: 64,
+	heading2: 54,
+	heading3: 48,
+	heading4: 36,
+});
+
+/**
+ * Border radius mapping
+ * Maps semantic radius names to pixel values
+ */
+export const radiusMap: Record<SkeletonRadiusVariant, number> = Object.freeze({
+	default: 4, // Standard button/card radius
+	round: 999, // Pill-shaped (fully rounded)
+});
+
+/**
+ * Default gap between skeleton lines in pixels
+ */
+export const DEFAULT_LINE_GAP = 8;

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

@@ -0,0 +1,72 @@
+.skeleton {
+	animation: shimmer 2s linear infinite;
+}
+
+.gray {
+	--skeleton-gray-base: #f3f5fa;
+	--skeleton-gray-accent: #e3e3e3;
+
+	background: linear-gradient(
+		90deg,
+		var(--skeleton-gray-base) 0%,
+		var(--skeleton-gray-base) 33%,
+		var(--skeleton-gray-accent) 50%,
+		var(--skeleton-gray-base) 66%,
+		var(--skeleton-gray-base) 100%
+	);
+	background-size: 300% 100%;
+}
+
+.blue {
+	--skeleton-blue-accent: #759cec;
+	--skeleton-blue-base: #dfe9ff;
+
+	background: linear-gradient(
+		90deg,
+		var(--skeleton-blue-base) 0%,
+		var(--skeleton-blue-base) 33%,
+		var(--skeleton-blue-accent) 50%,
+		var(--skeleton-blue-base) 66%,
+		var(--skeleton-blue-base) 100%
+	);
+	background-size: 300% 100%;
+}
+
+.text {
+	display: block;
+	margin-bottom: var(--spacing-xs);
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.circle {
+	display: inline-block;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.rectangle {
+	display: inline-block;
+	flex-shrink: 0;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: 100% 0;
+	}
+
+	60% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 0 0;
+	}
+}

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

@@ -0,0 +1,9 @@
+import DsSkeletonText from './ds-skeleton-text';
+import DsSkeletonCircle from './ds-skeleton-circle';
+import DsSkeletonRect from './ds-skeleton-rect';
+
+export default {
+	Text: DsSkeletonText,
+	Circle: DsSkeletonCircle,
+	Rect: DsSkeletonRect,
+};