renderButton('Primary',     { variant: 'primary' })
renderButton('Secondary',   { variant: 'secondary' })
renderButton('Destructive', { variant: 'destructive' })
renderButton('Ghost',       { variant: 'ghost' })
renderButton('Disabled',    { variant: 'primary', disabled: true })

const count = signal(0);
effect(() => out.textContent = count());
inc.onclick   = () => count.set(c => c + 1);
dec.onclick   = () => count.set(c => c - 1);
reset.onclick = () => count.set(0);

renderBadge('Active',  { variant: 'success' })
renderBadge('Warning', { variant: 'warning' })

renderAvatar({ name: 'Alice Johnson', size: 'lg' })

renderInput({ name: 'email',    label: 'Email',    type: 'email', helpText: '...' })
renderInput({ name: 'username', label: 'Username', value: 'ab',   error: '...' })

const value = signal('');
const valid = computed(() => value().length >= 3);
effect(() => input.setAttribute('aria-invalid', String(!valid())));

renderTextarea({ name: 'bio',       rows: 3 })
renderSelect({   name: 'role',      items: [...] })
renderCombobox({ name: 'framework', items: [...] })
renderMultiselect({ name: 'tags',   items: [...], selected: [...] })

renderCheckbox({   name: 'terms',         label: '...' })
renderRadioGroup({ name: 'plan',          items: [...], selected: 'Pro' })
renderToggle({     name: 'notifications', checked: true })

renderAlert('Saved.',   { variant: 'success' })
renderAlert('Heads up.',{ variant: 'warning' })
renderAlert('Failed.',  { variant: 'error', dismissible: true })

const v = signal(0);
effect(() => bar.value = v());
setInterval(() => v.set(p => (p + 5) % 105), 200);

renderSpinner({ size: 'lg', label: 'Loading' })

renderSkeleton({ width: '100%', height: '1rem', count: 3 })

renderCard({ header, body, footer })

renderAccordion({ items: [{ title, content }, ...] })

renderBreadcrumb({ items: [{ label, href }, ...] })

renderPagination({ currentPage: 3, totalPages: 10, baseUrl: '/items' })

renderTable({ columns: [...], rows: [...], caption: 'Team members' })

renderDataGrid({ columns, rows, sortBy: 'task', sortDir: 'asc', selectable: true })

renderTree({ items: [...], expanded: new Set(['1', '1-1']), selected: '1-1-1' })

renderVirtualList({ items: [...], itemHeight: 44, containerHeight: 240 })

const d = renderDialog({ title, content, footer, id: 'my-dialog' });
document.getElementById('my-dialog').showModal();

renderDrawer({ title, content, position: 'right' })

renderDropdownMenu({ trigger: 'Actions', items: [{ label, action, icon }, ...] })

renderTooltip({ trigger, content, position: 'top' })

renderCommandPalette({ commands: [{ label, action, group, shortcut }, ...] })

import { showToast } from '@basenative/components';
showToast({ message: 'Saved.', variant: 'success' });

renderLayoutGrid({ columns: 6, cells: [{ id, label, colSpan, rowSpan }, ...] })

renderCalendar({ startDate, events: [...], hours: { start: 8, end: 18 } })

renderPipeline({ columns: [...], cards: [{ id, columnId, title, ... }, ...] })

const time = signal(new Date());
effect(() => el.textContent = time().toLocaleTimeString());
setInterval(() => time.set(new Date()), 1000);

btn.onclick = (e) => {
  document.documentElement.style
    .setProperty('--accent', e.target.dataset.bnAccent);
};

const n       = signal(0);
const doubled = computed(() => n() * 2);
const parity  = computed(() => n() % 2 === 0 ? 'even' : 'odd');
effect(() => { value.textContent = n();
               doubledEl.textContent = doubled();
               parityEl.textContent = parity(); });