@drivenets/design-system 0.5.0 → 0.6.1

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

@@ -1,17 +1,76 @@
+@use '../../styles/mixin' as mixins;
+
+$step-padding: var(--spacing-sm);
+$step-gap: var(--spacing-standard);
+$step-border-radius: var(--spacing-3xs);
+
+$step-single-padding-block: var(--spacing-standard);
+$step-single-padding-inline-start: var(--spacing-sm);
+$step-single-padding-inline-end: var(--spacing-md);
+$step-single-border-radius: var(--spacing-xs);
+
+$indicator-size: 36px;
+$indicator-size-single: var(--icon-width-extra-large);
+$indicator-border-width: var(--spacing-4xs);
+$indicator-border-width-current: 3px;
+$indicator-container-padding: 0 var(--spacing-4xs);
+
+$separator-width: var(--spacing-4xs);
+$separator-offset: var(--spacing-sm);
+
+$label-padding: var(--spacing-4xs) 0;
+$label-font-size: var(--font-size-md);
+$label-font-size-single: var(--font-size-sm);
+$label-line-height: 1.5;
+$label-font-weight: var(--font-weight-medium);
+$description-font-size: var(--font-size-sm);
+$description-line-height: 1.4;
+
+$actions-margin-top: var(--spacing-sm);
+$actions-gap: var(--spacing-3xs);
+
+$drag-handle-size: 20px;
+
+$horizontal-current-min-width: 256px;
+$horizontal-description-line-clamp: 2;
+
+.dragHandle {
+	display: grid;
+	place-items: center;
+	flex-shrink: 0;
+	width: $drag-handle-size;
+	height: $drag-handle-size;
+	color: var(--color-font-secondary);
+	cursor: grab;
+}
+.root {
+	background: var(--color-background);
+	overflow-y: auto;
+}
+
+.verticalActions {
+	display: flex;
+	gap: $actions-gap;
+	padding: $step-padding;
+}
+
 .step {
-	padding: 12px;
+	position: relative;
+	padding: $step-padding;
 	display: flex;
-	gap: 16px;
+	gap: $step-gap;
 	background: none;
 	border: none;
 	text-align: start;
 	font-family: inherit;
 
+	@include mixins.disabled-overlay;
+
 	.root.variantSingle & {
-		padding-block: 16px;
-		padding-inline-start: 12px;
-		padding-inline-end: 20px;
-		border-radius: 8px;
+		padding-block: $step-single-padding-block;
+		padding-inline-start: $step-single-padding-inline-start;
+		padding-inline-end: $step-single-padding-inline-end;
+		border-radius: $step-single-border-radius;
 	}
 
 	.root:not(.variantSingle) &[data-complete] {
@@ -19,26 +78,26 @@
 	}
 
 	&[data-current] {
-		border-radius: 4px;
+		border-radius: $step-border-radius;
 		background: var(--color-background-action-secondary-hover);
 	}
 
 	.indicatorContainer {
-		padding: 0 2px;
+		padding: $indicator-container-padding;
 		position: relative;
 		display: flex;
 
 		.indicator {
-			height: 36px;
-			width: 36px;
-			border: 2px solid var(--color-border);
+			height: $indicator-size;
+			width: $indicator-size;
+			border: $indicator-border-width solid var(--color-border);
 			display: grid;
 			place-items: center;
 			border-radius: 100%;
 
 			.variantSingle & {
-				height: 32px;
-				width: 32px;
+				height: $indicator-size-single;
+				width: $indicator-size-single;
 			}
 		}
 
@@ -50,26 +109,27 @@
 		&[data-current] .indicator {
 			background: var(--color-background-selected);
 			color: var(--white);
-			border: 3px solid var(--white);
+			border: $indicator-border-width-current solid var(--white);
 		}
 
 		.separator {
 			position: absolute;
-			width: 2px;
-			height: calc(100% - 12px);
-			top: 36px;
+			width: $separator-width;
+			height: calc(100% - $separator-offset);
+			top: $indicator-size;
 			left: 50%;
-			margin-left: -1px;
+			margin-left: calc($separator-width / -2);
 			background: var(--color-border);
+			z-index: 10;
 
 			&[data-complete] {
 				background: var(--color-background-selected);
 			}
-		}
-	}
 
-	&:last-child .indicatorContainer .separator {
-		display: none;
+			&[data-current] {
+				background: var(--color-background-selected);
+			}
+		}
 	}
 
 	.stepContent {
@@ -84,21 +144,21 @@
 	}
 
 	.stepLabel {
-		padding: 2px 0;
-		font-size: 16px;
-		line-height: 1.5;
-		font-weight: 500;
+		padding: $label-padding;
+		font-size: $label-font-size;
+		line-height: $label-line-height;
+		font-weight: $label-font-weight;
 		color: var(--color-font-secondary);
 
 		.root.variantSingle & {
-			font-size: 14px;
+			font-size: $label-font-size-single;
 		}
 	}
 
 	.stepDescription {
 		margin: 0;
-		font-size: 14px;
-		line-height: 1.4;
+		font-size: $description-font-size;
+		line-height: $description-line-height;
 		color: var(--color-background-deselected);
 	}
 
