fn-design-system/components/stepper.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, framework, props, output, tested, tests, test_file_path, file_path, emits, has_state, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	framework	props	output	tested	tests	test_file_path	file_path	emits	has_state	variant
stepper	component	ts	ui	1.0.0	impure	FnStepper(props: FnStepperProps): JSX.Element	Stepper de pasos con orientacion horizontal/vertical. Wrapper sobre Mantine Stepper.	mantine stepper steps wizard component ui				false		@mantine/core	react	name type required description steps { label: string; description?: string; icon?: ReactNode }[] true Definicion de cada paso del stepper name type required description active number true Indice del paso activo (0-based) name type required description onStepClick (step: number) => void false Callback al hacer click en un paso name type required description orientation 'horizontal' | 'vertical' false Orientacion del stepper, default horizontal name type required description allowNextStepsSelect boolean false Permite seleccionar pasos futuros, default false	Stepper con indicadores de paso, labels y descripciones opcionales	false			frontend/functions/ui/stepper.tsx		false

Ejemplo

import { FnStepper } from '@fn_library'

<FnStepper
  active={1}
  onStepClick={setActive}
  steps={[
    { label: 'Configuracion' },
    { label: 'Datos', description: 'Importar CSV' },
    { label: 'Revision' },
  ]}
/>

Notas

Wrapper sobre Mantine Stepper. Recibe un array declarativo de pasos en vez de children manuales. Soporta iconos custom por paso.