npm - aiox-core - Versions diffs - 5.0.3 → 5.0.4 - Mend

aiox-core 5.0.3 → 5.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (468) hide show

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

@@ -1,972 +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*
+# 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*