@@ -123,12 +183,114 @@
 	}
 
 	.stepContent:not(.stepContentSingle) .stepActions {
-		margin-top: 12px;
+		margin-top: $actions-margin-top;
 	}
 
 	.stepActions {
 		margin-inline-start: auto;
 		display: flex;
-		gap: 4px;
+		gap: $actions-gap;
+	}
+}
+
+.step[data-error] {
+	.indicatorContainer .indicator {
+		background: var(--color-background-danger-weak);
+		color: var(--color-background-danger-strong);
+		border-color: var(--color-background-danger-strong);
+	}
+
+	.stepLabel {
+		color: var(--color-font-danger);
+	}
+}
+
+.root[data-orientation='horizontal'] {
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-xs) var(--spacing-standard);
+
+	.stepsContainer {
+		display: flex;
+		flex: 1 1 0;
+		align-items: flex-start;
+		min-width: 0;
+		overflow-x: auto;
+	}
+
+	.horizontalActions {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		padding-inline-start: var(--spacing-xs);
+	}
+
+	.step {
+		flex: 1 1 0;
+		padding: var(--spacing-3xs) var(--spacing-xs);
+		gap: var(--spacing-sm);
+		border-radius: var(--spacing-2xs);
+		overflow: clip;
+
+		&[data-current] {
+			min-width: $horizontal-current-min-width;
+			border-radius: var(--spacing-2xs);
+		}
+	}
+
+	.indicatorContainer {
+		padding: 0;
+
+		.indicator {
+			height: $indicator-size;
+			width: $indicator-size;
+		}
+	}
+
+	.stepContent {
+		min-width: 0;
+	}
+
+	.stepLabelRow {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		height: $indicator-size;
+		min-width: 0;
+	}
+
+	.stepLabel {
+		padding: 0;
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-sm);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex-shrink: 0;
+	}
+
+	.horizontalSeparator {
+		flex: 1 1 0;
+		height: var(--spacing-4xs);
+		min-width: 0;
+		background: var(--color-border-contrast);
+
+		&[data-complete] {
+			background: var(--color-background-selected);
+		}
+
+		&[data-current] {
+			background: var(--color-outline-moderate);
+		}
+	}
+
+	.stepDescription {
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-xs);
+		max-height: var(--spacing-8);
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: $horizontal-description-line-clamp;
+		-webkit-box-orient: vertical;
 	}
 }

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

