@drivenets/design-system 0.0.1

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

@@ -0,0 +1,27 @@
+@use '../../styles/shared/input' as input;
+
+.textInputContainer {
+	@include input.inputContainer;
+	gap: var(--spacing-xs);
+}
+
+.input {
+	@include input.input;
+}
+
+.iconButton {
+	@include input.iconButton;
+}
+
+.adornment {
+	display: flex;
+	align-items: center;
+
+	&:last-child {
+		color: var(--form-control-border-color);
+	}
+
+	button {
+		@include input.iconButton;
+	}
+}

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

@@ -0,0 +1,75 @@
+import { type ChangeEvent, type FC, Fragment } from 'react';
+import classNames from 'classnames';
+import styles from './ds-text-input.module.scss';
+import type { DsTextInputProps } from './ds-text-input.types';
+
+const DsTextInput: FC<DsTextInputProps> = ({
+	id,
+	ref,
+	name,
+	size = 'default',
+	type = 'text',
+	onBlur,
+	onKeyDown,
+	onChange,
+	onValueChange,
+	className,
+	style = {},
+	value,
+	defaultValue,
+	min,
+	max,
+	minLength,
+	maxLength,
+	placeholder,
+	disabled = false,
+	tabIndex,
+	slots,
+}) => {
+	const InputWrapper = slots?.inputWrapper ?? Fragment;
+
+	const containerClass = classNames(
+		styles.textInputContainer,
+		{
+			[styles.small]: size === 'small',
+			[styles.default]: size === 'default',
+		},
+		className,
+	);
+
+	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+		const newValue = event.target.value;
+		onChange?.(event);
+		onValueChange?.(newValue);
+	};
+
+	return (
+		<div className={containerClass} style={style}>
+			{slots?.startAdornment && <div className={styles.adornment}>{slots.startAdornment}</div>}
+			<InputWrapper>
+				<input
+					id={id}
+					ref={ref}
+					name={name}
+					className={classNames(styles.input)}
+					type={type}
+					value={value}
+					defaultValue={defaultValue}
+					min={min}
+					max={max}
+					minLength={minLength}
+					maxLength={maxLength}
+					placeholder={placeholder}
+					disabled={disabled}
+					onBlur={onBlur}
+					onKeyDown={onKeyDown}
+					onChange={handleChange}
+					tabIndex={tabIndex}
+				/>
+			</InputWrapper>
+			{slots?.endAdornment && <div className={styles.adornment}>{slots.endAdornment}</div>}
+		</div>
+	);
+};
+
+export default DsTextInput;

package/src/components/ds-text-input/ds-text-input.types.tsx

@@ -0,0 +1,110 @@
+import type { ComponentType } from 'react';
+import type React from 'react';
+
+export const textInputSizes = ['small', 'default'] as const;
+export type TextInputSize = (typeof textInputSizes)[number];
+
+export interface DsTextInputProps {
+	/**
+	 * Unique identifier for the input field
+	 */
+	id?: string;
+	/**
+	 * The ref to the input field
+	 */
+	ref?: React.Ref<HTMLInputElement>;
+	/**
+	 * The name of the input field
+	 */
+	name?: string;
+	/**
+	 * The size of the input field
+	 * @default default
+	 */
+	size?: TextInputSize;
+	/**
+	 * The type of the input field
+	 * @default text
+	 */
+	type?: string;
+	/**
+	 * Event handler called when the input field loses focus
+	 *
+	 * @param event
+	 */
+	onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+	/**
+	 * Callback when a key is pressed down
+	 */
+	onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+	/**
+	 * Callback when the value changes
+	 */
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	/**
+	 * Value change event handler (provides just the value)
+	 */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * The placeholder text
+	 */
+	placeholder?: string;
+	/**
+	 * The current value
+	 */
+	value?: string;
+	/**
+	 * The minimum value of the input
+	 */
+	min?: number | string;
+	/**
+	 * The maximum value of the input
+	 */
+	max?: number | string;
+	/**
+	 * The minimum number of characters
+	 */
+	minLength?: number;
+	/**
+	 * The maximum number of characters
+	 */
+	maxLength?: number;
+	/**
+	 * The initial value of the input when rendered.
+	 * Use when you don't need to control the value of the input.
+	 */
+	defaultValue?: string;
+	/**
+	 * Whether the input is disabled
+	 */
+	disabled?: boolean;
+
+	/**
+	 * The tabIndex of the input
+	 */
+	tabIndex?: number;
+
+	slots?: {
+		/**
+		 * Custom component to wrap the input element
+		 */
+		inputWrapper?: ComponentType<{ children: React.ReactNode }>;
+
+		/**
+		 * Adornment to display at the start of the input
+		 */
+		startAdornment?: React.ReactNode;
+		/**
+		 * Adornment to display at the end of the input
+		 */
+		endAdornment?: React.ReactNode;
+	};
+}

