Neo-Brutalist
Design System

// Drop-in vanilla JS helper — zero dependencies
import { neoToast } from '@mariojgt/neo-css/toast'

// neoToast(variant, title, message, duration?)
neoToast('success', 'Saved!',   'Changes saved.')       // 4 s auto-dismiss
neoToast('warning', 'Heads Up', 'Expires soon.')       // 4 s auto-dismiss
neoToast('error',   'Error',    'Try again.')           // 4 s auto-dismiss
neoToast('info',    'Tip',      'Pro tip here.')        // 4 s auto-dismiss
neoToast('success', 'Sticky',  'No dismiss.', 0)       // duration 0 = stays

// React — tiny wrapper hook
const { toast } = useNeoToast()
toast.success('Saved!', 'All good.')
toast.error('Oops',   'Try again.')

// Vue — composable
const { toast } = useNeoToast()
toast.warning('Watch out', 'Expires soon.')

<span class="neo-kbd">⌘ K</span>
<span class="neo-kbd">⌃ ⇧ P</span>
<span class="neo-kbd">Esc</span>

// React
import { NeoKbd } from '@mariojgt/neo-react'
<NeoKbd>⌘ K</NeoKbd>

// Vue / Svelte (same API)
import { NeoKbd } from '@mariojgt/neo-vue'
<NeoKbd>⌘ K</NeoKbd>

<!-- Pure CSS — add data-tip to any element -->
<button class="neo-btn neo-btn-primary"
  data-tip="Creates a new project">
  New Project
</button>

// React
import { NeoTooltip, NeoButton } from '@mariojgt/neo-react'
<NeoTooltip tip="Creates a new project">
  <NeoButton>New Project</NeoButton>
</NeoTooltip>

// Vue
<NeoTooltip tip="Creates a new project">
  <NeoButton>New Project</NeoButton>
</NeoTooltip>

// Svelte
import { NeoTooltip } from '@mariojgt/neo-svelte'
<NeoTooltip tip="Creates a new project">
  <NeoButton>New Project</NeoButton>
</NeoTooltip>

<!-- Shimmer skeleton — pure CSS -->
<div class="neo-skeleton neo-skeleton-thumb"></div>
<div class="neo-skeleton neo-skeleton-title"></div>
<div class="neo-skeleton neo-skeleton-text"></div>
<div class="neo-skeleton neo-skeleton-avatar"></div>
<div class="neo-skeleton neo-skeleton-btn"></div>

// React
import { NeoSkeleton } from '@mariojgt/neo-react'
<NeoSkeleton variant="thumb" />
<NeoSkeleton variant="title" />
<NeoSkeleton variant="text"  />
<NeoSkeleton variant="avatar"/>
<NeoSkeleton variant="btn"  />

// Vue / Svelte — same API
<NeoSkeleton variant="thumb" />

<div class="neo-avatar neo-avatar-md neo-avatar-brand neo-avatar-online">MJ</div>

<!-- Group -->
<div class="neo-avatar-group">
  <div class="neo-avatar neo-avatar-md">MJ</div>
  <div class="neo-avatar neo-avatar-md">AB</div>
  <div class="neo-avatar neo-avatar-md">+4</div>
</div>

// React
import { NeoAvatar, NeoAvatarGroup } from '@mariojgt/neo-react'
<NeoAvatar size="md" color="brand" status="online">MJ</NeoAvatar>

<NeoAvatarGroup>
  <NeoAvatar size="md">MJ</NeoAvatar>
  <NeoAvatar size="md">AB</NeoAvatar>
  <NeoAvatar size="md">+4</NeoAvatar>
</NeoAvatarGroup>

// Vue / Svelte — same props
<NeoAvatar size="lg" color="accent">AB</NeoAvatar>

<!-- Trigger -->
<button onclick="neoModalOpen('my-modal')">Open</button>

<!-- Modal HTML -->
<div class="neo-modal-backdrop" id="my-modal">
  <div class="neo-modal">
    <div class="neo-modal-header">
      <h2 class="neo-modal-title">Title</h2>
      <button class="neo-modal-close"
        onclick="neoModalClose('my-modal')">✕</button>
    </div>
    <div class="neo-modal-body">Body text...</div>
    <div class="neo-modal-footer">
      <button class="neo-btn neo-btn-primary">Confirm</button>
    </div>
  </div>
