@drivenets/design-system 0.0.1

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

@@ -0,0 +1,76 @@
+import { type RefObject, useLayoutEffect, useState } from 'react';
+
+interface UseChipRowCalculationProps {
+	chipsWrapperRef: RefObject<HTMLDivElement | null>;
+	totalFilters: number;
+}
+
+/**
+ * Custom hook to calculate how many chips can fit in 2 rows
+ * Uses a simple approach: render all, measure positions, hide overflow
+ */
+export const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChipRowCalculationProps) => {
+	const [visibleCount, setVisibleCount] = useState(totalFilters);
+
+	useLayoutEffect(() => {
+		const calculateVisibleChips = () => {
+			if (!chipsWrapperRef.current) {
+				return;
+			}
+
+			const wrapper = chipsWrapperRef.current;
+			const children = Array.from(wrapper.children) as HTMLElement[];
+
+			if (children.length === 0) {
+				return;
+			}
+
+			const cs = getComputedStyle(wrapper);
+			const gap = parseFloat(cs.columnGap || cs.gap || '0') || 8;
+			let index;
+			let line = 0;
+			let total = 0;
+
+			for (index = 0; index < children.length; index++) {
+				const current = children[index];
+				const offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap;
+				const next = offset + current.offsetWidth;
+
+				if (total + next >= wrapper.clientWidth) {
+					line++;
+					if (line >= 2) {
+						break;
+					}
+					total = next;
+				} else {
+					total += next;
+				}
+			}
+
+			const result = Math.max(1, line < 2 ? index : index - 1);
+			setVisibleCount(result);
+		};
+
+		// Use requestAnimationFrame to ensure DOM is fully laid out
+		const rafId = requestAnimationFrame(() => {
+			calculateVisibleChips();
+		});
+
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				calculateVisibleChips();
+			});
+		});
+
+		if (chipsWrapperRef.current) {
+			resizeObserver.observe(chipsWrapperRef.current);
+		}
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	}, [chipsWrapperRef, totalFilters]);
+
+	return visibleCount;
+};

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

@@ -0,0 +1,2 @@
+export { default as DsChipGroup } from './ds-chip-group';
+export type { DsChipGroupProps, ChipItem } from './ds-chip-group.types';

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

@@ -0,0 +1,58 @@
+@use '../../styles/typography';
+@use '../../styles/shared/modal' as shared;
+
+$max-width: 400px;
+$min-height: 188px;
+$max-height: 244px;
+
+.overlay {
+	@include shared.overlay-base;
+}
+
+.modal {
+	@include shared.modal-base;
+	inline-size: $max-width;
+}
+
+.content {
+	@include shared.content-base;
+	min-block-size: $min-height;
+	max-block-size: $max-height;
+	padding: var(--spacing-md) var(--spacing-lg);
+	gap: var(--spacing-standard);
+}
+
+.header {
+	@include shared.header-base;
+	gap: var(--spacing-xs);
+	padding-bottom: var(--spacing-xs);
+}
+
+.footer {
+	@include shared.footer-base(false);
+	display: flex;
+
+	.actions {
+		@include shared.actions-base;
+		flex-grow: 1;
+	}
+}
+
+.title {
+	@include shared.title-base;
+	flex-grow: 1;
+}
+
+.icon {
+	flex-shrink: 0;
+}
+
+.body {
+	@include shared.body-base;
+	@include typography.body-sm-reg;
+	color: var(--color-font-main);
+}
+
+.cancel {
+	margin-right: auto;
+}

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

