@drivenets/design-system 0.0.1

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

@@ -0,0 +1,51 @@
+import type React from 'react';
+import classNames from 'classnames';
+import styles from './ds-spinner.module.scss';
+import type { DsSpinnerProps, SpinnerSize } from './ds-spinner.types';
+
+const sizeMap: Record<SpinnerSize, number> = {
+	small: 50,
+	medium: 75,
+	large: 100,
+};
+
+const widthMap: Record<SpinnerSize, number> = {
+	small: 4,
+	medium: 7,
+	large: 9,
+};
+
+/**
+ * Design system Spinner component
+ */
+const DsSpinner: React.FC<DsSpinnerProps> = ({ size = 'medium', className, style = {}, ...props }) => {
+	const actualSize = sizeMap[size];
+	const actualWidth = widthMap[size];
+	const radius = (actualSize - actualWidth) / 2;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDasharray = `${String(0.25 * circumference)} ${String(circumference)}`;
+
+	return (
+		<div className={classNames(styles.spinnerContainer, styles[size], className)} style={style} {...props}>
+			<svg
+				className={classNames(styles.progressCircle, styles.spin)}
+				width={actualSize}
+				height={actualSize}
+				viewBox={`0 0 ${String(actualSize)} ${String(actualSize)}`}
+			>
+				<circle
+					className={styles.progressArc}
+					cx={actualSize / 2}
+					cy={actualSize / 2}
+					r={radius}
+					fill="none"
+					strokeWidth={actualWidth}
+					strokeDasharray={strokeDasharray}
+					strokeLinecap="round"
+				/>
+			</svg>
+		</div>
+	);
+};
+
+export default DsSpinner;

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

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+export const spinnerSizes = ['small', 'medium', 'large'] as const;
+export type SpinnerSize = (typeof spinnerSizes)[number];
+
+export interface DsSpinnerProps {
+	/**
+	 * The size of the spinner
+	 * @default 'medium'
+	 */
+	size?: SpinnerSize;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+}

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

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

package/src/components/ds-status-badge/ds-status-badge.module.scss

@@ -0,0 +1,79 @@
+@use '../../styles/typography';
+
+@mixin status-filled($color, $background, $label-color: var(--color-font-on-action)) {
+	color: $color;
+	background: $background;
+
+	.label {
+		color: $label-color;
+	}
+}
+
+@mixin status-ghost($color, $background) {
+	&.ghost {
+		color: $color;
+		background: $background;
+
+		.label {
+			color: var(--color-font-main);
+		}
+	}
+}
+
+.container {
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-3xs) var(--spacing-standard) var(--spacing-3xs) var(--spacing-xs);
+	width: max-content;
+	color: var(--color-icon-inverse);
+	gap: var(--spacing-3xs);
+	border-radius: 100vmax;
+
+	&.small {
+		padding: var(--spacing-4xs) var(--spacing-xs) var(--spacing-4xs) var(--spacing-3xs);
+		gap: var(--spacing-4xs);
+	}
+}
+
+.active {
+	@include status-filled(var(--color-font-on-action), var(--color-background-success-strong));
+	@include status-ghost(var(--color-background-success-strong), var(--color-status-bg-success));
+}
+
+.running {
+	@include status-filled(var(--color-font-on-action), var(--color-background-active-moderate));
+	@include status-ghost(var(--color-icon-information-secondary), var(--color-status-bg-progress));
+}
+
+.pending {
+	@include status-filled(var(--color-font-on-action), var(--color-data-fuchsia));
+	@include status-ghost(var(--color-data-purple), var(--color-data-light-purple));
+}
+
+.draft {
+	@include status-filled(var(--color-font-on-action), var(--color-icon-information-main));
+	@include status-ghost(var(--color-icon-secondary), var(--color-status-bg-neutral));
+}
+
+.inactive {
+	@include status-filled(
+		var(--color-icon-secondary),
+		var(--color-background-disable),
+		var(--color-font-on-disabled)
+	);
+	@include status-ghost(var(--color-icon-secondary), var(--color-status-bg-inactive));
+}
+
+.warning {
+	@include status-filled(var(--color-font-on-action), var(--color-background-warning-strong));
+	@include status-ghost(var(--color-background-warning-strong), var(--color-status-bg-warning));
+}
+
+.failed {
+	@include status-filled(var(--color-font-on-action), var(--color-background-danger-strong));
+	@include status-ghost(var(--color-background-danger-strong-hover), var(--color-status-bg-failed));
+}
+
+.label {
+	text-transform: capitalize;
+}

package/src/components/ds-status-badge/ds-status-badge.tsx

