> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brainstormer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Neo Components

> Complete component specifications for buttons, inputs, sliders, toggles, upload cards, usage cards, and data tables in the Neo design system.

## Buttons

Neo defines four distinct button types with strict usage hierarchy. Only one Primary Button is allowed per view.

### Primary Button

The highest-emphasis call to action on any screen.

| Property      | Value                          |
| ------------- | ------------------------------ |
| Background    | `--color-navy` (#0E172A)       |
| Text color    | `--color-white` (#FFFFFF)      |
| Height        | 48px                           |
| Border radius | 5px (`--radius-md`)            |
| Font          | `--type-label-lg` (15px / 600) |
| Padding       | 0 24px                         |

<Tabs>
  <Tab title="Default">
    Navy background, white text, full opacity. Cursor pointer.
  </Tab>

  <Tab title="Focused">
    Navy background with a 3px offset focus ring in `--color-navy`. Triggered by keyboard tab.
  </Tab>

  <Tab title="Disabled">
    Background changes to `--color-disabled` (#C4C4CF). Text remains white. Cursor not-allowed. No click handler fires.
  </Tab>
</Tabs>

<Check>
  Limit to one Primary Button per view. It represents the single most important action the user can take.
</Check>

<Danger>
  Never place two Primary Buttons side by side. Demote the secondary action to a Secondary Button.
</Danger>

***

### Secondary Button

Used for supporting actions alongside a Primary Button or as standalone mid-emphasis CTAs.

| Property      | Value                                |
| ------------- | ------------------------------------ |
| Background    | Transparent or subtle fill (#F4F4F8) |
| Border        | 1px solid `--color-border` (#E2E2EA) |
| Text color    | `--color-navy` (#0E172A)             |
| Height        | 37px                                 |
| Border radius | 5px (`--radius-md`)                  |
| Font          | `--type-label-lg` (15px / 600)       |
| Padding       | 0 16px                               |

<Tabs>
  <Tab title="Default">
    Outlined or subtle fill background. Navy text. Cursor pointer.
  </Tab>

  <Tab title="Focused">
    3px offset focus ring in `--color-navy`.
  </Tab>

  <Tab title="Disabled">
    Border and text fade to `--color-disabled`. Cursor not-allowed.
  </Tab>
</Tabs>

***

### Optimise Prompts Button

A ghost-style button exclusively for prompt editing contexts. Always paired with a sparkle icon.

| Property   | Value                          |
| ---------- | ------------------------------ |
| Background | Transparent                    |
| Text color | `--color-purple` (#6B5EF8)     |
| Icon       | Sparkle (20x20), left-aligned  |
| Height     | 37px                           |
| Font       | `--type-label-sm` (13px / 500) |

<Note>
  This button only appears within prompt configuration views. Do not reuse the sparkle + ghost pattern for other features.
</Note>

***

### Disconnect Button

A destructive ghost button used for disconnecting integrations or removing linked accounts. Requires a confirmation step.

| Property      | Value                                                |
| ------------- | ---------------------------------------------------- |
| Background    | Transparent                                          |
| Border        | 1px solid `--color-destructive` (#E53835)            |
| Text color    | `--color-destructive` (#E53835)                      |
| Height        | 37px                                                 |
| Border radius | 5px                                                  |
| Confirmation  | Required -- modal or inline confirm before executing |

<Warning>
  Always require a confirmation dialog before executing the disconnect action. Never fire destructive operations on a single click.
</Warning>

***

## Temperature Slider

A horizontal slider for controlling AI creativity/precision from 0.0 to 1.0.

| Property     | Value                           |
| ------------ | ------------------------------- |
| Range        | 0.0 (Precise) to 1.0 (Creative) |
| Step         | 0.1                             |
| Track height | 4px                             |
| Thumb        | 16px circle                     |
| Left label   | "Precise"                       |
| Right label  | "Creative"                      |

<Tip>
  Always display the current numeric value alongside the slider. Users need to see the exact setting, not just the position.
</Tip>

***

## Text Inputs

### Standard Text Input

| Property      | Value                                |
| ------------- | ------------------------------------ |
| Width         | 536px (max, fluid)                   |
| Height        | 40px                                 |
| Border radius | 5px (`--radius-md`)                  |
| Border        | 1px solid `--color-border` (#E2E2EA) |
| Background    | `--color-white` (#FFFFFF)            |
| Font          | `--type-body` (15px / 400)           |
| Padding       | 0 12px                               |

<Tabs>
  <Tab title="Default">
    Empty input with placeholder text in `--color-disabled`. Border is `--color-border`.
  </Tab>

  <Tab title="Filled">
    User-entered text in `--color-navy`. Border remains `--color-border`.
  </Tab>

  <Tab title="Focused">
    Border changes to 2px `--color-purple` (#6B5EF8). Subtle box-shadow appears.
  </Tab>

  <Tab title="Error">
    Border changes to 2px `--color-destructive` (#E53835). Error message displayed below in red caption text.
  </Tab>
</Tabs>

### Text Input with Image Upload

Same specs as Standard Text Input, with an image upload icon button (20x20) positioned inside the input on the right edge. Clicking it opens a file picker filtered to image types.

***

## Dropdowns

<AccordionGroup>
  <Accordion title="Standard Dropdown">
    A select menu with a list of text options. Same dimensions as Text Input (536x40, 5px radius). Chevron-down icon on the right. Options panel appears below with 8px gap and `--radius-md` corners.
  </Accordion>

  <Accordion title="Dropdown with Body Copy">
    Each option includes a label (--type-label-lg) and a description line (--type-caption) below it. Option rows are taller to accommodate the two lines. Use when options need explanation.
  </Accordion>

  <Accordion title="Dropdown with Header + Body Copy">
    Options are grouped under section headers (--type-label-sm, uppercase). Each option has label + body copy. Use for categorized option lists like model selection.
  </Accordion>
</AccordionGroup>

<Check>
  Use the simplest dropdown variant that communicates the options clearly. Only add body copy or headers when options genuinely need explanation.
</Check>

<Danger>
  Never render more than 8-10 options in a visible dropdown list. Use search/autocomplete for longer lists (e.g., model selection with 300+ items).
</Danger>

***

## Toggle

A binary on/off switch for settings and feature flags.

| Property              | Value                                              |
| --------------------- | -------------------------------------------------- |
| Track size            | 56 x 27px                                          |
| Knob size             | 21 x 21px circle                                   |
| Border radius (track) | `--radius-full` (9999px)                           |
| Off state             | Track: `--color-border`, Knob: white, left-aligned |
| On state              | Track: `--color-navy`, Knob: white, right-aligned  |
| Transition            | 150ms ease                                         |

<Note>
  Toggles take effect immediately -- no save button required. If the change needs confirmation, use a checkbox + save button pattern instead.
</Note>

***

## Upload Cards

### Document Upload Card

Dimensions: 347 x 86px. Displays file name, size, and a progress/status indicator.

<Tabs>
  <Tab title="Uploaded (Success)">
    File icon + name + size on the left. Green check-circle icon on the right. Background: `--color-white`. Border: `--color-border`.
  </Tab>

  <Tab title="In Progress">
    File icon + name + size on the left. Animated progress bar in `--color-progress-blue` below the file name. Percentage text on the right.
  </Tab>

  <Tab title="Failed">
    File icon + name + size on the left. Red X-circle icon and "Failed" label on the right. Border changes to `--color-destructive`. Retry button appears.
  </Tab>
</Tabs>

### Instagram Upload Card

Same 3 states and dimensions as Document Upload Card, but with an image thumbnail (48x48, `--radius-sm`) on the left instead of a file icon.

<Check>
  Always show a retry action on failed uploads. Never leave the user in a dead-end state.
</Check>

<Danger>
  Do not auto-dismiss failed upload cards. The user must acknowledge the failure or retry.
</Danger>

***

## Usage Credit Card

Displays organization credit consumption. Dimensions: 359 x 199px.

<Tabs>
  <Tab title="0% Used">
    Empty progress bar. Gray fill. Usage text shows "$0 / $X used." Clean starting state.
  </Tab>

  <Tab title="Normal Usage">
    Progress bar fills in `--color-progress-blue` proportional to usage. Percentage and dollar amounts displayed.
  </Tab>

  <Tab title="High Usage (>80%)">
    Progress bar changes to `--color-brand-orange` (#E47037). Warning text appears below.
  </Tab>

  <Tab title="Overage">
    Progress bar fills entirely in `--color-destructive` (#E53835) and exceeds the track boundary. A red **OVERAGE** badge appears. Dollar amount of overage is prominently displayed.
  </Tab>
</Tabs>

<Warning>
  The overage state must be visually unmistakable. Use the red OVERAGE badge, red progress bar, and red text together -- never omit any of the three indicators.
</Warning>

***

## Data Tables

All tables use `--type-body` for cell content, `--type-label-sm` for column headers, and `--color-border` for row dividers.

### Agent Table (4 columns)

| Column        | Content                 |
| ------------- | ----------------------- |
| Agent Name    | Name + avatar thumbnail |
| Status        | Published / Draft badge |
| Last Modified | Relative timestamp      |
| Actions       | Edit, Delete icons      |

### User Table (6 columns)

| Column      | Content                       |
| ----------- | ----------------------------- |
| Name        | Full name + avatar            |
| Email       | Email address                 |
| Role        | Admin / Member / Viewer badge |
| User Group  | Group name                    |
| Last Active | Relative timestamp            |
| Actions     | Edit, Remove icons            |

### Knowledge Base Table (7 columns)

| Column       | Content                           |
| ------------ | --------------------------------- |
| Name         | KB name                           |
| Type         | Documents / Instagram / Mixed     |
| Files        | File count                        |
| Size         | Total size                        |
| Status       | Active / Processing / Error badge |
| Last Updated | Relative timestamp                |
| Actions      | View, Edit, Delete icons          |

<Check>
  Paginate tables beyond 20 rows. Provide search and column sorting on all tables.
</Check>

<Danger>
  Never render an unbounded table. Always set a page size and show a "Load More" or pagination control.
</Danger>