</div>

// JS
neoModalOpen('my-modal')
neoModalClose('my-modal')

// React
import { NeoModal, NeoButton } from '@mariojgt/neo-react'
const [open, setOpen] = React.useState(false)

<NeoModal open={open} title="Confirm Action"
  onClose={() => setOpen(false)}>
  Body text here.
</NeoModal>

// Vue
<NeoModal :open="isOpen" title="Title" @close="isOpen = false">
  Body text here.
  <template #footer>
    <NeoButton variant="primary">OK</NeoButton>
  </template>
</NeoModal>

// Svelte
import { NeoModal } from '@mariojgt/neo-svelte'
<NeoModal open={isOpen} title="Title" on:close={() => isOpen = false}>
  Body text here.
</NeoModal>

// Open with JS or keyboard shortcut
neoCommandOpen()

// Register custom commands
neoCommandRegister([
  { icon: '🏠', label: 'Go Home', action: () => location.href = '/' },
  { icon: '⚡', label: 'New Game', badge: 'hot', action: startGame },
  { icon: '⚙', label: 'Settings', action: openSettings },
])

// Keyboard shortcut built-in: ⌘K or Ctrl+K

// JS — shake the whole page
neoShake('sm')   // subtle
neoShake('md')   // noticeable
neoShake('lg')   // earthquake
neoShake('md', el) // shake a specific element

/* CSS classes */
<div class="neo-shake-md">Shakes on mount</div>

<!-- data-text must match inner text -->
<span class="neo-glitch" data-text="GAME OVER">
  GAME OVER
</span>

// Toggle off
el.classList.toggle('neo-glitch-pause')

<!-- HTML structure -->
<div class="neo-xp-bar">
  <div class="neo-xp-label">
    <span class="neo-xp-label-text">⚡ XP</span>
    <span class="neo-xp-label-val">6,240 / 10,000</span>
  </div>
  <div class="neo-xp-track" data-striped>
    <div class="neo-xp-fill" style="width:62%"></div>
  </div>
</div>

// Variants
"neo-xp-fill"              // green XP
"neo-xp-fill neo-hp-fill"  // red HP
"neo-xp-fill neo-mp-fill"  // blue MP
"neo-xp-track-sm"          // slim variant
"neo-xp-track-lg"          // chunky variant

// React — NeoProgressBar component
import { NeoProgressBar } from '@mariojgt/neo-react'
<NeoProgressBar variant="xp" value={62}
  label="⚡ XP" valueLabel="6,240 / 10,000" striped />
<NeoProgressBar variant="hp" value={68} label="♥ HP" />
<NeoProgressBar variant="mp" value={40} label="✦ MP" />

// Vue
<NeoProgressBar variant="xp" :value="xp" label="⚡ XP" striped />

// Svelte
import { NeoProgressBar } from '@mariojgt/neo-svelte'
<NeoProgressBar variant="hp" value={hp} label="♥ HP" />

// neoAchievement(icon, title, description)
neoAchievement('🏆', 'First Blood', 'You landed your first hit.')
neoAchievement('⚡', 'Speedrunner', 'Under 5 min.')
neoAchievement('💎', 'Legend',      'Rank S on all stages.')

// JS counter helpers
neoComboHit()    // increment + animate
neoComboReset()  // reset to 0

<!-- HTML -->
<div class="neo-combo">
  <span class="neo-combo-count">12</span>
  <span class="neo-combo-label">COMBO</span>
</div>

// Particle burst at cursor position
btn.addEventListener('click', e => neoParticles(e))

// Screen flash (hit feedback)
neoFlash()

// Typewriter
neoTypewriter(element, 'INSERT COIN TO CONTINUE_', 55)

/* CRT scanlines */
<div class="neo-scanlines">...</div>

/* CSS charge bar */
<button class="neo-btn neo-btn-primary neo-btn-charge">
  Hold to Charge
</button>

// JS — fire after 1.4 s hover
startCharge(el)   // bind to mouseenter
cancelCharge(el)  // bind to mouseleave