@drivenets/design-system 0.0.1

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

@@ -0,0 +1,130 @@
+@use '../../styles/typography';
+
+.container {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding-right: 1px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+
+	&:has([data-disabled]) {
+		cursor: not-allowed;
+		pointer-events: none;
+
+		.labelInfo {
+			color: var(--color-font-disabled);
+		}
+	}
+
+	&:has(.checkboxRoot:focus-visible) {
+		border-color: var(--color-background-selected);
+	}
+
+	&:has([data-state='unchecked']:focus-visible) {
+		border-color: var(--color-background-selected-hover);
+	}
+}
+
+.checkboxRoot {
+	all: unset;
+	position: relative;
+	border-radius: 2px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.2s ease-in-out;
+	cursor: pointer;
+
+	&[data-disabled] {
+		border-color: var(--color-background-disable);
+		pointer-events: none;
+
+		&[data-state='unchecked'] {
+			.checkboxWrapper {
+				border-color: var(--color-background-disable);
+			}
+		}
+
+		&[data-state='checked'],
+		&[data-state='indeterminate'] {
+			.checkboxWrapper {
+				border-color: var(--color-background-disable);
+				background-color: var(--color-background-disable);
+			}
+		}
+	}
+
+	&[data-state='checked'] {
+		.checkboxWrapper {
+			border-color: var(--color-background-selected);
+			background-color: var(--color-background-selected);
+		}
+
+		&:hover {
+			background: var(--color-background-action-secondary-hover);
+		}
+	}
+
+	&[data-state='unchecked'] {
+		.checkboxWrapper {
+			border-color: var(--color-background-deselected);
+		}
+
+		&:hover {
+			background: var(--color-background-action-hover-weak);
+		}
+	}
+
+	&[data-state='indeterminate'] {
+		.checkboxWrapper {
+			border-color: var(--color-background-selected);
+			background-color: var(--color-background-selected);
+		}
+
+		&:hover {
+			background: var(--color-background-action-secondary-hover);
+		}
+	}
+
+	.checkboxWrapper {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 16px;
+		width: 16px;
+		margin: var(--spacing-4xs);
+		border: 2px solid transparent;
+		border-radius: 2px;
+	}
+}
+
+.checkboxIndicator {
+	flex: 1;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.label {
+	@include typography.body-sm-reg;
+	color: var(--color-font-main);
+	cursor: pointer;
+}
+
+.labelInfo {
+	@include typography.body-xs-reg;
+	@include typography.ellipsis;
+	position: absolute;
+	color: var(--color-font-secondary);
+	cursor: pointer;
+	width: 100%;
+}

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

@@ -0,0 +1,55 @@
+import type React from 'react';
+import { useId } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import classNames from 'classnames';
+import styles from './ds-checkbox.module.scss';
+import type { DsCheckboxProps } from './ds-checkbox.types';
+import { DsIcon } from '../ds-icon';
+
+/**
+ * Design system Checkbox component
+ */
+const DsCheckbox: React.FC<DsCheckboxProps> = ({
+	id,
+	label,
+	labelInfo,
+	className,
+	checked,
+	defaultChecked,
+	onCheckedChange,
+	...props
+}) => {
+	const generatedId = useId();
+	const checkboxId = id || generatedId;
+
+	return (
+		<div className={classNames(styles.container, className)}>
+			<CheckboxPrimitive.Root
+				className={styles.checkboxRoot}
+				id={checkboxId}
+				checked={checked}
+				defaultChecked={defaultChecked}
+				onCheckedChange={onCheckedChange}
+				{...props}
+			>
+				<div className={styles.checkboxWrapper}>
+					<CheckboxPrimitive.Indicator className={styles.checkboxIndicator}>
+						<DsIcon
+							icon={checked === 'indeterminate' ? 'check_indeterminate_small' : 'check_small'}
+							size="small"
+							variant="outlined"
+						/>
+					</CheckboxPrimitive.Indicator>
+				</div>
+			</CheckboxPrimitive.Root>
+			{label && (
+				<label className={styles.label} htmlFor={checkboxId}>
+					{label}
+					{labelInfo && <div className={styles.labelInfo}>{labelInfo}</div>}
+				</label>
+			)}
+		</div>
+	);
+};
+
+export default DsCheckbox;

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

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { Root } from '@radix-ui/react-checkbox';
+
+export interface DsCheckboxProps extends ComponentPropsWithoutRef<typeof Root> {
+	/**
+	 * Label for the checkbox
+	 */
+	label?: ReactNode;
+	/**
+	 * Additional label info for the checkbox
+	 */
+	labelInfo?: ReactNode;
+	/**
+	 * The controlled checked state of the checkbox
+	 */
+	checked?: boolean | 'indeterminate';
+	/**
+	 * The default checked state of the checkbox
+	 */
+	defaultChecked?: boolean | 'indeterminate';
+	/**
+	 * Event handler called when the checked state of the checkbox changes.
+	 *
+	 * @param checked
+	 */
+	onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+}

package/src/components/ds-checkbox/index.tsx

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

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

@@ -0,0 +1,71 @@
+@use '../../styles/typography';
+
+.chip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	padding: 1px var(--spacing-3xs) 1px var(--spacing-xs);
+	background: var(--color-background);
+	border: 1px solid var(--color-border-contrast);
+	border-radius: 100vmax;
+	color: var(--color-font-main);
+	cursor: default;
+	overflow: hidden;
+	transition:
+		background-color 0.2s,
+		border-color 0.2s,
+		color 0.2s;
+
+	&.clickable {
+		cursor: pointer;
+
+		&:hover {
+			background: var(--color-background-action-hover-weak);
+			border-color: var(--color-border-action-secondary-hover);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--color-background-selected);
+			outline-offset: 2px;
+		}
+	}
+
+	&.small {
+		padding: 0 var(--spacing-4xs) 0 var(--spacing-3xs);
+		gap: var(--spacing-4xs);
+	}
+
+	&[aria-pressed='true'] {
+		background: var(--color-background-selected-weak);
+		border-color: var(--color-border-action-primary);
+		color: var(--color-font-action);
+	}
+}
+
+.label {
+	@include typography.ellipsis;
+	padding: var(--spacing-4xs) var(--spacing-3xs);
+	flex: 1;
+}
+
+.deleteButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	background: transparent;
+	color: var(--color-icon-information-main);
+	cursor: pointer;
+	transition:
+		background-color 0.2s,
+		color 0.2s;
+	flex-shrink: 0;
+
+	&:hover {
+		color: var(--color-icon-secondary);
+	}
+
+	.chip.small & {
+		padding: 1px var(--spacing-4xs);
+	}
+}

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

