aiox-core 5.0.2 → 5.0.4

package/pro/squads/design/data/base-component-specs.md

@@ -0,0 +1,972 @@
+# Base Component Specs
+
+> Especificacoes visuais dos componentes base extraidas do Figma Dev Mode + screenshots.
+> Gerado pela task `f2-ingest-base-components`. Usado na Phase 2 para adaptar componentes shadcn.
+
+---
+
+## Design Patterns Globais
+
+### Temas e Contexto
+
+| Propriedade | Valor |
+|---|---|
+| **Tema primario** | Dark-first (componentes desenhados sobre `surface/950` #101010) |
+| **Paleta** | Monocromatica — branco/preto para primary, sem brand colors em estados default |
+| **Feedback colors** | Khewra=destructive, Midori=success, Sahara=warning, Atmos=info |
+
+### Size Scale (consistente em todos os componentes)
+
+| Size | Height | Icon Size | Font Size | Figma Token |
+|---|---|---|---|---|
+| **Tiny** | 24px | 16px | 12px | `spacing/24`, `font/size/4xs` |
+| **Mini** | 32px (btn 24px) | 20px | 12px | `spacing/32`, `font/size/4xs` |
+| **Small** | 32px (btn) / 48px (input) | 24px | 14px | `spacing/32`/`spacing/48`, `font/size/2xs` |
+| **Medium** | 40px (btn) / 64px (input) | 32px | 16px | `spacing/40`/`spacing/64`, `font/size/3xs` |
+| **Large** | 48px (btn) / 80px (input) | 32px | 16px | `spacing/48`/`spacing/80`, `font/size/3xs` |
+
+### State Pattern (consistente em todos os componentes)
+
+| State | Visual Change |
+|---|---|
+| **Default** | Base appearance |
+| **Hover** | Background alpha increases (e.g. 10% → 20%), cursor pointer |
+| **Focus** | White outline ring, `border: 2px solid white`, `inset: -4px`, `border-radius: radius/max` (buttons) or `radius/md` (inputs) |
+| **Pressed** | Background alpha decreases slightly or darkens |
+| **Filled** | (Inputs only) White text, clear icon appears |
+| **Disabled** | `opacity: 0.2` (buttons) or `opacity: 0.5` (inputs), `pointer-events: none` |
+
+### Focus Ring Pattern
+
+```css
+/* Buttons (pill shape) */
+position: absolute;
+border: 2px solid var(--color/surface/white, white);
+inset: -4px;
+border-radius: var(--radius/max, 9999px);
+
+/* Inputs (rounded rect) */
+position: absolute;
+border: 2px solid var(--color/surface/white, white);
+inset: -4px;
+border-radius: var(--radius/md, 16px);
+```
+
+---
+
+## 1. Button
+
+> **Prioridade: 1** — Componente mais usado, define padrao visual.
+> **shadcn mapping:** `Button`
+
+### Variants
+
+| Variant | Figma Name | Background | Text Color | Border | Font |
+|---|---|---|---|---|---|
+| **Primary** | `type=primary` | `rgba(255,255,255,0.9)` | `var(--color/surface/950, #101010)` | none | Outfit Medium, uppercase, tracking 0.5px |
+| **Secondary** | `type=secondary` | transparent | `rgba(255,255,255,0.9)` | `2px solid rgba(255,255,255,0.3)` | Outfit Medium, uppercase, tracking 0.5px |
+| **Tertiary** | `type=tertiary` | `rgba(255,255,255,0.1)` | `rgba(255,255,255,0.8)` | none | Inter Medium, normal case |
+| **Quarter** (Ghost) | `type=quarter` | transparent | `rgba(255,255,255,0.8)` | none | Inter Medium, normal case |
+
+### Sizes
+
+| Size | Height | Padding | Font Size | Icon Size | Line Height |
+|---|---|---|---|---|---|
+| **Mini** | 24px | `px-[12px]` | 12px (`font/size/4xs`) | 20px | 16px |
+| **Small** | 32px | `px-[12px]` | 14px (`font/size/2xs`) | 24px | 16px |
+| **Medium** | 40px | `px-[12px]` | 16px (`font/size/3xs`) | 32px | 16px |
+| **Large** | 48px | `px-[12px]` | 16px (`font/size/3xs`) | 32px | 16px |
+
+### States (Primary variant)
+
+```yaml
+default:
+  background: "rgba(255,255,255,0.9)"
+  color: "var(--color/surface/950, #101010)"
+  border-radius: "100px"  # pill shape (radius/max)
+  padding: "0 12px"
+  font-family: "Outfit"
+  font-weight: 500
+  text-transform: "uppercase"
+  letter-spacing: "0.5px"
+
+hover:
+  background: "var(--color/surface/white, #FFFFFF)"  # full white
+  cursor: "pointer"
+
+focus:
+  background: "rgba(255,255,255,0.9)"
+  ring: "2px solid var(--color/surface/white, white)"
+  ring-offset: "-4px"
+  ring-radius: "var(--radius/max, 9999px)"
+
+pressed:
+  background: "rgba(255,255,255,0.7)"  # slightly dimmer
+
+disabled:
+  background: "rgba(255,255,255,0.9)"
+  opacity: 0.2
+  pointer-events: "none"
+```
+
+### States (Secondary variant)
+
+```yaml
+default:
+  background: "transparent"
+  color: "rgba(255,255,255,0.9)"
+  border: "2px solid rgba(255,255,255,0.3)"
+  border-radius: "100px"
+
+hover:
+  border-color: "rgba(255,255,255,0.5)"
+  cursor: "pointer"
+
+focus:
+  ring: "2px solid var(--color/surface/white, white)"
+  ring-offset: "-4px"
+
+disabled:
+  opacity: 0.2
+  pointer-events: "none"
+```
+
+### States (Tertiary variant)
+
+```yaml
+default:
+  background: "rgba(255,255,255,0.1)"
+  color: "rgba(255,255,255,0.8)"
+  border-radius: "100px"
+  font-family: "Inter"
+  text-transform: "none"
+
+hover:
+  background: "rgba(255,255,255,0.2)"
+  cursor: "pointer"
+
+focus:
+  ring: "2px solid white"
+  ring-offset: "-4px"
+
+disabled:
+  opacity: 0.2
+  pointer-events: "none"
+```
+
+### States (Quarter/Ghost variant)
+
+```yaml
+default:
+  background: "transparent"
+  color: "rgba(255,255,255,0.8)"
+  border-radius: "100px"
+  font-family: "Inter"
+  text-transform: "none"
+
+hover:
+  background: "rgba(255,255,255,0.1)"
+  cursor: "pointer"
+
+focus:
+  ring: "2px solid white"
+  ring-offset: "-4px"
+
+disabled:
+  opacity: 0.2
+  pointer-events: "none"
+```
+
+### Token Mapping
+
+| Figma Value | CSS Variable | Notes |
+|---|---|---|
+| `rgba(255,255,255,0.9)` | `--primary` (dark mode) | Primary button bg |
+| `var(--color/surface/950)` | `--primary-foreground` (dark mode) | Primary button text |
+| `rgba(255,255,255,0.3)` border | `--border` | Secondary button outline |
+| `rgba(255,255,255,0.1)` | `--accent` / `--secondary` | Tertiary button bg |
+| `rgba(255,255,255,0.8)` | `--foreground` at 80% | Tertiary/Quarter text |
+| `100px` radius | `--radius` with `rounded-full` | Pill shape |
+| `opacity: 0.2` | — | Disabled state |
+| Focus ring | `--ring` / white border | 2px white outline, -4px offset |
+
+### Layout
+
+- Icons: left (arrow_back) and/or right (arrow_forward), both optional
+- Text container: `px-[8px]` inner padding
+- Icon + text in flex row, items-center
+
+---
+
+## 2. Text Input
+
+> **Prioridade: 2** — Define padrao de formularios.
+> **shadcn mapping:** `Input`
+
+### Sizes
+
+| Size | Height | Width | Padding | Font Size | Icon Size | Border Radius |
+|---|---|---|---|---|---|---|
+| **Tiny** | 32px | 260px | `pl-[12px] pr-[16px]` | 12px | 16px | `var(--radius/sm, 12px)` |
+| **Mini** | 40px | 260px | `pl-[14px] pr-[18px]` | 14px | 20px | `var(--radius/sm, 12px)` |
+| **Small** | 48px | 320px | `pl-[16px] pr-[20px]` | 16px | 24px | `var(--radius/sm, 12px)` |
+| **Medium** | 64px | 320px | `pl-[20px] pr-[24px]` | 16px | 24px | `var(--radius/sm, 12px)` |
+| **Large** | 80px | 320px | `pl-[24px] pr-[28px]` | 16px | 24px | `var(--radius/sm, 12px)` |
+
+### States
+
+```yaml
+default:
+  background: "rgba(255,255,255,0.1)"
+  color: "rgba(255,255,255,0.5)"  # placeholder
+  border: "none"
+  border-radius: "var(--radius/sm, 12px)"
+  font-family: "Inter"
+  font-weight: 500
+  overflow: "clip"
+
+hover:
+  background: "rgba(255,255,255,0.2)"
+  cursor: "pointer"
+
+focus:
+  background: "rgba(255,255,255,0.1)"
+  ring: "2px solid var(--color/surface/white, white)"
+  ring-offset: "-4px"
+  ring-radius: "var(--radius/md, 16px)"
+
+pressed:
+  background: "rgba(255,255,255,0.1)"
+  color: "rgba(255,255,255,1)"  # text becomes full white
+
+filled:
+  background: "rgba(255,255,255,0.1)"
+  color: "rgba(255,255,255,1)"  # user text full white
+  # clear/X icon may appear on right
+
+disabled:
+  background: "rgba(255,255,255,0.1)"
+  opacity: "var(--opacity/50, 0.5)"
+  pointer-events: "none"
+  color: "rgba(255,255,255,0.6)"
+```
+
+### Token Mapping
+
+| Figma Value | CSS Variable | Notes |
+|---|---|---|
+| `rgba(255,255,255,0.1)` | `--input` (dark) / `--accent` | Input background |
+| `rgba(255,255,255,0.5)` | `--muted-foreground` | Placeholder text |
+| `rgba(255,255,255,1)` | `--foreground` | Filled/active text |
+| `var(--radius/sm, 12px)` | `--radius-lg` | Input border radius |
+| Focus ring 16px radius | `--radius-md` mapped to ring | Slightly larger than input radius |
+| `opacity: 0.5` | — | Disabled state |
+
+### Layout
+
+- Left icon: optional (contextual — profile, search, lock, calendar, etc.)
+- Right icon: optional (info, clear X, eye toggle, etc.)
+- Gap between icon and text: `14px`
+- Placeholder and value text: Inter Medium
+
+### Input Variants (shared pattern)
+
+All input types share the same base structure with different left/right icons:
+
+| Input Type | Left Icon | Right Icon | Special |
+|---|---|---|---|
+| **Text Input** | profile | info | — |
+| **Search Input** | search | kbd badge (CTRL+F) | — |
+| **Password Input** | lock | eye (toggle visibility) | Dots for hidden text |
+| **Date Input** | calendar | — | Placeholder: dd/mm/aaaa |
+| **Time Input** | clock | — | Placeholder: 00:00 |
+| **URL Input** | link | — | — |
+| **Email Input** | mail | clear X (on filled) | — |
+| **Number Input** | — | +/- stepper buttons | Stepper is unique |
+| **Upload Input** | upload | — | File list below, feedback states |
+| **Option Input** | number badge | — | Numbered choices, selected state |
+
+---
+
+## 3. Tag (Badge)
+
+> **Prioridade: 3** — Componente simples, valida tokens.
+> **shadcn mapping:** `Badge`
+
+### Sizes
+
+| Size | Height | Padding | Font Size |
+|---|---|---|---|
+| **Tiny** | 20px | `px-[8px]` | 10px |
+| **Mini** | 24px | `px-[10px]` | 12px |
+
+### States
+
+```yaml
+default:
+  background: "rgba(255,255,255,0.1)"
+  color: "rgba(255,255,255,0.8)"
+  border-radius: "100px"  # pill
+  font-family: "Inter"
+  font-weight: 500
+
+hover:
+  background: "rgba(255,255,255,0.2)"
+
+disabled:
+  opacity: 0.5
+```
+
+### Layout
+
+- Optional close X button on right
+- Text + optional X icon in flex row
+
+### Token Mapping
+
+| Figma Value | CSS Variable |
+|---|---|
+| `rgba(255,255,255,0.1)` bg | `--secondary` |
+| `rgba(255,255,255,0.8)` text | `--secondary-foreground` at 80% |
+| `100px` radius | `rounded-full` |
+
+---
+
+## 4. Checkbox
+
+> **shadcn mapping:** `Checkbox`
+
+### Sizes
+
+| Size | Box Size | Icon Size |
+|---|---|---|
+| **Tiny** | 16px | 12px |
+| **Mini** | 20px | 16px |
+| **Small** | 24px | 20px |
+
+### States
+
+```yaml
+unchecked:
+  background: "transparent"
+  border: "2px solid rgba(255,255,255,0.3)"
+  border-radius: "var(--radius/min, 4px)"
+
+checked:
+  background: "rgba(255,255,255,0.9)"
+  border: "none"
+  icon-color: "var(--color/surface/950, #101010)"  # dark checkmark
+
+indeterminate:
+  background: "rgba(255,255,255,0.9)"
+  border: "none"
+  icon-color: "var(--color/surface/950, #101010)"  # dark dash
+
+hover:
+  border-color: "rgba(255,255,255,0.5)"  # unchecked
+  background: "var(--color/surface/white)"  # checked
+
+focus:
+  ring: "2px solid white"
+  ring-offset: "-4px"
+
+disabled:
+  opacity: 0.2
+```
+
+### Token Mapping
+
+| Figma Value | CSS Variable |
+|---|---|
+| `rgba(255,255,255,0.3)` border | `--border` |
+| `rgba(255,255,255,0.9)` checked bg | `--primary` (dark) |
+| `#101010` checkmark | `--primary-foreground` (dark) |
+| `4px` radius | `--radius-sm` |
+
+---
+
+## 5. Radio Button
+
+> **shadcn mapping:** `RadioGroup` + `RadioGroupItem`
+
+### Sizes
+
+| Size | Outer Size | Inner Dot Size |
+|---|---|---|
+| **Tiny** | 16px | 8px |
+| **Mini** | 20px | 10px |
+| **Small** | 24px | 12px |
+
+### States
+
+```yaml
+unselected:
+  background: "transparent"
+  border: "2px solid rgba(255,255,255,0.3)"
+  border-radius: "50%"
+
+selected:
+  background: "transparent"
+  border: "2px solid rgba(255,255,255,0.9)"
+  inner-dot: "rgba(255,255,255,0.9)"
+
+hover:
+  border-color: "rgba(255,255,255,0.5)"
+
+focus:
+  ring: "2px solid white"
+  ring-offset: "-4px"
+  ring-radius: "50%"
+
+disabled:
+  opacity: 0.2
+```
+
+---
+
+## 6. Toggle (Switch)
+
+> **shadcn mapping:** `Switch`
+
+### Sizes
+
+| Size | Track Width | Track Height | Thumb Size |
+|---|---|---|---|
+| **Tiny** | 28px | 16px | 12px |
+| **Mini** | 36px | 20px | 16px |
+| **Small** | 44px | 24px | 20px |
+
+### States
+
+```yaml
+off:
+  track-background: "rgba(255,255,255,0.1)"
+  thumb-background: "rgba(255,255,255,0.5)"
+  border-radius: "100px"
+
+on:
+  track-background: "rgba(255,255,255,0.9)"
+  thumb-background: "var(--color/surface/950, #101010)"
+  thumb-position: "right"
+
+hover:
+  track-background: "rgba(255,255,255,0.2)"  # off
+  # or full white for on
+
+focus:
+  ring: "2px solid white"
+
+disabled:
+  opacity: 0.2
+```
+
+### Token Mapping
+
+| Figma Value | CSS Variable |
+|---|---|
+| `rgba(255,255,255,0.9)` on track | `--primary` (dark) |
+| `#101010` on thumb | `--primary-foreground` (dark) |
+| `rgba(255,255,255,0.1)` off track | `--input` |
+
+---
+
+## 7. Icon Button
+
+> **shadcn mapping:** `Button` variant=icon
+
+### Sizes
+
+| Size | Dimensions | Icon Size | Border Radius |
+|---|---|---|---|
+| **Tiny** | 24x24 | 16px | `100px` (pill) |
+| **Mini** | 32x32 | 20px | `100px` |
+| **Small** | 40x40 | 24px | `100px` |
+| **Medium** | 48x48 | 32px | `100px` |
+| **Large** | 56x56 | 32px | `100px` |
+
+### Variants (same as Button)
+
+- **Primary**: `bg-[rgba(255,255,255,0.9)]`, dark icon
+- **Secondary**: `border-2 border-[rgba(255,255,255,0.3)]`, white icon
+- **Tertiary**: `bg-[rgba(255,255,255,0.1)]`, white icon at 80%
+- **Quarter** (Ghost): transparent, white icon at 80%
+
+### States
+
+Same pattern as Button: hover brightens, focus adds white ring, disabled opacity 0.2.
+
+---
+
+## 8. Link
+
+> **shadcn mapping:** Custom (no direct shadcn equivalent, use `<a>` with utility classes)
+
+### Sizes
+
+| Size | Font Size | Icon Size |
+|---|---|---|
+| **Mini** | 12px | 16px |
+| **Small** | 14px | 20px |
+
+### States
+
+```yaml
+default:
+  color: "rgba(255,255,255,0.8)"
+  text-decoration: "underline"
+  font-family: "Inter"
+  font-weight: 500
+
+hover:
+  color: "rgba(255,255,255,1)"
+
+focus:
+  ring: "2px solid white"
+  ring-offset: "-2px"
+
+pressed:
+  color: "rgba(255,255,255,0.6)"
+
+disabled:
+  opacity: 0.3
+```
+
+---
+
+## 9. Avatar
+
+> **shadcn mapping:** `Avatar` + `AvatarImage` + `AvatarFallback`
+
+### Features
+
+- Circular image with colored ring (brand colors)
+- Avatar groups with overlapping layout
+- Fallback: initials on colored background
+
+### Sizes (estimated from screenshots)
+
+| Size | Dimensions | Ring Width |
+|---|---|---|
+| **Small** | 32px | 2px |
+| **Medium** | 40px | 2px |
+| **Large** | 48px | 3px |
+
+### Ring Colors (brand palette)
+
+Various brand colors used: Atmos, Midori, Sahara, Khewra, Boreal, etc.
+
+---
+
+## 10. Tooltip
+
+> **shadcn mapping:** `Tooltip` + `TooltipTrigger` + `TooltipContent`
+
+### Spec
+
+```yaml
+background: "var(--color/surface/white, white)"  # light tooltip on dark UI
+color: "var(--color/surface/950, #101010)"
+border-radius: "var(--radius/xs, 8px)"
+padding: "4px 8px"
+font-family: "Inter"
+font-size: "12px"
+font-weight: 500
+# Optional keyboard shortcut badge inside
+```
+
+---
+
+## 11. Popover
+
+> **shadcn mapping:** `Popover` + `PopoverTrigger` + `PopoverContent`
+
+### Spec
+
+```yaml
+background: "var(--color/surface/900, #202020)"
+border: "1px solid rgba(255,255,255,0.1)"
+border-radius: "var(--radius/sm, 12px)"
+padding: "16px"
+box-shadow: "0 4px 24px rgba(0,0,0,0.3)"
+```
+
+### Variants
+
+- **Default**: Simple content
+- **With Form**: Contains inputs and action buttons
+
+---
+
+## 12. Dropdown (Select)
+
+> **shadcn mapping:** `Select` + `SelectTrigger` + `SelectContent` + `SelectItem`
+
+### Trigger
+
+Same structure as Text Input — same sizes, same states, with chevron-down icon on right and optional clear X.
+
+### Content (dropdown menu)
+
+```yaml
+background: "var(--color/surface/900, #202020)"
+border: "1px solid rgba(255,255,255,0.1)"
+border-radius: "var(--radius/sm, 12px)"
+padding: "4px"
+box-shadow: "0 4px 24px rgba(0,0,0,0.3)"
+```
+
+---
+
+## 13. Item Menu
+
+> **shadcn mapping:** `DropdownMenuItem` / `CommandItem`
+
+### Sizes
+
+| Size | Height | Padding | Font Size |
+|---|---|---|---|
+| **Small** | 32px | `px-[12px]` | 14px |
+| **Medium** | 40px | `px-[16px]` | 14px |
+| **Large** | 48px | `px-[16px]` | 16px |
+
+### States
+
+```yaml
+default:
+  background: "transparent"
+  color: "rgba(255,255,255,0.8)"
+  border-radius: "var(--radius/xs, 8px)"
+
+hover:
+  background: "rgba(255,255,255,0.1)"
+
+focus:
+  background: "rgba(255,255,255,0.1)"
+  ring: "2px solid white"
+
+pressed:
+  background: "rgba(255,255,255,0.05)"
+
+disabled:
+  opacity: 0.3
+```
+
+### Layout
+
+- Left: optional icon (24px)
+- Center: label text
+- Right: optional shortcut text or chevron-right icon
+- Gap: 8px between elements
+
+---
+
+## 14. Textarea
+
+> **shadcn mapping:** `Textarea`
+
+### Sizes
+
+| Size | Min Height | Padding | Font Size |
+|---|---|---|---|
+| **Tiny** | 64px | `p-[12px]` | 12px |
+| **Mini** | 80px | `p-[14px]` | 14px |
+| **Default** | 120px | `p-[16px]` | 16px |
+
+### States
+
+Same as Text Input: `rgba(255,255,255,0.1)` bg, focus ring, disabled opacity 0.5.
+
+```yaml
+default:
+  background: "rgba(255,255,255,0.1)"
+  border-radius: "var(--radius/sm, 12px)"
+  font-family: "Inter"
+  font-weight: 500
+  resize: "vertical"
+```
+
+---
+
+## 15. Dropdown Menu
+
+> **shadcn mapping:** `DropdownMenu` + `DropdownMenuContent` + `DropdownMenuItem` + `DropdownMenuSeparator`
+
+### Variants
+
+- **Simple**: Plain text items
+- **With Search**: Search input at top, filtered items below
+- **Complete**: Sections with headers, icons, descriptions, and separators
+
+### Container
+
+```yaml
+background: "var(--color/surface/900, #202020)"
+border: "1px solid rgba(255,255,255,0.1)"
+border-radius: "var(--radius/sm, 12px)"
+padding: "4px"
+min-width: "200px"
+box-shadow: "0 4px 24px rgba(0,0,0,0.3)"
+```
+
+---
+
+## 16. Toasts
+
+> **shadcn mapping:** `Sonner` (toast library)
+> **Nota do usuario:** "Animations sao apenas visualizacao, nao esta funcionando direito, fazer do jeito certo"
+
+### Variants
+
+| Type | Icon Color | Icon | Token |
+|---|---|---|---|
+| **Success** | `--success` (Midori #3A913F) | Checkmark circle | `oklch(0.585 0.145 144.414)` |
+| **Error** | `--destructive` (Khewra #DC625E) | X circle | `oklch(0.646 0.154 24.222)` |
+| **Warning** | `--warning` (Sahara #D6A461) | Warning triangle | `oklch(0.751 0.103 73.232)` |
+| **Info** | `--info` (Atmos #77C5D5) | Info circle | `oklch(0.779 0.08 212.201)` |
+
+### Spec
+
+```yaml
+background: "var(--color/surface/900, #202020)"
+border: "1px solid rgba(255,255,255,0.1)"
+border-radius: "var(--radius/sm, 12px)"
+padding: "16px"
+color: "rgba(255,255,255,0.9)"
+font-family: "Inter"
+font-size: "14px"
+# Action buttons: "Confirmar" / "Desfazer" text links
+```
+
+### Layout
+
+- Left: colored status icon
+- Center: title (bold) + description
+- Right: optional action buttons (text links)
+
+---
+
+## 17. Basic Dialog
+
+> **shadcn mapping:** `Dialog` + `DialogContent` + `DialogHeader` + `DialogFooter`
+
+### Spec
+
+```yaml
+overlay:
+  background: "rgba(0,0,0,0.5)"
+
+content:
+  background: "var(--color/surface/900, #202020)"
+  border: "1px solid rgba(255,255,255,0.1)"
+  border-radius: "var(--radius/sm, 12px)"
+  padding: "24px"
+  max-width: "400px"
+  box-shadow: "0 8px 32px rgba(0,0,0,0.5)"
+
+header:
+  icon: "warning triangle (colored)"
+  title: "Inter Bold, 18px, white"
+  description: "Inter Regular, 14px, rgba(255,255,255,0.6)"
+
+body:
+  # Optional input field
+  margin-top: "16px"
+
+footer:
+  display: "flex"
+  gap: "8px"
+  justify-content: "flex-end"
+  margin-top: "24px"
+  # Primary + Secondary buttons
+```
+
+---
+
+## 18. Input Feedback
+
+> **shadcn mapping:** Custom validation states on Input
+
+### Feedback Types
+
+| Type | Border Color | Icon Color | Token |
+|---|---|---|---|
+| **User Error** | `--destructive` (Khewra) | Khewra | Red border + error icon |
+| **System Error** | `--warning` (Sahara) | Sahara | Orange border + warning icon |
+| **Success** | `--success` (Midori) | Midori | Green border + check icon |
+
+### Spec
+
+```yaml
+error:
+  border: "2px solid var(--destructive)"
+  # Error message below input
+  message-color: "var(--destructive)"
+  message-font-size: "12px"
+
+warning:
+  border: "2px solid var(--warning)"
+  message-color: "var(--warning)"
+
+success:
+  border: "2px solid var(--success)"
+  message-color: "var(--success)"
+
+multiple:
+  # Multiple validation messages stacked below input
+  # Each with its own icon and color
+```
+
+---
+
+## 19. Notification Bar
+
+> **shadcn mapping:** Custom component (Card-based)
+
+### Spec
+
+```yaml
+background: "var(--color/surface/900, #202020)"
+border: "1px solid rgba(255,255,255,0.1)"
+border-radius: "var(--radius/sm, 12px)"
+padding: "16px"
+# Layout: image left, content center, actions right
+# Content: title (bold), time (muted), description
+# Actions: Accept (primary button) / Decline (ghost button)
+```
+
+---
+
+## 20. Chat Notification
+
+> **shadcn mapping:** Custom component
+
+### Spec
+
+```yaml
+background: "var(--color/surface/900, #202020)"
+border-radius: "var(--radius/sm, 12px)"
+padding: "12px 16px"
+# Layout: avatar left, content center, badge right
+# Content: name (bold white), message (muted), time
+# Badge: unread count (white bg, dark text, circular)
+```
+
+---
+
+## 21. Comment Area
+
+> **shadcn mapping:** Custom (Textarea + action buttons)
+
+### Spec
+
+```yaml
+textarea:
+  # Same as Textarea component base
+  background: "rgba(255,255,255,0.1)"
+  border-radius: "var(--radius/sm, 12px)"
+
+actions:
+  # Bottom bar with + (attach), star (favorite), send icons
+  # Icon buttons: ghost variant (quarter)
+  padding: "8px"
+  border-top: "1px solid rgba(255,255,255,0.1)"
+```
+
+---
+
+## 22. Prompt Area
+
+> **shadcn mapping:** Custom (AI prompt input)
+> **Nota do usuario:** "Incompleto, precisa ser planejado"
+
+### Spec (partial)
+
+```yaml
+container:
+  background: "rgba(255,255,255,0.1)"
+  border-radius: "var(--radius/sm, 12px)"
+  padding: "12px 16px"
+
+input:
+  # Textarea-like input area
+  font-family: "Inter"
+  placeholder: "AI prompt text"
+
+actions:
+  # Bottom: + (attach), mic (voice), send icon button
+  # Model selector dropdown
+```
+
+---
+
+## 23. Profile Header
+
+> **shadcn mapping:** Custom component
+
+### Variants
+
+- **Default**: Avatar + name + role
+- **With Badges**: Avatar + name + role + badge tags
+
+---
+
+## Componentes Prontos para Adaptacao
+
+### Prioridade Alta (core — adaptar primeiro)
+
+| # | Component | shadcn Base | Complexity |
+|---|---|---|---|
+| 1 | **Button** | `Button` | Alta — 4 variants, 4 sizes, 5 states |
+| 2 | **Text Input** | `Input` | Media — 5 sizes, 6 states, 10 sub-types |
+| 3 | **Tag** | `Badge` | Baixa — 2 sizes, pill shape |
+| 4 | **Checkbox** | `Checkbox` | Baixa — 3 sizes, 3 check states |
+| 5 | **Radio Button** | `RadioGroup` | Baixa — 3 sizes |
+| 6 | **Toggle** | `Switch` | Baixa — 3 sizes |
+
+### Prioridade Media (compostos)
+
+| # | Component | shadcn Base | Complexity |
+|---|---|---|---|
+| 7 | **Icon Button** | `Button` variant=icon | Media — reusa Button |
+| 8 | **Dropdown** | `Select` | Media — trigger = Input |
+| 9 | **Item Menu** | `DropdownMenuItem` | Baixa |
+| 10 | **Textarea** | `Textarea` | Baixa — segue Input |
+| 11 | **Dropdown Menu** | `DropdownMenu` | Media — 3 variants |
+| 12 | **Tooltip** | `Tooltip` | Baixa |
+| 13 | **Popover** | `Popover` | Baixa |
+
+### Prioridade Baixa (feedback + compostos complexos)
+
+| # | Component | shadcn Base | Complexity |
+|---|---|---|---|
+| 14 | **Toasts** | `Sonner` | Media — 4 types |
+| 15 | **Basic Dialog** | `Dialog` | Media |
+| 16 | **Input Feedback** | Custom on Input | Baixa — adds borders |
+| 17 | **Link** | Custom `<a>` | Baixa |
+| 18 | **Avatar** | `Avatar` | Baixa |
+
+### Fora de Escopo (precisa planejamento)
+
+| # | Component | Motivo |
+|---|---|---|
+| 19 | **Notification Bar** | Componente custom, sem shadcn base |
+| 20 | **Chat Notification** | Componente custom, sem shadcn base |
+| 21 | **Comment Area** | Componente composto (textarea + actions) |
+| 22 | **Prompt Area** | Incompleto no Figma, precisa ser planejado |
+| 23 | **Profile Header** | Componente custom layout |
+
+---
+
+## Validacao
+
+- [x] Button especificado (4 variants, 4 sizes, 5 states)
+- [x] Input especificado (5 sizes, 6 states, 10 sub-types)
+- [x] Todos os estados basicos cobertos (default, hover, focus, pressed, disabled)
+- [x] Valores mapeados para tokens existentes da Phase 1
+- [x] Screenshots confirmam CSS do Figma Dev Mode (validacao cruzada OK)
+
+---
+
+*Gerado por: Foundations Pipeline — Phase 2 (f2-ingest-base-components)*
+*Fonte: Figma Dev Mode + components-ref/ screenshots + Figma MCP design context*
+*Data: 2026-02-21*