egutierrez
dc78d8fea3
Componentes React reutilizables: card, dialog, tabs, select, alert, badge, button, input, label, skeleton, tooltip, progress_bar, page_header, form_field, settings_page, crud_page, analytics_page, dashboard_layout. Charts: area, bar, line, sparkline, kpi_card, chart_container. Hooks Wails: use_wails_query, use_wails_mutation, use_wails_stream, use_wails_event, use_animated_canvas. Funciones core: cn, format_compact, chart_colors, get_series_color, wails_cache, theme_config_to_colors. Tipos: chart_series, wails_ipc, theme_config, component_variants. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import * as React from "react"
|
|
import { cn } from "../core/cn"
|
|
|
|
interface FormFieldProps {
|
|
label?: string
|
|
helperText?: string
|
|
error?: string
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
function FormField({ label, helperText, error, children, className }: FormFieldProps) {
|
|
const id = React.useId()
|
|
const inputId = `${id}-input`
|
|
const helperId = `${id}-helper`
|
|
const errorId = `${id}-error`
|
|
|
|
const describedBy = [helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(" ") || undefined
|
|
|
|
const childWithProps = React.Children.map(children, (child) => {
|
|
if (React.isValidElement(child)) {
|
|
return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
|
|
id: inputId,
|
|
"aria-invalid": error ? true : undefined,
|
|
"aria-describedby": describedBy,
|
|
})
|
|
}
|
|
return child
|
|
})
|
|
|
|
return (
|
|
<div className={cn("flex flex-col gap-1.5", className)}>
|
|
{label && <label htmlFor={inputId} className="text-sm font-medium text-foreground">{label}</label>}
|
|
{childWithProps}
|
|
{helperText && !error && <p id={helperId} className="text-sm text-muted-foreground">{helperText}</p>}
|
|
{error && <p id={errorId} className="text-sm text-destructive">{error}</p>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { FormField }
|
|
export type { FormFieldProps }
|