@drivenets/design-system 0.5.0 → 0.6.0

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;
+		}
+	}
+}