@@ -0,0 +1,42 @@
+import type React from 'react';
+import classNames from 'classnames';
+import styles from './ds-status-badge.module.scss';
+import type { DsStatusBadgeProps } from './ds-status-badge.types';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Design system StatusBadge component
+ */
+const DsStatusBadge: React.FC<DsStatusBadgeProps> = ({
+	icon,
+	status,
+	label = status,
+	className,
+	style,
+	ghost = false,
+	size = 'medium',
+	'aria-label': ariaLabel = label,
+}) => {
+	return (
+		<div
+			style={style}
+			className={classNames(
+				styles.container,
+				styles[status],
+				ghost && styles.ghost,
+				size === 'small' && styles.small,
+				className,
+			)}
+			role="status"
+			aria-label={ariaLabel}
+		>
+			{icon && <DsIcon icon={icon} size="tiny" filled aria-hidden="true" />}
+			<DsTypography className={styles.label} variant={ghost ? 'body-xs-md' : 'body-xs-reg'}>
+				{label}
+			</DsTypography>
+		</div>
+	);
+};
+
+export default DsStatusBadge;

package/src/components/ds-status-badge/ds-status-badge.types.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties } from 'react';
+import type { IconType } from '../ds-icon';
+
+export const dsStatuses = ['active', 'running', 'pending', 'draft', 'inactive', 'warning', 'failed'] as const;
+
+export type DsStatus = (typeof dsStatuses)[number];
+
+export const statusBadgeSizes = ['medium', 'small'] as const;
+export type StatusBadgeSize = (typeof statusBadgeSizes)[number];
+
+export interface DsStatusBadgeProps {
+	/**
+	 * The icon of the status badge
+	 */
+	icon?: IconType;
+	/**
+	 * The value of the status badge
+	 */
+	status: DsStatus;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+	/**
+	 * Optional label to display instead of the default status text
+	 */
+	label?: string;
+	/**
+	 * Whether the status badge should use ghost style (light background)
+	 * @default false
+	 */
+	ghost?: boolean;
+	/**
+	 * Size of the status badge
+	 * @default 'medium'
+	 */
+	size?: StatusBadgeSize;
+	/**
+	 * Accessible label for screen readers, if provided, will override default label/status text.
+	 */
+	'aria-label'?: string;
+}

package/src/components/ds-status-badge/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsStatusBadge } from './ds-status-badge';
+export type { DsStatus, StatusBadgeSize, DsStatusBadgeProps } from './ds-status-badge.types';

package/src/components/ds-stepper/components/ds-step-content.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { useStepper } from '../hooks/use-stepper';
+import { DsStepLabel } from './ds-step-label';
+import { DsStepDescription } from './ds-step-description';
+import classnames from 'classnames';
+import styles from '../ds-stepper.module.scss';
+
+type DsStepContentProps = {
+	index: number;
+	label: string;
+	description?: string;
+	actions?: ReactNode;
+};
+
+export function DsStepContent({ index, label, description, actions }: DsStepContentProps) {
+	const { variant, stepsApi } = useStepper();
+	const { current } = stepsApi.getItemState({ index });
+
+	return (
+		<div
+			className={classnames(styles.stepContent, {
+				[styles.stepContentSingle]: variant === 'single',
+			})}
+		>
+			<DsStepLabel>{label}</DsStepLabel>
+
+			{variant !== 'single' && description && <DsStepDescription>{description}</DsStepDescription>}
+
+			{actions && current && <div className={styles.stepActions}>{actions}</div>}
+		</div>
+	);
+}

package/src/components/ds-stepper/components/ds-step-description.tsx

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+import styles from '../ds-stepper.module.scss';
+
+export function DsStepDescription({ children }: PropsWithChildren) {
+	return <p className={styles.stepDescription}>{children}</p>;
+}

package/src/components/ds-stepper/components/ds-step-label.tsx

@@ -0,0 +1,6 @@
+import type { PropsWithChildren } from 'react';
+import styles from '../ds-stepper.module.scss';
+
+export function DsStepLabel({ children }: PropsWithChildren) {
+	return <span className={styles.stepLabel}>{children}</span>;
+}

package/src/components/ds-stepper/components/ds-step-next-button.tsx

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+import { useStepper } from '../hooks/use-stepper';
+import DsButton from '../../ds-button/ds-button';
+
+export function DsNextStepButton({ children }: PropsWithChildren) {
+	const context = useStepper();
+
+	return (
+		<DsButton {...context.stepsApi.getNextTriggerProps()} size="small">
+			{children}
+		</DsButton>
+	);
+}

package/src/components/ds-stepper/components/ds-step.tsx

