fn-design-system/components/rating.md

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

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
rating	component	ts	ui	1.0.0	impure	Rating(props: RatingProps): JSX.Element	Selector de calificación con estrellas, fracciones y símbolos custom. Wrapper sobre Mantine Rating.	rating stars feedback input component ui mantine				false		@mantine/core	Componente Rating que renderiza un selector de estrellas interactivo con soporte para fracciones, modo solo lectura y símbolos personalizados	false			frontend/functions/ui/rating.tsx	name type required description count number false Número de estrellas/símbolos a mostrar (por defecto 5) name type required description fractions number false Divisiones por estrella — 2 para mitades, 4 para cuartos name type required description value number false Calificación actual (controlled) name type required description onChange (value: number) => void false Callback al cambiar la calificación name type required description readOnly boolean false Modo solo lectura — muestra la calificación sin permitir cambios name type required description highlightSelectedOnly boolean false Solo resalta el símbolo seleccionado, no los anteriores name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño de los símbolos name type required description color string false Color de los símbolos activos (color de Mantine o CSS)	onChange	true	react	default

Ejemplo

import { Rating } from '@fn_library'

// Rating básico de 5 estrellas
<Rating value={rating} onChange={setRating} />

// Con medias estrellas
<Rating
  fractions={2}
  value={3.5}
  onChange={setRating}
/>

// Solo lectura para mostrar calificación
<Rating value={4.2} fractions={10} readOnly />

// Con más estrellas y color custom
<Rating
  count={10}
  value={score}
  onChange={setScore}
  color="yellow"
  size="lg"
/>

Notas

• Wrapper directo sobre Rating de @mantine/core v9. Todas las props de Mantine Rating son válidas.
• fractions permite selección granular: 2 = mitades (0.5, 1, 1.5...), 4 = cuartos (0.25, 0.5...).
• En modo readOnly no dispara onChange y el cursor es el por defecto.
• Accesible via teclado con soporte para lectores de pantalla.