fn-design-system/components/ring_progress.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
ring_progress	component	ts	ui	1.0.0	impure	FnRingProgress(props: FnRingProgressProps): JSX.Element	Anillo de progreso con secciones coloreadas y label central. Wrapper sobre Mantine RingProgress.	mantine progress ring chart metrics component ui				false		@mantine/core	react	name type required description sections RingProgressSection[] true Secciones del anillo con valor porcentual y color name type required description size number false Tamano del anillo en px, default 120 name type required description thickness number false Grosor del trazo en px, default 12 name type required description label ReactNode false Contenido central del anillo (texto, icono, etc) name type required description rootColor string false Color del fondo del anillo (parte sin llenar)	Anillo de progreso SVG con secciones coloreadas y slot central para label	false			frontend/functions/ui/ring_progress.tsx		false

Ejemplo

import { FnRingProgress } from '@fn_library'
import { Text } from '@mantine/core'

<FnRingProgress
  sections={[
    { value: 40, color: 'cyan' },
    { value: 25, color: 'orange' },
    { value: 15, color: 'grape' },
  ]}
  label={<Text ta="center" fw={700}>80%</Text>}
/>

Notas

Wrapper sobre Mantine RingProgress. Las secciones son aditivas -- la suma de value no deberia exceder 100. El label se renderiza centrado dentro del anillo.