@drivenets/design-system 0.1.0 → 0.3.0

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,
+};

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

@@ -0,0 +1,92 @@
+import type { CSSProperties, Ref } from 'react';
+import type { DsAvatarSize } from '../ds-avatar';
+import type { SemanticVariant } from '../ds-typography';
+
+export const skeletonColorVariants = ['gray', 'blue'] as const;
+export type SkeletonColorVariant = (typeof skeletonColorVariants)[number];
+
+export const skeletonRadiusVariants = ['default', 'round'] as const;
+export type SkeletonRadiusVariant = (typeof skeletonRadiusVariants)[number];
+
+/**
+ * Shared base props for all skeleton components
+ */
+export interface DsSkeletonBaseProps {
+	/**
+	 * Color variant of the skeleton
+	 * @default 'gray'
+	 */
+	color?: SkeletonColorVariant;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional inline styles
+	 */
+	style?: CSSProperties;
+	/**
+	 * Ref to the skeleton element
+	 */
+	ref?: Ref<HTMLSpanElement>;
+}
+
+/**
+ * Props for DsSkeleton.Text component
+ * Typography-based text skeleton with configurable lines
+ */
+export interface DsSkeletonTextProps extends DsSkeletonBaseProps {
+	/**
+	 * Typography variant - determines the height of the skeleton
+	 * @default 'body-sm-reg'
+	 */
+	typographyVariant?: SemanticVariant;
+	/**
+	 * Number of lines to render
+	 * @default 1
+	 */
+	lines?: number;
+	/**
+	 * Width of skeleton. Last line will have varied width if not specified.
+	 * Can be a number (px) or string ('50%', '200px')
+	 * @default '100%' (last line varies between 40-80%)
+	 */
+	width?: string | number;
+	/**
+	 * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+	 * @default 'default'
+	 */
+	radius?: SkeletonRadiusVariant | number;
+}
+
+/**
+ * Props for DsSkeleton.Circle component
+ * Circular skeleton for avatars and icons
+ */
+export interface DsSkeletonCircleProps extends DsSkeletonBaseProps {
+	/**
+	 * Size of the circle - matches DsAvatar sizes or custom pixel value
+	 * @default 'regular'
+	 */
+	size?: DsAvatarSize | number;
+}
+
+/**
+ * Props for DsSkeleton.Rect component
+ * Rectangular skeleton for buttons, images, and custom shapes
+ */
+export interface DsSkeletonRectProps extends DsSkeletonBaseProps {
+	/**
+	 * Width of rectangle. Can be number (px) or string ('50%', '200px')
+	 */
+	width: string | number;
+	/**
+	 * Height of rectangle. Can be number (px) or string ('50%', '200px')
+	 */
+	height: string | number;
+	/**
+	 * Border radius: 'default' (4px), 'round' (pill-shaped), or custom px value
+	 * @default 'default'
+	 */
+	radius?: SkeletonRadiusVariant | number;
+}

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

@@ -0,0 +1,5 @@
+export * from './ds-skeleton.types';
+export { default as DsSkeleton } from './ds-skeleton';
+export { default as DsSkeletonText } from './ds-skeleton-text';
+export { default as DsSkeletonCircle } from './ds-skeleton-circle';
+export { default as DsSkeletonRect } from './ds-skeleton-rect';

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

@@ -26,7 +26,7 @@ const DsSpinner: React.FC<DsSpinnerProps> = ({ size = 'medium', className, style
 	const strokeDasharray = `${String(0.25 * circumference)} ${String(circumference)}`;
 
 	return (
-		<div className={classNames(styles.spinnerContainer, styles[size], className)} style={style} {...props}>
+		<div className={classNames(styles.spinnerContainer, className)} style={style} {...props}>
 			<svg
 				className={classNames(styles.progressCircle, styles.spin)}
 				width={actualSize}

package/src/components/ds-table/components/core-table/core-table.tsx

@@ -4,8 +4,8 @@ import styles from './core-table.module.scss';
 
 type TableProps = HTMLAttributes<HTMLTableElement> & { ref?: Ref<HTMLTableElement> };
 
-function Table({ className, ref, ...props }: TableProps) {
-	return <table ref={ref} className={classnames(styles.table, className)} {...props} />;
+function Table({ className, ...props }: TableProps) {
+	return <table className={classnames(styles.table, className)} {...props} />;
 }
 
 Table.displayName = 'Table';
@@ -14,8 +14,8 @@ type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement> & {
 	ref?: Ref<HTMLTableSectionElement>;
 };
 
-function TableHeader({ className, ref, ...props }: TableHeaderProps) {
-	return <thead ref={ref} className={classnames(styles.tableHeader, className)} {...props} />;
+function TableHeader(props: TableHeaderProps) {
+	return <thead {...props} />;
 }
 
 TableHeader.displayName = 'TableHeader';
@@ -24,8 +24,8 @@ type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
 	ref?: Ref<HTMLTableSectionElement>;
 };
 
-function TableBody({ className, ref, ...props }: TableBodyProps) {
-	return <tbody ref={ref} className={classnames(styles.tableBody, className)} {...props} />;
+function TableBody(props: TableBodyProps) {
+	return <tbody {...props} />;
 }
 
 TableBody.displayName = 'TableBody';
@@ -34,8 +34,8 @@ type TableFooterProps = HTMLAttributes<HTMLTableSectionElement> & {
 	ref?: Ref<HTMLTableSectionElement>;
 };
 
-function TableFooter({ className, ref, ...props }: TableFooterProps) {
-	return <tfoot ref={ref} className={classnames(styles.tableFooter, className)} {...props} />;
+function TableFooter({ className, ...props }: TableFooterProps) {
+	return <tfoot className={classnames(styles.tableFooter, className)} {...props} />;
 }
 
 TableFooter.displayName = 'TableFooter';
@@ -44,8 +44,8 @@ type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
 	ref?: Ref<HTMLTableRowElement>;
 };
 
-function TableRow({ className, ref, ...props }: TableRowProps) {
-	return <tr ref={ref} className={classnames(styles.tableRow, className)} {...props} />;
+function TableRow(props: TableRowProps) {
+	return <tr {...props} />;
 }
 
 TableRow.displayName = 'TableRow';
@@ -54,8 +54,8 @@ type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
 	ref?: Ref<HTMLTableCellElement>;
 };
 
-function TableHead({ className, ref, ...props }: TableHeadProps) {
-	return <th ref={ref} className={classnames(styles.tableHead, className)} {...props} />;
+function TableHead({ className, ...props }: TableHeadProps) {
+	return <th className={classnames(styles.tableHead, className)} {...props} />;
 }
 
 TableHead.displayName = 'TableHead';
@@ -64,8 +64,8 @@ type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
 	ref?: Ref<HTMLTableCellElement>;
 };
 
-function TableCell({ className, ref, ...props }: TableCellProps) {
-	return <td ref={ref} className={classnames(styles.tableCell, className)} {...props} />;
+function TableCell({ className, ...props }: TableCellProps) {
+	return <td className={classnames(styles.tableCell, className)} {...props} />;
 }
 
 TableCell.displayName = 'TableCell';
@@ -74,8 +74,8 @@ type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement> & {
 	ref?: Ref<HTMLTableCaptionElement>;
 };
 
-function TableCaption({ className, ref, ...props }: TableCaptionProps) {
-	return <caption ref={ref} className={classnames(styles.tableCaption, className)} {...props} />;
+function TableCaption({ className, ...props }: TableCaptionProps) {
+	return <caption className={classnames(styles.tableCaption, className)} {...props} />;
 }
 
 TableCaption.displayName = 'TableCaption';