@@ -7,27 +7,51 @@ import type { DsStepperProps } from './ds-stepper.types';
 export function DsStepper({
 	count,
 	variant,
+	orientation = 'vertical',
+	floating = false,
 	activeStep,
 	onStepChange,
 	onComplete,
 	children,
+	className,
+	actions,
 }: DsStepperProps) {
-	const stepsApi = useSteps({ count, activeStep, onStepChange, onComplete });
+	const stepsApi = useSteps({ count, activeStep, onStepChange, onComplete, orientation });
+
+	const isHorizontal = orientation === 'horizontal';
 
 	return (
 		<StepperContext.Provider
 			value={{
 				stepsApi,
 				variant,
+				orientation,
+				floating,
 			}}
 		>
 			<div
 				{...stepsApi.getRootProps()}
-				className={classnames(styles.root, {
-					[styles.variantSingle]: variant === 'single',
-				})}
+				className={classnames(
+					styles.root,
+					{
+						[styles.variantSingle]: variant === 'single',
+					},
+					className,
+				)}
 			>
-				{children}
+				{isHorizontal ? (
+					<>
+						<div className={styles.stepsContainer}>{children}</div>
+
+						{actions && <div className={styles.horizontalActions}>{actions}</div>}
+					</>
+				) : (
+					<>
+						{children}
+
+						{actions && <div className={styles.verticalActions}>{actions}</div>}
+					</>
+				)}
 			</div>
 		</StepperContext.Provider>
 	);

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

@@ -1,12 +1,22 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import type * as steps from '@zag-js/steps';
 
 export type DsStepperVariant = 'single';
 
+export type DsStepperOrientation = 'horizontal' | 'vertical';
+
 export type DsStepperProps = PropsWithChildren<
 	{
 		variant?: DsStepperVariant;
+		orientation?: DsStepperOrientation;
+		floating?: boolean;
 		onComplete?: steps.Props['onStepComplete'];
 		activeStep?: steps.Props['step'];
+		className?: string;
+		/**
+		 * Optional actions rendered at the end of the stepper.
+		 * Horizontal: displayed after the steps. Vertical: displayed at the bottom.
+		 */
+		actions?: ReactNode;
 	} & Pick<steps.Props, 'onStepChange' | 'count'>
 >;

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

@@ -1,10 +1,12 @@
 import { createContext, useContext } from 'react';
-import type { DsStepperVariant } from '../ds-stepper.types';
+import type { DsStepperOrientation, DsStepperVariant } from '../ds-stepper.types';
 import type { useSteps } from './use-steps';
 
 type StepsContext = {
 	stepsApi: ReturnType<typeof useSteps>;
 	variant: DsStepperVariant | undefined;
+	orientation: DsStepperOrientation;
+	floating: boolean;
 };
 
 export const StepperContext = createContext<StepsContext | null>(null);

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

@@ -3,15 +3,16 @@ 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'>;
+type UseSteps = Pick<DsStepperProps, 'activeStep' | 'onStepChange' | 'count' | 'onComplete' | 'orientation'>;
 
-export function useSteps({ count, activeStep, onStepChange, onComplete }: UseSteps) {
+export function useSteps({ count, activeStep, onStepChange, onComplete, orientation }: UseSteps) {
 	const service = useMachine(steps.machine, {
 		id: useId(),
 		count,
 		step: activeStep,
 		onStepChange,
 		onStepComplete: onComplete,
+		orientation,
 	});
 
 	return steps.connect(service, normalizeProps);

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

@@ -1,6 +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 { DsStep, type DsStepProps } from './components/ds-step';
+export { DsStepContent, type DsStepContentProps } from './components/ds-step-content';
+export { DsNextStepButton, type DsNextStepButtonProps } from './components/ds-step-next-button';
 
-export type { DsStepperProps, DsStepperVariant } from './ds-stepper.types';
+export type { DsStepperProps, DsStepperVariant, DsStepperOrientation } from './ds-stepper.types';

package/src/styles/_mixin.scss

@@ -1 +1,2 @@
+@import './mixins/disabled';
 @import './mixins/list';

package/src/styles/mixins/_disabled.scss

@@ -0,0 +1,18 @@
+// Disabled state overlay mixin
+// Creates a semi-transparent overlay on disabled elements
+
+@mixin disabled-overlay {
+	&[data-disabled] {
+		position: relative;
+		cursor: not-allowed;
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			background: rgba(255, 255, 255, 0.6);
+			pointer-events: none;
+			border-radius: inherit;
+		}
+	}
+}

package/dist/_virtual/rolldown_runtime.cjs

@@ -1,29 +0,0 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-
-exports.__toESM = __toESM;

package/dist/components/ds-alert-banner/ds-alert-banner.cjs

@@ -1,182 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_ds_alert_banner_module = require('./ds-alert-banner.module.cjs');
-const require_ds_icon = require('../ds-icon/ds-icon.cjs');
-require('../ds-icon/index.cjs');
-const require_ds_typography = require('../ds-typography/ds-typography.cjs');
-require('../ds-typography/index.cjs');
-let react_compiler_runtime = require("react/compiler-runtime");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/ds-alert-banner/ds-alert-banner.tsx
-/**
-* Design system AlertBanner component
-* Controlled component that displays alert messages with different variants
-*/
-const DsAlertBanner = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(20);
-	const { open, onOpenChange, inline: t1, variant: t2, icon, closable: t3, className, style: t4, children } = t0;
-	const inline = t1 === void 0 ? false : t1;
-	const variant = t2 === void 0 ? "info-blue" : t2;
-	const closable = t3 === void 0 ? false : t3;
-	let t5;
-	if ($[0] !== t4) {
-		t5 = t4 === void 0 ? {} : t4;
-		$[0] = t4;
-		$[1] = t5;
-	} else t5 = $[1];
-	const style = t5;
-	let t6;
-	if ($[2] !== className || $[3] !== inline || $[4] !== open || $[5] !== variant) {
-		const variantClass = {
-			"info-neutral": require_ds_alert_banner_module.default.infoNeutral,
-			"info-blue": require_ds_alert_banner_module.default.infoBlue,
-			warning: require_ds_alert_banner_module.default.warning,
-			error: require_ds_alert_banner_module.default.error,
-			success: require_ds_alert_banner_module.default.success
-		}[variant];
-		t6 = (0, classnames.default)(require_ds_alert_banner_module.default.alertBanner, inline && require_ds_alert_banner_module.default.inline, !inline && require_ds_alert_banner_module.default.global, variantClass, { [require_ds_alert_banner_module.default.hidden]: !open }, className);
-		$[2] = className;
-		$[3] = inline;
-		$[4] = open;
-		$[5] = variant;
-		$[6] = t6;
-	} else t6 = $[6];
-	const alertBannerClass = t6;
-	let t7;
-	if ($[7] !== onOpenChange) {
-		t7 = () => {
-			onOpenChange(false);
-		};
-		$[7] = onOpenChange;
-		$[8] = t7;
-	} else t7 = $[8];
-	const handleClose = t7;
-	if (!open) return null;
-	let t8;
-	if ($[9] !== icon) {
-		t8 = icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-			className: require_ds_alert_banner_module.default.icon,
-			icon,
-			size: "small",
-			filled: true
-		});
-		$[9] = icon;
-		$[10] = t8;
-	} else t8 = $[10];
-	let t9;
-	if ($[11] !== closable || $[12] !== handleClose) {
-		t9 = closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			type: "button",
-			className: require_ds_alert_banner_module.default.closeButton,
-			onClick: handleClose,
-			"aria-label": "Close alert",
-			"data-close": true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
-				icon: "close",
-				size: "small"
-			})
-		});
-		$[11] = closable;
-		$[12] = handleClose;
-		$[13] = t9;
-	} else t9 = $[13];
-	let t10;
-	if ($[14] !== alertBannerClass || $[15] !== children || $[16] !== style || $[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: alertBannerClass,
-			style,
-			children: [
-				t8,
-				children,
-				t9
-			]
-		});
-		$[14] = alertBannerClass;
-		$[15] = children;
-		$[16] = style;
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	return t10;
-};
-const Title = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_alert_banner_module.default.title, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-			style,
-			className: t1,
-			variant: "body-md-md",
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Body = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_alert_banner_module.default.description, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
-			style,
-			className: t1,
-			variant: "body-sm-reg",
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-const Actions = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(6);
-	const { style, className, children } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = (0, classnames.default)(require_ds_alert_banner_module.default.actions, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== children || $[3] !== style || $[4] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style,
-			className: t1,
-			children
-		});
-		$[2] = children;
-		$[3] = style;
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
-};
-DsAlertBanner.Title = Title;
-DsAlertBanner.Body = Body;
-DsAlertBanner.Actions = Actions;
-var ds_alert_banner_default = DsAlertBanner;
-
-//#endregion
-exports.default = ds_alert_banner_default;