@@ -0,0 +1,121 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import { DsIcon } from '../ds-icon';
+import type { DsConfirmationProps } from './ds-confirmation.types';
+import styles from './ds-confirmation.module.scss';
+import DsTypography from '../ds-typography/ds-typography';
+
+/**
+ * Composable confirmation modal dialog.
+ */
+export const DsConfirmation = ({ open, onOpenChange, style, className, children }: DsConfirmationProps) => {
+	const handleOpenChange = (details: { open: boolean }) => {
+		onOpenChange(details.open);
+	};
+
+	return (
+		<Dialog.Root
+			open={open}
+			onOpenChange={handleOpenChange}
+			modal={true}
+			closeOnEscape={true}
+			closeOnInteractOutside={true}
+		>
+			<Portal>
+				<Dialog.Backdrop className={styles.overlay} />
+				<Dialog.Positioner>
+					<Dialog.Content className={classNames(styles.modal, className)}>
+						<div style={style} className={styles.content}>
+							{children}
+						</div>
+					</Dialog.Content>
+				</Dialog.Positioner>
+			</Portal>
+		</Dialog.Root>
+	);
+};
+
+const Header = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.header, className)}>
+		{children}
+	</div>
+);
+
+const Title = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<Dialog.Title className={classNames(styles.title, className)} style={style} asChild>
+		<DsTypography variant="heading4">{children}</DsTypography>
+	</Dialog.Title>
+);
+
+const CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (
+	<Dialog.CloseTrigger style={style} className={className}>
+		<DsIcon icon="close" size="small"></DsIcon>
+	</Dialog.CloseTrigger>
+);
+
+const Body = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.body, className)}>
+		{children}
+	</div>
+);
+
+const Footer = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.footer, className)}>
+		{children}
+	</div>
+);
+
+const Actions = ({
+	style,
+	className,
+	children,
+}: {
+	style?: CSSProperties;
+	className?: string;
+	children: ReactNode;
+}) => (
+	<div style={style} className={classNames(styles.actions, className)}>
+		{children}
+	</div>
+);
+
+DsConfirmation.Header = Header;
+DsConfirmation.Title = Title;
+DsConfirmation.CloseTrigger = CloseTrigger;
+DsConfirmation.Body = Body;
+DsConfirmation.Footer = Footer;
+DsConfirmation.Actions = Actions;

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