package/src/components/ds-text-input/index.ts

@@ -0,0 +1,2 @@
+export { default as DsTextInput } from './ds-text-input';
+export { type DsTextInputProps, type TextInputSize, textInputSizes } from './ds-text-input.types';

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

@@ -0,0 +1,5 @@
+@use '../../styles/shared/input' as input;
+
+.textarea {
+	@include input.textarea;
+}

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

@@ -0,0 +1,49 @@
+import type React from 'react';
+import classNames from 'classnames';
+import styles from './ds-textarea.module.scss';
+import type { DsTextareaProps } from './ds-textarea.types';
+
+const DsTextarea: React.FC<DsTextareaProps> = ({
+	id,
+	ref,
+	name,
+	onBlur,
+	onChange,
+	onValueChange,
+	className,
+	style = {},
+	value,
+	defaultValue,
+	disabled = false,
+	rows = 3,
+	placeholder,
+	minLength,
+	maxLength,
+}) => {
+	const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+		const newValue = event.target.value;
+		onChange?.(event);
+		onValueChange?.(newValue);
+	};
+
+	return (
+		<textarea
+			id={id}
+			ref={ref}
+			name={name}
+			className={classNames(styles.textarea, className)}
+			style={style}
+			value={value}
+			defaultValue={defaultValue}
+			placeholder={placeholder}
+			disabled={disabled}
+			rows={rows}
+			onBlur={onBlur}
+			onChange={handleChange}
+			minLength={minLength}
+			maxLength={maxLength}
+		/>
+	);
+};
+
+export default DsTextarea;

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

@@ -0,0 +1,67 @@
+import type React from 'react';
+
+export interface DsTextareaProps {
+	/**
+	 * Unique identifier for the textarea element
+	 */
+	id?: string;
+	/**
+	 * The ref to the textarea element
+	 */
+	ref?: React.Ref<HTMLTextAreaElement>;
+	/**
+	 * The name of the textarea
+	 */
+	name?: string;
+	/**
+	 * Event handler called when the textarea loses focus
+	 *
+	 * @param event
+	 */
+	onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * Callback when the value changes
+	 */
+	onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+	/**
+	 * Value change event handler (provides just the value)
+	 */
+	onValueChange?: (value: string) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * The placeholder text
+	 */
+	placeholder?: string;
+	/**
+	 * The current value
+	 */
+	value?: string;
+	/**
+	 * The initial value of the input when rendered.
+	 * Use when you don't need to control the value of the input.
+	 */
+	defaultValue?: string;
+	/**
+	 * Whether the textarea is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * The number of visible text lines
+	 */
+	rows?: number;
+	/**
+	 * The minimum number of characters
+	 */
+	minLength?: number;
+	/**
+	 * The maximum number of characters
+	 */
+	maxLength?: number;
+}

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

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

package/src/components/ds-toast/ds-toast-context.tsx

