)
}
// ── Sample data ───────────────────────────────────────────────────────────────
const SPARKLINE_DATA = [10, 25, 15, 30, 20, 35, 28]
const CODE_JSON = JSON.stringify(
{ status: 'ok', version: '2.4.1', routes: 42 },
null,
2,
)
// ── PrimitivesSection ─────────────────────────────────────────────────────────
export function PrimitivesSection() {
// Alert state
const [alertDismissed, setAlertDismissed] = useState(false)
// ButtonGroup state
const [bgSelection, setBgSelection] = useState>(new Set(['warn']))
// Checkbox state
const [checked1, setChecked1] = useState(false)
const [checked2, setChecked2] = useState(true)
// Toggle state
const [toggleOn, setToggleOn] = useState(true)
const [toggleOff, setToggleOff] = useState(false)
// Radio state
const [radioV, setRadioV] = useState('option-a')
const [radioH, setRadioH] = useState('beta')
// Pagination state
const [page, setPage] = useState(5)
// DateTimePicker state
const [dtValue, setDtValue] = useState(new Date('2026-03-18T09:00'))
// DateRangePicker state
const [dateRange, setDateRange] = useState({
start: new Date('2026-03-11T00:00'),
end: new Date('2026-03-18T23:59'),
})
// InlineEdit state
const [inlineValue, setInlineValue] = useState('Alice Johnson')
return (
Primitives
{/* 1. Alert */}
This is an informational message.Operation completed successfully.This action may have side effects.
{!alertDismissed && (
setAlertDismissed(true)}
>
Something went wrong. Dismiss to clear.
)}
{alertDismissed && (
)}