@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Props for the DsConfirmation component
+ */
+export interface DsConfirmationProps {
+	/**
+	 * Whether the modal is open
+	 */
+	open: boolean;
+	/**
+	 * Callback when modal open state changes
+	 * @param open - whether the modal is open
+	 */
+	onOpenChange: (open: boolean) => void;
+	/**
+	 * Additional CSS styles
+	 */
+	style?: CSSProperties;
+	/**
+	 * Additional CSS class name
+	 */
+	className?: string;
+	/**
+	 * Modal body content
+	 */
+	children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { DsConfirmation } from './ds-confirmation';
+export type { DsConfirmationProps } from './ds-confirmation.types';

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

@@ -0,0 +1,50 @@
+@use '../../styles/typography';
+@use '../../styles/mixins/bounding-box';
+
+.overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.32);
+	z-index: 1199;
+}
+
+.dialog {
+	@include bounding-box.bounding-box-vars;
+
+	--_shadow-size: 18px;
+	--_shadow-y-offset: 6px;
+
+	background: var(--white, #fff);
+	border-radius: 8px;
+	box-shadow: 0 var(--_shadow-y-offset) var(--_shadow-size) 0 rgba(4, 69, 204, 0.3);
+	padding: 12px;
+	min-width: 320px;
+	min-height: 120px;
+	z-index: 1200;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	max-width: 90vw;
+	max-height: 90vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.title {
+	@include typography.p-base;
+	@include typography.medium;
+	color: var(--neutral-1);
+}
+
+.description {
+	@include typography.p-base;
+	color: var(--neutral-3);
+	margin-bottom: 16px;
+}
+
+.customPlacement {
+	transform: none !important;
+	max-width: none;
+	max-height: none;
+}

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

@@ -0,0 +1,70 @@
+import type React 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-dialog.module.scss';
+import type { DsDialogProps } from './ds-dialog.types';
+
+const DsDialog: React.FC<DsDialogProps> = ({
+	open,
+	onOpenChange,
+	title,
+	hideTitle,
+	description,
+	hideDescription,
+	children,
+	className,
+	anchorRef,
+	customPosition,
+	modal = true,
+}) => {
+	let style: React.CSSProperties = {};
+	if (customPosition) {
+		style = { position: 'fixed', ...customPosition };
+	} else if (anchorRef?.current) {
+		const rect = anchorRef.current.getBoundingClientRect();
+		style = { position: 'fixed', top: rect.bottom, left: rect.left };
+	}
+
+	return (
+		<RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+			<RadixDialog.Portal>
+				{modal && <RadixDialog.Overlay className={styles.overlay} />}
+				<RadixDialog.Content
+					className={classNames(styles.dialog, className, {
+						[styles.customPlacement]: customPosition || anchorRef,
+					})}
+					style={customPosition || anchorRef ? style : undefined}
+				>
+					<RadixDialog.Title asChild>
+						{hideTitle ? (
+							<VisuallyHidden>
+								<RadixDialog.Title className={styles.title}>{title}</RadixDialog.Title>
+							</VisuallyHidden>
+						) : (
+							<RadixDialog.Title className={styles.title}>{title}</RadixDialog.Title>
+						)}
+					</RadixDialog.Title>
+					{description && (
+						<RadixDialog.Description asChild>
+							{hideDescription ? (
+								<VisuallyHidden>
+									<RadixDialog.Description className={styles.description}>
+										{description}
+									</RadixDialog.Description>
+								</VisuallyHidden>
+							) : (
+								<RadixDialog.Description className={styles.description}>
+									{description}
+								</RadixDialog.Description>
+							)}
+						</RadixDialog.Description>
+					)}
+					{children}
+				</RadixDialog.Content>
+			</RadixDialog.Portal>
+		</RadixDialog.Root>
+	);
+};
+
+export default DsDialog;

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

@@ -0,0 +1,48 @@
+import type React from 'react';
+
+export interface DsDialogProps {
+	/**
+	 * Controls whether the dialog is open.
+	 */
+	open: boolean;
+	/**
+	 * Callback fired when the open state should change.
+	 */
+	onOpenChange?: (open: boolean) => void;
+	/**
+	 * The accessible title for the dialog. Required for accessibility.
+	 */
+	title: string;
+	/**
+	 * If true, the dialog title will be visually hidden but accessible to screen readers.
+	 */
+	hideTitle?: boolean;
+	/**
+	 * The accessible description for the dialog. Optional, but recommended for accessibility.
+	 */
+	description?: string;
+	/**
+	 * If true, the dialog description will be visually hidden but accessible to screen readers.
+	 */
+	hideDescription?: boolean;
+	/**
+	 * The content to render inside the dialog.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Additional CSS class names for the dialog container.
+	 */
+	className?: string;
+	/**
+	 * Ref to the element the dialog should be anchored to (for relative placement)
+	 */
+	anchorRef?: React.RefObject<HTMLElement>;
+	/**
+	 * Custom fixed position (e.g., { top: number, left: number })
+	 */
+	customPosition?: { top: number; left: number };
+	/**
+	 * If true, show modal overlay and center dialog (default: true)
+	 */
+	modal?: boolean;
+}

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

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

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

@@ -0,0 +1,212 @@
+@use '../../styles/grid';
+
+.backdrop {
+	position: absolute;
+	inset: 0;
+	background: var(--Background-background-overlay, rgba(0, 26, 71, 0.2));
+	z-index: 1000;
+
+	&[data-state='open'] {
+		animation: 0.3s fade-in-backdrop ease-in-out both;
+	}
+
+	&[data-state='closed'] {
+		animation: 0.2s fade-out-backdrop ease-in-out both;
+	}
+}
+
+@keyframes fade-in-backdrop {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out-backdrop {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+.positioner {
+	position: absolute;
+	inset: 0;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+.drawer {
+	position: absolute;
+	display: block;
+	top: 0;
+	bottom: 0;
+	background: var(--color-background);
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);
+	z-index: 1200;
+	pointer-events: auto;
+	overflow: hidden;
+	transition:
+		transform 0.2s ease,
+		width 0.2s ease;
+
+	&.position-end {
+		right: 0;
+		transform-origin: 100% 50%;
+		transform: translateX(100%);
+
+		&[data-state='open'] {
+			animation: 0.5s slide-in-drawer-end ease-out both;
+		}
+
+		&[data-state='closed'] {
+			animation: 0.25s slide-out-drawer-end both;
+		}
+	}
+
+	&.position-start {
+		left: 0;
+		transform: translateX(-100%);
+		transform-origin: 0 50%;
+
+		&[data-state='open'] {
+			animation: 0.5s slide-in-drawer-start ease-out both;
+		}
+
+		&[data-state='closed'] {
+			animation: 0.25s slide-out-drawer-start both;
+		}
+	}
+
+	@for $i from 1 through grid.$columns {
+		&.cols-#{$i} {
+			width: var(--col-span-#{$i});
+		}
+	}
+}
+
+@keyframes slide-in-drawer-end {
+	0% {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+
+	50% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes slide-out-drawer-end {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	40% {
+		transform: translateX(0);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+}
+
+@keyframes slide-in-drawer-start {
+	0% {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+
+	50% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes slide-out-drawer-start {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	40% {
+		transform: translateX(0);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: hidden;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	border-bottom: 1px solid var(--color-border);
+	padding: var(--spacing-sm) var(--spacing-standard);
+	gap: var(--spacing-3xs);
+}
+
+.title {
+	margin: 0;
+	color: var(--color-font-main);
+}
+
+.closeTrigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-icon-secondary);
+}
+
+.toolbar {
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid var(--color-border);
+	padding: var(--spacing-sm) var(--spacing-standard);
+	gap: var(--spacing-3xs);
+}
+
+.body {
+	flex: 1;
+	overflow: auto;
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-standard);
+	border-top: 1px solid var(--color-border);
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	margin-left: auto;
+}