@@ -0,0 +1,59 @@
+import type { PropsWithChildren } from 'react';
+import { useStepper } from '../hooks/use-stepper';
+import classnames from 'classnames';
+import styles from '../ds-stepper.module.scss';
+import DsIcon from '../../ds-icon/ds-icon';
+
+type DsStepProps = PropsWithChildren<{
+	index: number;
+	className?: string;
+}>;
+
+export function DsStep({ index, children, className }: DsStepProps) {
+	const context = useStepper();
+
+	const { completed, current, last } = context.stepsApi.getItemState({ index });
+
+	const isSingleVariant = context.variant === 'single';
+	const isLast = last && context.stepsApi.value === index + 1;
+
+	const shouldHide = isSingleVariant && !current && !isLast;
+
+	if (shouldHide) {
+		return null;
+	}
+
+	const isClickable = completed && !isSingleVariant;
+
+	const Wrapper = isClickable ? 'button' : 'div';
+
+	const props = isClickable
+		? {
+				onClick: () => {
+					context.stepsApi.setStep(index);
+				},
+			}
+		: {};
+
+	return (
+		<Wrapper
+			{...context.stepsApi.getItemProps({ index })}
+			data-current={current ? '' : undefined}
+			data-complete={completed ? '' : undefined}
+			className={classnames(styles.step, className)}
+			{...props}
+		>
+			<div {...context.stepsApi.getIndicatorProps({ index })} className={styles.indicatorContainer}>
+				{completed ? (
+					<DsIcon icon="check" className={styles.indicator} />
+				) : (
+					<span className={styles.indicator}>{index + 1}</span>
+				)}
+
+				<div {...context.stepsApi.getSeparatorProps({ index })} className={styles.separator} />
+			</div>
+
+			{children}
+		</Wrapper>
+	);
+}

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

@@ -0,0 +1,134 @@
+.step {
+	padding: 12px;
+	display: flex;
+	gap: 16px;
+	background: none;
+	border: none;
+	text-align: start;
+	font-family: inherit;
+
+	.root.variantSingle & {
+		padding-block: 16px;
+		padding-inline-start: 12px;
+		padding-inline-end: 20px;
+		border-radius: 8px;
+	}
+
+	.root:not(.variantSingle) &[data-complete] {
+		cursor: pointer;
+	}
+
+	&[data-current] {
+		border-radius: 4px;
+		background: var(--color-background-action-secondary-hover);
+	}
+
+	.indicatorContainer {
+		padding: 0 2px;
+		position: relative;
+		display: flex;
+
+		.indicator {
+			height: 36px;
+			width: 36px;
+			border: 2px solid var(--color-border);
+			display: grid;
+			place-items: center;
+			border-radius: 100%;
+
+			.variantSingle & {
+				height: 32px;
+				width: 32px;
+			}
+		}
+
+		&[data-complete] .indicator {
+			color: var(--color-background-selected);
+			border-color: var(--color-background-selected);
+		}
+
+		&[data-current] .indicator {
+			background: var(--color-background-selected);
+			color: var(--white);
+			border: 3px solid var(--white);
+		}
+
+		.separator {
+			position: absolute;
+			width: 2px;
+			height: calc(100% - 12px);
+			top: 36px;
+			left: 50%;
+			margin-left: -1px;
+			background: var(--color-border);
+
+			&[data-complete] {
+				background: var(--color-background-selected);
+			}
+		}
+	}
+
+	&:last-child .indicatorContainer .separator {
+		display: none;
+	}
+
+	.stepContent {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+
+		&.stepContentSingle {
+			flex-direction: row;
+			align-items: center;
+		}
+	}
+
+	.stepLabel {
+		padding: 2px 0;
+		font-size: 16px;
+		line-height: 1.5;
+		font-weight: 500;
+		color: var(--color-font-secondary);
+
+		.root.variantSingle & {
+			font-size: 14px;
+		}
+	}
+
+	.stepDescription {
+		margin: 0;
+		font-size: 14px;
+		line-height: 1.4;
+		color: var(--color-background-deselected);
+	}
+
+	&[data-current] {
+		.stepLabel {
+			color: var(--color-font-action);
+		}
+
+		.stepDescription {
+			color: var(--color-font-main);
+		}
+	}
+
+	&[data-complete] {
+		.stepLabel {
+			color: var(--color-font-main);
+		}
+
+		.stepDescription {
+			color: var(--color-font-secondary);
+		}
+	}
+
+	.stepContent:not(.stepContentSingle) .stepActions {
+		margin-top: 12px;
+	}
+
+	.stepActions {
+		margin-inline-start: auto;
+		display: flex;
+		gap: 4px;
+	}
+}

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

