VErsion 1.3.2

docs/30-FRONTEND/COMPONENT-SYSTEM.md

@@ -1,5 +1,8 @@
 # IGNY8 Frontend Component System
 
+**Last Updated:** January 3, 2026  
+**Version:** 1.3.2
+
 > **🔒 ENFORCED BY ESLINT** - Violations will trigger warnings/errors during build.
 > This document is the single source of truth for all UI components.
 
@@ -11,6 +14,7 @@
 |---------|-----------|-------------|
 | Button | `Button` | `components/ui/button/Button` |
 | Icon Button | `IconButton` | `components/ui/button/IconButton` |
+| Button Group | `ButtonGroup` | `components/ui/button-group/ButtonGroup` |
 | Text Input | `InputField` | `components/form/input/InputField` |
 | Checkbox | `Checkbox` | `components/form/input/Checkbox` |
 | Radio | `Radio` | `components/form/input/Radio` |
@@ -27,6 +31,7 @@
 | Spinner | `Spinner` | `components/ui/spinner/Spinner` |
 | Tabs | `Tabs` | `components/ui/tabs/Tabs` |
 | Tooltip | `Tooltip` | `components/ui/tooltip/Tooltip` |
+| Calendar Tooltip | `CalendarItemTooltip` | `components/ui/tooltip/CalendarItemTooltip` |
 | Toast | `useToast` | `components/ui/toast/ToastContainer` |
 | Icons | `*Icon` | `icons` (e.g., `../../icons`) |
 
@@ -595,7 +600,54 @@ import { CloseIcon } from '../../icons';
 
 ---
 
-## 8. LIVE REFERENCE
+## 8. SITE-SPECIFIC COMPONENTS (v1.3.2)
+
+### SiteInfoBar
+
+Reusable site info header component for site-specific pages.
+
+```tsx
+import { SiteInfoBar } from '../../components/common/SiteInfoBar';
+
+<SiteInfoBar
+  site={currentSite}       // Site object with name, domain, etc.
+  onSiteChange={handleSiteChange}  // Optional: Callback when site changes
+  showSelector={true}      // Whether to show site selector dropdown
+/>
+```
+
+### OnboardingWizard Components
+
+Located in `components/onboarding/`:
+
+```tsx
+import { OnboardingWizard } from '../../components/onboarding/OnboardingWizard';
+import {
+  Step1Welcome,
+  Step2AddSite,
+  Step3ConnectIntegration,
+  Step4AddKeywords,
+  Step5Complete,
+} from '../../components/onboarding/steps';
+```
+
+### CalendarItemTooltip
+
+Tooltip specifically designed for calendar items.
+
+```tsx
+import { CalendarItemTooltip } from '../../components/ui/tooltip';
+
+<CalendarItemTooltip
+  item={contentItem}       // Content object
+  onView={handleView}      // Optional: View callback
+  onRemove={handleRemove}  // Optional: Remove callback
+/>
+```
+
+---
+
+## 9. LIVE REFERENCE
 
 View all components with live examples at: `/ui-elements`
 
@@ -603,7 +655,7 @@ This page shows every component with all prop variations.
 
 ---
 
-## 9. AI AGENT INSTRUCTIONS
+## 10. AI AGENT INSTRUCTIONS
 
 When working on this codebase, AI agents MUST:
 
@@ -611,6 +663,20 @@ When working on this codebase, AI agents MUST:
 2. **Import icons only from `src/icons`** - never from external libraries
 3. **Follow the import paths** specified in this document
 4. **Check ESLint** after making changes: `npm run lint`
+5. **Use semantic color tokens** - never hardcoded hex values or Tailwind defaults
+
+### Color Rules
+```tsx
+// ✅ CORRECT - Use semantic tokens
+className="bg-brand-500 text-gray-900 border-success-500"
+
+// ❌ WRONG - Tailwind defaults (DISABLED)
+className="bg-blue-500 text-slate-900 border-green-500"
+
+// ❌ WRONG - Hardcoded hex
+className="bg-[#0077B6]"
+style={{ color: '#DC2626' }}
+```
 5. **Reference this document** for correct component usage
 6. **Use consistent icon sizing**: `className="w-4 h-4"` for small, `w-5 h-5` for medium