@@ -0,0 +1,73 @@
+import type React from 'react';
+import classNames from 'classnames';
+import styles from './ds-chip.module.scss';
+import type { DsChipProps } from './ds-chip.types';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Design system Chip component
+ */
+const DsChip: React.FC<DsChipProps> = ({
+	ref,
+	label,
+	className,
+	style = {},
+	onClick,
+	onDelete,
+	size = 'medium',
+	deleteIcon,
+	selected = false,
+}) => {
+	const chipClass = classNames(
+		styles.chip,
+		{
+			[styles.clickable]: onClick !== undefined,
+			[styles.small]: size === 'small',
+		},
+		className,
+	);
+
+	const handleDeleteClick = (event: React.MouseEvent<HTMLElement>) => {
+		event.stopPropagation();
+		onDelete?.(event);
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+		if (onDelete && (event.key === 'Backspace' || event.key === 'Delete')) {
+			event.preventDefault();
+			onDelete(event);
+		}
+	};
+
+	return (
+		<div
+			ref={ref as React.Ref<HTMLDivElement>}
+			className={chipClass}
+			style={style}
+			onClick={onClick}
+			onKeyDown={handleKeyDown}
+			role={onClick || onDelete ? 'button' : undefined}
+			tabIndex={onClick || onDelete ? 0 : undefined}
+			aria-label={label}
+			aria-pressed={onClick && selected ? 'true' : undefined}
+		>
+			<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
+				{label}
+			</DsTypography>
+			{onDelete && (
+				<button
+					type="button"
+					className={styles.deleteButton}
+					onClick={handleDeleteClick}
+					aria-label="Delete chip"
+					tabIndex={-1}
+				>
+					<DsIcon icon={deleteIcon || 'cancel'} size="tiny" />
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default DsChip;

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

@@ -0,0 +1,46 @@
+import type { CSSProperties, KeyboardEvent, MouseEvent, Ref } from 'react';
+import type { IconType } from '../ds-icon';
+
+export const chipSizes = ['medium', 'small'] as const;
+export type ChipSize = (typeof chipSizes)[number];
+
+export interface DsChipProps {
+	/**
+	 * Ref to the chip element
+	 */
+	ref?: Ref<HTMLElement>;
+	/**
+	 * The label text to display in the chip
+	 */
+	label: string;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+	/**
+	 * Optional click handler
+	 */
+	onClick?: (event: MouseEvent<HTMLElement>) => void;
+	/**
+	 * Callback function when delete icon is clicked
+	 */
+	onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+	/**
+	 * Size of the chip
+	 * @default 'medium'
+	 */
+	size?: ChipSize;
+	/**
+	 * Custom delete icon element
+	 */
+	deleteIcon?: IconType;
+	/**
+	 * Whether the chip is in a selected/pressed state
+	 * @default false
+	 */
+	selected?: boolean;
+}

package/src/components/ds-chip/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsChip } from './ds-chip';
+export type { ChipSize, DsChipProps } from './ds-chip.types';

package/src/components/ds-chip-group/ds-chip-group.module.scss

@@ -0,0 +1,59 @@
+.container {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-standard);
+	padding: var(--spacing-xs) var(--spacing-standard);
+	background: var(--color-background-selected-weak);
+	border: 1px solid var(--color-outline-weak);
+	border-radius: var(--spacing-3xs);
+}
+
+.chipsWrapper {
+	display: flex;
+	flex: 1;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--spacing-xs);
+	max-height: var(--spacing-3xl);
+	overflow: hidden;
+
+	.hidden {
+		visibility: hidden;
+		position: absolute;
+		pointer-events: none;
+	}
+}
+
+.label {
+	color: var(--color-font-secondary);
+	white-space: nowrap;
+}
+
+.expandChip {
+	cursor: pointer;
+}
+
+.dialog {
+	position: fixed;
+	background: var(--color-background);
+	border: 1px solid var(--color-border-secondary);
+	border-radius: var(--spacing-3xs);
+	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
+	padding: var(--spacing-xs);
+	max-height: 80vh;
+	overflow-y: auto;
+	z-index: 1001;
+	min-width: 300px;
+	max-width: 500px;
+}
+
+.dialogContent {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.itemCheckbox {
+	display: flex;
+	align-items: center;
+}

package/src/components/ds-chip-group/ds-chip-group.tsx

@@ -0,0 +1,122 @@
+import type React from 'react';
+import { useRef, useState } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import classNames from 'classnames';
+import styles from './ds-chip-group.module.scss';
+import type { DsChipGroupProps } from './ds-chip-group.types';
+import { useChipRowCalculation } from './hooks/use-chip-row-calculation';
+import { DsTypography } from '../ds-typography';
+import DsChip from '../ds-chip/ds-chip';
+import { DsCheckbox } from '../ds-checkbox';
+import { DsButton } from '../ds-button';
+import { DsIcon } from '../ds-icon';
+
+/**
+ * Design system chip group component displays a collection of chips with overflow handling
+ * Used for displaying filters, selected items, tags, etc.
+ */
+const DsChipGroup: React.FC<DsChipGroupProps> = ({
+	items,
+	label = 'Filtered by:',
+	onClearAll,
+	onItemDelete,
+	onItemSelect,
+	className,
+	style,
+}) => {
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const showAllChipsRef = useRef<HTMLDivElement>(null);
+	const chipsWrapperRef = useRef<HTMLDivElement>(null);
+	const visibleCount = useChipRowCalculation({
+		chipsWrapperRef,
+		totalFilters: items.length,
+	});
+
+	if (items.length === 0) {
+		return null;
+	}
+
+	const hiddenCount = items.length - visibleCount;
+	const showExpandButton = hiddenCount > 0;
+
+	const handleOpenDialog = () => {
+		setDialogOpen(true);
+	};
+
+	let dialogStyle: React.CSSProperties = {};
+	if (showExpandButton && showAllChipsRef.current) {
+		const rect = showAllChipsRef.current.getBoundingClientRect();
+		dialogStyle = {
+			position: 'fixed',
+			top: rect.bottom + 4,
+			left: rect.left,
+		};
+	}
+
+	return (
+		<div className={classNames(styles.container, className)} style={style}>
+			{label && (
+				<DsTypography variant="body-sm-reg" className={styles.label}>
+					{label}
+				</DsTypography>
+			)}
+
+			<div ref={chipsWrapperRef} className={styles.chipsWrapper}>
+				{items.map((item, index) => (
+					<DsChip
+						key={item.id}
+						label={item.label}
+						selected={item.selected}
+						onClick={() => onItemSelect?.(item)}
+						onDelete={() => onItemDelete?.(item)}
+						className={classNames({
+							[styles.hidden]: index >= visibleCount,
+						})}
+					/>
+				))}
+				{showExpandButton && (
+					<DsChip
+						ref={showAllChipsRef}
+						label={`+${String(hiddenCount)} ${hiddenCount === 1 ? 'item' : 'items'} show all`}
+						onClick={handleOpenDialog}
+						className={styles.expandChip}
+					/>
+				)}
+			</div>
+
+			{onClearAll && (
+				<DsButton design="v1.2" buttonType="tertiary" variant="ghost" size="small" onClick={onClearAll}>
+					<DsIcon icon="close" />
+					Clear all
+				</DsButton>
+			)}
+
+			<RadixDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
+				<VisuallyHidden>
+					<RadixDialog.Title />
+				</VisuallyHidden>
+				<RadixDialog.Portal>
+					<RadixDialog.Content style={dialogStyle} className={styles.dialog}>
+						<div className={styles.dialogContent}>
+							{items
+								.filter((item, index) => index >= visibleCount)
+								.map((item) => (
+									<div key={item.id} className={styles.itemCheckbox}>
+										<DsCheckbox
+											id={`chip-${item.id}`}
+											checked={item.selected}
+											onCheckedChange={() => onItemSelect?.(item)}
+											label={item.label}
+										/>
+									</div>
+								))}
+						</div>
+					</RadixDialog.Content>
+				</RadixDialog.Portal>
+			</RadixDialog.Root>
+		</div>
+	);
+};
+
+export default DsChipGroup;

package/src/components/ds-chip-group/ds-chip-group.types.ts

@@ -0,0 +1,52 @@
+import type { CSSProperties } from 'react';
+
+export interface ChipItem {
+	/**
+	 * Unique identifier for the chip
+	 */
+	id: string;
+	/**
+	 * The label text to display in the chip
+	 */
+	label: string;
+	/**
+	 * Additional metadata to store with the chip
+	 */
+	metadata?: Record<string, unknown>;
+	/**
+	 * Whether the chip is selected/checked
+	 */
+	selected?: boolean;
+}
+
+export interface DsChipGroupProps {
+	/**
+	 * Array of chip items to display
+	 */
+	items: ChipItem[];
+	/**
+	 * Label text to display before the chips (e.g., "Filtered by:")
+	 * @default "Filtered by:"
+	 */
+	label?: string;
+	/**
+	 * Callback when "Clear all" is clicked
+	 */
+	onClearAll?: () => void;
+	/**
+	 * Callback when a chip is deleted/unchecked
+	 */
+	onItemDelete?: (item: ChipItem) => void;
+	/**
+	 * Callback when a chip is selected
+	 */
+	onItemSelect?: (item: ChipItem) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+}