@@ -0,0 +1,34 @@
+import classnames from 'classnames';
+import styles from './ds-stepper.module.scss';
+import { useSteps } from './hooks/use-steps';
+import { StepperContext } from './hooks/use-stepper';
+import type { DsStepperProps } from './ds-stepper.types';
+
+export function DsStepper({
+	count,
+	variant,
+	activeStep,
+	onStepChange,
+	onComplete,
+	children,
+}: DsStepperProps) {
+	const stepsApi = useSteps({ count, activeStep, onStepChange, onComplete });
+
+	return (
+		<StepperContext.Provider
+			value={{
+				stepsApi,
+				variant,
+			}}
+		>
+			<div
+				{...stepsApi.getRootProps()}
+				className={classnames(styles.root, {
+					[styles.variantSingle]: variant === 'single',
+				})}
+			>
+				{children}
+			</div>
+		</StepperContext.Provider>
+	);
+}

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

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import type * as steps from '@zag-js/steps';
+
+export type DsStepperVariant = 'single';
+
+export type DsStepperProps = PropsWithChildren<
+	{
+		variant?: DsStepperVariant;
+		onComplete?: steps.Props['onStepComplete'];
+		activeStep?: steps.Props['step'];
+	} & Pick<steps.Props, 'onStepChange' | 'count'>
+>;

package/src/components/ds-stepper/hooks/use-stepper.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+import type { DsStepperVariant } from '../ds-stepper.types';
+import type { useSteps } from './use-steps';
+
+type StepsContext = {
+	stepsApi: ReturnType<typeof useSteps>;
+	variant: DsStepperVariant | undefined;
+};
+
+export const StepperContext = createContext<StepsContext | null>(null);
+
+export function useStepper() {
+	const context = useContext(StepperContext);
+
+	if (!context) {
+		throw new Error('useStepper must be used within a DsStepper');
+	}
+
+	return context;
+}

package/src/components/ds-stepper/hooks/use-steps.ts

@@ -0,0 +1,18 @@
+import { useId } from 'react';
+import * as steps from '@zag-js/steps';
+import { normalizeProps, useMachine } from '@zag-js/react';
+import type { DsStepperProps } from '../ds-stepper.types';
+
+type UseSteps = Pick<DsStepperProps, 'activeStep' | 'onStepChange' | 'count' | 'onComplete'>;
+
+export function useSteps({ count, activeStep, onStepChange, onComplete }: UseSteps) {
+	const service = useMachine(steps.machine, {
+		id: useId(),
+		count,
+		step: activeStep,
+		onStepChange,
+		onStepComplete: onComplete,
+	});
+
+	return steps.connect(service, normalizeProps);
+}

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

@@ -0,0 +1,6 @@
+export { DsStepper } from './ds-stepper';
+export { DsStep } from './components/ds-step';
+export { DsStepContent } from './components/ds-step-content';
+export { DsNextStepButton } from './components/ds-step-next-button';
+
+export type { DsStepperProps, DsStepperVariant } from './ds-stepper.types';

package/src/components/ds-system-status/ds-system-status.module.scss

@@ -0,0 +1,87 @@
+@use '../../styles/typography';
+
+.container {
+	@include typography.p-special;
+	@include typography.medium;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 8px;
+	border-radius: 4px;
+	width: max-content;
+	text-transform: uppercase;
+}
+
+.dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid var(--white);
+}
+
+.label {
+	@include typography.p-special;
+}
+
+.healthy {
+	background: var(--utility-ok);
+	color: var(--system-status-ok);
+
+	.dot {
+		background: var(--system-status-ok);
+	}
+}
+
+.neutral {
+	background: var(--utility-info);
+	color: var(--system-status-info);
+
+	.dot {
+		background: var(--system-status-info);
+	}
+}
+
+.error {
+	background: var(--utility-error);
+	color: var(--system-status-error);
+
+	.dot {
+		background: var(--system-status-error);
+	}
+}
+
+.in-progress {
+	background: var(--utility-in-progress);
+	color: var(--system-status-in-progress);
+
+	.dot {
+		background: var(--system-status-in-progress);
+	}
+}
+
+.pending {
+	background: var(--utility-pending);
+	color: var(--system-status-pending);
+
+	.dot {
+		background: var(--system-status-pending);
+	}
+}
+
+.alert {
+	background: var(--utility-alert);
+	color: var(--system-status-alert);
+
+	.dot {
+		background: var(--system-status-alert);
+	}
+}
+
+.disabled {
+	background: var(--utility-disabled);
+	color: var(--neutral-2);
+
+	.dot {
+		background: var(--neutral-2);
+	}
+}