@@ -0,0 +1,79 @@
+import { type FC, type ReactNode, createContext, useContext } from 'react';
+import { type CreateToasterReturn, createToaster } from '@ark-ui/react';
+import { DsToastGroup } from './ds-toast';
+import type { DsToastProps } from './ds-toast.types';
+
+export interface DsToastProviderProps {
+	/**
+	 * The maximum number of toasts to display (recommended 3 - 5)
+	 * @default 3
+	 */
+	max?: number;
+	/**
+	 * The children of the toast provider
+	 */
+	children: ReactNode;
+}
+
+export type DsToastContextType = {
+	/**
+	 * Create a new toast
+	 */
+	createToast: (toast: DsToastProps) => string;
+	/**
+	 * Dismiss a toast by id
+	 */
+	dismissToast: (id: string) => void;
+	/**
+	 * Dismiss all toasts
+	 */
+	dismissAllToasts: () => void;
+	/**
+	 * Get all visible toasts
+	 */
+	getToasts: () => DsToastProps[];
+	/**
+	 * Get the total number of toasts
+	 */
+	getToastsCount: () => number;
+};
+
+const DsToastContext = createContext<DsToastContextType | null>(null);
+
+const createToastFactory = (toaster: CreateToasterReturn) => (toast: DsToastProps) =>
+	toaster.create({
+		...toast,
+		type: toast.variant,
+		duration: toast.persistent ? Infinity : toast.duration || 6000,
+	});
+
+export const DsToastProvider: FC<DsToastProviderProps> = ({ children, max = 3 }) => {
+	const toaster = createToaster({
+		placement: 'top',
+		gap: 24,
+		max,
+	});
+
+	const contextValue: DsToastContextType = {
+		createToast: createToastFactory(toaster),
+		dismissToast: toaster.dismiss,
+		dismissAllToasts: () => toaster.dismiss(),
+		getToasts: toaster.getVisibleToasts,
+		getToastsCount: toaster.getCount,
+	};
+
+	return (
+		<DsToastContext.Provider value={contextValue}>
+			{children}
+			<DsToastGroup toaster={toaster} />
+		</DsToastContext.Provider>
+	);
+};
+
+export const useToaster = (): DsToastContextType => {
+	const context = useContext(DsToastContext);
+	if (!context) {
+		throw new Error('useToast must be used within a ToastProvider');
+	}
+	return context;
+};

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

@@ -0,0 +1,134 @@
+[data-scope='toast'][data-part='root'] {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-rows: auto 1fr auto;
+	grid-template-areas:
+		'icon title close'
+		'description description description'
+		'actions actions actions';
+	align-items: start;
+	padding: var(--spacing-standard);
+	border-radius: 4px;
+	column-gap: var(--spacing-xs);
+	row-gap: var(--spacing-4xs);
+	color: var(--color-font-on-action);
+	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
+	// approx. 6 columns (64 * 2)
+	min-width: 384px;
+	// approx. 10 columns (64 * 10)
+	max-width: 640px;
+	overflow-wrap: anywhere;
+	translate: var(--x) var(--y);
+	z-index: var(--z-index);
+
+	will-change: translate, opacity, scale;
+
+	&[data-state='open'] {
+		animation: slide-in 0.35s ease-in-out both;
+		transition: 0.35s all;
+	}
+
+	&[data-state='closed'] {
+		animation: fade-out 0.25s ease-out forwards;
+	}
+
+	&[data-type='success'] {
+		background: var(--color-background-success-strong);
+	}
+
+	&[data-type='info'] {
+		background: var(--color-background-info-strong);
+	}
+
+	&[data-type='warning'] {
+		background: var(--color-background-warning-strong);
+	}
+
+	&[data-type='error'] {
+		background: var(--color-background-danger-strong);
+	}
+
+	&:not(:has([data-scope='toast'][data-part='title'])) {
+		grid-template-columns: auto 1fr auto auto;
+		grid-template-areas: 'icon description actions close';
+		align-items: center;
+
+		.actions {
+			margin: 0;
+		}
+	}
+}
+
+[data-scope='toast'][data-part='close-trigger'] {
+	grid-area: close;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--spacing-4xs);
+
+	&:hover {
+		background: rgba(0, 0, 0, 0.05);
+	}
+
+	&:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 1px;
+	}
+}
+
+[data-scope='toast'][data-part='title'] {
+	grid-area: title;
+}
+
+[data-scope='toast'][data-part='description'] {
+	grid-area: description;
+}
+
+.icon {
+	grid-area: icon;
+	color: var(--color-icon-inverse);
+}
+
+.actions {
+	grid-area: actions;
+	margin-top: var(--spacing-sm);
+}
+
+@media (max-width: 640px) {
+	[data-scope='toast'][data-part='group'] {
+		width: 100%;
+	}
+
+	[data-scope='toast'][data-part='root'] {
+		inset-inline: 0;
+		width: calc(100% - var(--gap) * 2);
+	}
+}
+
+@keyframes slide-in {
+	0% {
+		opacity: 0;
+		scale: 0.9;
+	}
+
+	60% {
+		scale: 1.05;
+	}
+
+	100% {
+		opacity: 1;
+		scale: 1;
+	}
+}
+
+@keyframes fade-out {
+	0% {
+		opacity: 1;
+		translate: 0 var(--offset);
+	}
+
+	100% {
+		opacity: 0;
+		translate: 0 var(--offset);
+	}
+}

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

