fn-design-system/components/segmented_control.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
segmented_control	component	ts	ui	1.0.0	impure	FnSegmentedControl(props: FnSegmentedControlProps): JSX.Element	Control segmentado para seleccion unica entre opciones. Wrapper sobre Mantine SegmentedControl.	mantine segmented toggle tabs selection component ui				false		@mantine/core	react	name type required description data { value: string; label: string }[] true Opciones del control segmentado name type required description value string false Valor seleccionado actualmente name type required description onChange (value: string) => void false Callback cuando cambia la seleccion name type required description fullWidth boolean false Ocupa todo el ancho disponible, default false name type required description size MantineSize false Tamano del control, default sm name type required description color MantineColor false Color del segmento activo	Control segmentado con animacion de slide entre opciones	false			frontend/functions/ui/segmented_control.tsx		false

Ejemplo

import { FnSegmentedControl } from '@fn_library'

<FnSegmentedControl
  value={view}
  onChange={setView}
  data={[
    { value: 'table', label: 'Tabla' },
    { value: 'chart', label: 'Grafico' },
    { value: 'map', label: 'Mapa' },
  ]}
/>

Notas

Wrapper sobre Mantine SegmentedControl. Alternativa a tabs para seleccion compacta entre pocas opciones. La animacion de slide es nativa de Mantine.