@@ -0,0 +1,54 @@
+import type React from 'react';
+import { type CreateToasterReturn, Toast, Toaster } from '@ark-ui/react';
+import styles from './ds-toast.module.scss';
+import type { DsToastProps, ToastVariant } from './ds-toast.types';
+import { type IconType, DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+const variantIcons = {
+	success: 'check_circle',
+	info: 'info',
+	warning: 'error',
+	error: 'cancel',
+} satisfies Record<ToastVariant, IconType>;
+
+/**
+ * Design system Toast component
+ * This component is used within the Toaster render function
+ */
+const DsToast = ({
+	style,
+	className,
+	variant = 'info',
+	title,
+	description,
+	onDismiss,
+	actions,
+}: DsToastProps) => (
+	<Toast.Root style={style} className={className}>
+		<DsIcon icon={variantIcons[variant]} size="small" filled className={styles.icon} />
+		{title && (
+			<DsTypography variant="body-sm-md" asChild>
+				<Toast.Title>{title}</Toast.Title>
+			</DsTypography>
+		)}
+		{description && (
+			<DsTypography variant="body-sm-reg" asChild>
+				<Toast.Description>{description}</Toast.Description>
+			</DsTypography>
+		)}
+		<Toast.CloseTrigger onClick={onDismiss}>
+			<DsIcon icon="close" size="small" />
+		</Toast.CloseTrigger>
+		{actions && <div className={styles.actions}>{actions}</div>}
+	</Toast.Root>
+);
+
+/**
+ * Design system Toast Group component that wraps the Toaster
+ */
+const DsToastGroup: React.FC<{ toaster: CreateToasterReturn }> = ({ toaster }) => {
+	return <Toaster toaster={toaster}>{(toast: DsToastProps) => <DsToast {...toast} />}</Toaster>;
+};
+
+export { DsToast, DsToastGroup };

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

@@ -0,0 +1,53 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export const toastVariants = ['info', 'success', 'warning', 'error'] as const;
+export type ToastVariant = (typeof toastVariants)[number];
+
+export type DsToastConfig =
+	| {
+			persistent?: never;
+			/**
+			 * Duration in milliseconds before auto-dismiss (ignored if persistent is true)
+			 * @default 6000 (6 seconds)
+			 */
+			duration?: number;
+	  }
+	| {
+			duration?: never;
+			/**
+			 * Whether the toast should persist until manually dismissed
+			 * @default false
+			 */
+			persistent?: boolean;
+	  };
+
+export type DsToastProps = DsToastConfig & {
+	/**
+	 * Toast type that determines styling and icon
+	 */
+	variant?: ToastVariant;
+	/**
+	 * Toast title
+	 */
+	title?: ReactNode;
+	/**
+	 * Toast description/message
+	 */
+	description?: ReactNode;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+	/**
+	 * Optional action buttons to be rendered inside the component
+	 */
+	actions?: ReactNode;
+	/**
+	 * Callback when toast is dismissed
+	 */
+	onDismiss?: () => void;
+};

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

@@ -0,0 +1,3 @@
+export { DsToastProvider, useToaster } from './ds-toast-context';
+export type { DsToastContextType, DsToastProviderProps } from './ds-toast-context';
+export type { DsToastProps, ToastVariant } from './ds-toast.types';

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

@@ -0,0 +1,19 @@
+@use '../../styles/typography';
+
+.tooltip {
+	color: var(--color-font-on-action);
+	background-color: var(--color-background-brand);
+	padding: var(--spacing-xs) var(--spacing-sm);
+	border-radius: var(--exo-spacing-2x-small);
+	// approx. 6 grid columns
+	max-width: 384px;
+	z-index: 9999;
+
+	.content {
+		@include typography.line-clamp(3);
+	}
+}
+
+.arrow {
+	fill: var(--neutral-1);
+}