From 456a8bada316f43183516347694162e28c238770 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Fri, 27 Mar 2026 01:22:10 +0530
Subject: [PATCH 1/2] feat: add new variants and create docs for tokens

---
 .claude/rules/semantic-tokens.md              | 867 ++++++++++++++++++
 apps/sim/app/playground/page.tsx              | 168 +++-
 .../emcn/components/banner/banner.tsx         |  14 +
 .../emcn/components/combobox/combobox.tsx     |   2 +-
 apps/sim/components/emcn/components/index.ts  |   8 +-
 .../emcn/components/input/input.tsx           |  39 +-
 .../emcn/components/label/label.tsx           |  59 +-
 .../emcn/components/skeleton/skeleton.tsx     |  57 +-
 .../emcn/components/slider/slider.tsx         |  72 +-
 .../emcn/components/switch/switch.tsx         |  91 +-
 .../emcn/components/textarea/textarea.tsx     |  28 +-
 11 files changed, 1325 insertions(+), 80 deletions(-)
 create mode 100644 .claude/rules/semantic-tokens.md

diff --git a/.claude/rules/semantic-tokens.md b/.claude/rules/semantic-tokens.md
new file mode 100644
index 00000000000..09163c95345
--- /dev/null
+++ b/.claude/rules/semantic-tokens.md
@@ -0,0 +1,867 @@
+# EMCN Design System Reference
+
+Complete reference for the EMCN component library, semantic design tokens, and Tailwind configuration. Use `@/components/emcn` as the single import path for all components.
+
+---
+
+## Table of Contents
+
+1. [Semantic Tokens](#semantic-tokens)
+2. [Tailwind Configuration](#tailwind-configuration)
+3. [Component Reference](#component-reference)
+4. [Icons](#icons)
+
+---
+
+## Semantic Tokens
+
+All color values are CSS custom properties defined in `app/_styles/globals.css` under `:root` (light) and `.dark` selectors. Reference them with `var(--token-name)` in CSS or `[var(--token-name)]` in Tailwind arbitrary values.
+
+### Surface / Background
+
+| Token | Light | Dark | Usage |
+|---|---|---|---|
+| `--bg` | `#fefefe` | `#1b1b1b` | Main canvas background |
+| `--surface-1` | `#f9f9f9` | `#1e1e1e` | Sidebar, panels |
+| `--surface-2` | `#ffffff` | `#232323` | Blocks, cards, modals |
+| `--surface-3` | `#f7f7f7` | `#242424` | Popovers, headers |
+| `--surface-4` | `#f5f5f5` | `#292929` | Button base, badge backgrounds |
+| `--surface-5` | `#f3f3f3` | `#363636` | Inputs, form elements |
+| `--surface-6` | `#e5e5e5` | `#454545` | Elevated surfaces, hover states |
+| `--surface-7` | `#d9d9d9` | `#505050` | Strong hover states |
+| `--surface-active` | `#ececec` | `#2c2c2c` | Active/pressed state, skeleton bg |
+
+### Text
+
+| Token | Light | Dark | Usage |
+|---|---|---|---|
+| `--text-primary` | `#1a1a1a` | `#e6e6e6` | Headings, primary content |
+| `--text-secondary` | `#525252` | `#cccccc` | Secondary content, descriptions |
+| `--text-tertiary` | `#5c5c5c` | `#b3b3b3` | Tertiary labels, breadcrumbs |
+| `--text-muted` | `#707070` | `#787878` | Muted text, placeholders in components |
+| `--text-subtle` | `#8c8c8c` | `#7d7d7d` | Very low-emphasis text |
+| `--text-body` | `#3b3b3b` | `#cdcdcd` | Body text, popover items |
+| `--text-icon` | `#5e5e5e` | `#939393` | Icon default color |
+| `--text-inverse` | `#ffffff` | `#1b1b1b` | Text on dark/light inverted backgrounds |
+| `--text-muted-inverse` | `#a0a0a0` | `#b3b3b3` | Muted text on inverted backgrounds |
+| `--text-error` | `#ef4444` | `#ef4444` | Error messages, required indicators |
+| `--text-placeholder` | `#8d8d8d` | `#8d8d8d` | Input placeholder text |
+| `--text-success` | `#22c55e` | `#22c55e` | Success text |
+
+### Border / Divider
+
+| Token | Light | Dark | Usage |
+|---|---|---|---|
+| `--border` | `#dedede` | `#333333` | Primary border (default for all `*` elements) |
+| `--border-1` | `#e0e0e0` | `#3d3d3d` | Stronger border, input borders, active states |
+| `--border-muted` | `#e4e4e4` | `#424242` | Subtle borders |
+| `--border-success` | `#e0e0e0` | `#575757` | Success state borders |
+| `--divider` | `#ededed` | `#393939` | Section dividers |
+
+### Brand / State
+
+| Token | Light | Dark | Usage |
+|---|---|---|---|
+| `--brand-secondary` | `#33b4ff` | `#33b4ff` | Selection highlights, secondary brand |
+| `--brand-accent` | `#33c482` | `#33c482` | Tertiary button, accent green |
+| `--selection` | `#1a5cf6` | `#4b83f7` | Text selection |
+| `--warning` | `#ea580c` | `#ff6600` | Warning state |
+
+### Semantic Status
+
+| Token | Light | Dark | Usage |
+|---|---|---|---|
+| `--error` | `#dc2626` | `#f87171` | Error indicators |
+| `--error-muted` | `#fecaca` | `#f6d2d2` | Muted error backgrounds |
+| `--error-emphasis` | `#b91c1c` | `#b91c1c` | Strong error emphasis |
+| `--caution` | `#f59e0b` | `#f59e0b` | Warning/caution indicators |
+| `--success` | `#22c55e` | `#22c55e` | Success indicators |
+
+### Badge Colors
+
+Each badge color has `-bg` and `-text` variants. Used by the Badge component's color variants.
+
+| Base | Light BG | Light Text | Dark BG | Dark Text |
+|---|---|---|---|---|
+| `success` | `#bbf7d0` | `#15803d` | `rgba(34,197,94,0.2)` | `#86efac` |
+| `error` | `#fecaca` | `#dc2626` | `#551a1a` | `#fca5a5` |
+| `gray` | `#e7e5e4` | `#57534e` | `#3a3a3a` | `#a8a8a8` |
+| `blue` | `#bfdbfe` | `#1d4ed8` | `rgba(59,130,246,0.2)` | `#93c5fd` |
+| `blue-secondary` | `#bae6fd` | `#0369a1` | `rgba(51,180,255,0.2)` | `#7dd3fc` |
+| `purple` | `#e9d5ff` | `#7c3aed` | `rgba(168,85,247,0.2)` | `#d8b4fe` |
+| `orange` | `#fed7aa` | `#c2410c` | `rgba(249,115,22,0.2)` | `#fdba74` |
+| `amber` | `#fde68a` | `#a16207` | `rgba(245,158,11,0.2)` | `#fcd34d` |
+| `teal` | `#99f6e4` | `#0f766e` | `rgba(20,184,166,0.2)` | `#5eead4` |
+| `cyan` | `#cffafe` | `#0891b2` | `rgba(14,165,233,0.2)` | `#7dd3fc` |
+| `pink` | `#fbcfe8` | `#be185d` | `rgba(236,72,153,0.2)` | `#f9a8d4` |
+
+### Font Weights
+
+Weights are theme-aware to compensate for light-on-dark rendering differences.
+
+| Token | Light | Dark | Tailwind Class |
+|---|---|---|---|
+| `--font-weight-base` | `420` | `420` | `font-base` |
+| `--font-weight-medium` | `440` | `480` | `font-medium` |
+| `--font-weight-semibold` | `500` | `550` | `font-semibold` |
+
+### Shadows
+
+Defined in `:root` and overridden for `.dark` where applicable.
+
+| Token | Value | Tailwind Class |
+|---|---|---|
+| `--shadow-subtle` | `0 2px 4px 0 rgba(0,0,0,0.08)` | `shadow-subtle` |
+| `--shadow-medium` | `0 4px 12px rgba(0,0,0,0.1)` | `shadow-medium` |
+| `--shadow-overlay` | `0 16px 48px rgba(0,0,0,0.15)` | `shadow-overlay` |
+| `--shadow-kbd` | `0 4px 0 0 rgba(48,48,48,1)` | `shadow-kbd` |
+| `--shadow-kbd-sm` | `0 2px 0 0 rgba(48,48,48,1)` | `shadow-kbd-sm` |
+| `--shadow-brand-inset` | `inset 0 1.25px 2.5px 0 #9b77ff` | `shadow-brand-inset` |
+| `--shadow-card` | `0 1px 3px rgba(0,0,0,0.04)` | `shadow-card` |
+
+### Z-Index Scale
+
+| Token | Value | Usage |
+|---|---|---|
+| `--z-dropdown` | `100` | Dropdown menus |
+| `--z-modal` | `200` | Modal overlays |
+| `--z-popover` | `300` | Popovers (above modals for nested use) |
+| `--z-tooltip` | `400` | Tooltips |
+| `--z-toast` | `500` | Toast notifications |
+
+### Indicators
+
+| Token | Value | Usage |
+|---|---|---|
+| `--indicator-online` | `#33c482` | Online status dot |
+| `--indicator-active` | `#4ade80` | Active state |
+| `--indicator-inactive` | `#b7b7b7` | Inactive/offline |
+| `--indicator-seat-filled` | `#34b5ff` | Occupied seat indicator |
+
+### Code Editor
+
+| Token | Light | Dark |
+|---|---|---|
+| `--code-bg` | `#f5f5f5` | `#1f1f1f` |
+| `--code-foreground` | `#1a1a1a` | `#eeeeee` |
+| `--code-line-number` | `#737373` | `#a8a8a8` |
+
+---
+
+## Tailwind Configuration
+
+Defined in `tailwind.config.ts`. Key extensions to the default theme:
+
+### Dark Mode
+
+```ts
+darkMode: ['class'] // Toggle via .dark class on <html>
+```
+
+### Font Families
+
+| Class | Stack |
+|---|---|
+| `font-season` | Custom variable font (`var(--font-season)`) |
+| `font-body` | System sans-serif stack |
+| `font-mono` | Martian Mono + system monospace fallbacks |
+
+### Font Sizes
+
+| Class | Size | Usage |
+|---|---|---|
+| `text-micro` | `10px` | Micro labels |
+| `text-xs` | `11px` | Small labels, button text `sm` |
+| `text-caption` | `12px` | Captions, button group text, badge `md`/`lg` |
+| `text-small` | `13px` | Labels, tag text |
+| `text-base` | `15px` | Body text, branded buttons |
+| `text-md` | `16px` | Larger body text |
+
+### Border Radius
+
+| Class | Value |
+|---|---|
+| `rounded-xs` | `2px` |
+| `rounded-sm` | `calc(var(--radius) - 4px)` = `4px` |
+| `rounded-md` | `calc(var(--radius) - 2px)` = `6px` |
+| `rounded-lg` | `var(--radius)` = `8px` |
+
+### Custom Variant: `hover-hover`
+
+Applies hover styles only on devices with fine pointers and hover capability. Prevents sticky hover on touch devices.
+
+```tsx
+// Usage
+<div className="hover-hover:bg-[var(--surface-6)]" />
+```
+
+### Animations
+
+| Class | Duration | Usage |
+|---|---|---|
+| `animate-caret-blink` | `1.25s` | OTP input caret |
+| `animate-slide-left` | `80s` | Infinite slide left (landing) |
+| `animate-slide-right` | `80s` | Infinite slide right (landing) |
+| `animate-placeholder-pulse` | `1.5s` | Loading placeholder opacity |
+| `animate-ring-pulse` | `1.5s` | Border success pulse |
+| `animate-stream-fade-in` | `300ms` | Streaming content fade-in |
+| `animate-thinking-block` | `1.6s` | AI thinking indicator |
+| `animate-slide-in-right` | `350ms` | Panel slide-in |
+| `animate-slide-in-bottom` | `400ms` | Content slide-in from bottom |
+| `animate-tour-tooltip-in` | `200ms` | Tour tooltip entrance |
+| `animate-collapsible-down` | `300ms` | Expandable open |
+| `animate-collapsible-up` | `300ms` | Expandable close |
+
+---
+
+## Component Reference
+
+All components are imported from `@/components/emcn`. Never import from subpaths (except CSS files).
+
+```tsx
+import { Button, Input, Badge, Tooltip } from '@/components/emcn'
+```
+
+### Button
+
+Versatile button with 12 visual variants and 3 sizes.
+
+**Variants:** `default` | `active` | `3d` | `outline` | `primary` | `destructive` | `secondary` | `tertiary` | `ghost` | `subtle` | `ghost-secondary` | `branded`
+
+**Sizes:** `sm` (11px) | `md` (12px, default) | `branded` (login form)
+
+```tsx
+<Button variant="primary" size="md">Save</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="ghost">Cancel</Button>
+<Button variant="3d">Elevated</Button>
+<Button variant="branded" size="branded" className="branded-button-gradient">Sign Up</Button>
+```
+
+| Variant | Background | Text | Border | Notes |
+|---|---|---|---|---|
+| `default` | `--surface-4` | `--text-secondary` | `--border` | Neutral, most common |
+| `active` | `--surface-5` | `--text-primary` | `--border-1` | Selected/active state |
+| `3d` | transparent | `--text-tertiary` | `--border-1` | Raised shadow effect |
+| `outline` | transparent | `--text-secondary` | `--text-muted` | Bordered, no fill |
+| `primary` | `--text-primary` | `--text-inverse` | none | High emphasis CTA |
+| `destructive` | `--text-error` | white | none | Danger actions |
+| `secondary` | `--brand-secondary` | `--text-primary` | none | Brand blue |
+| `tertiary` | `--brand-accent` | `--text-inverse` | none | Brand green |
+| `ghost` | transparent | `--text-secondary` | none | Minimal, text only |
+| `subtle` | transparent | `--text-body` | none | Subtle hover background |
+| `ghost-secondary` | transparent | `--text-muted` | none | Extra-low emphasis |
+| `branded` | via CSS class | white | theme | Requires `branded-button-gradient` or `branded-button-custom` class |
+
+**Exports:** `Button`, `ButtonProps`, `buttonVariants`
+
+---
+
+### ButtonGroup
+
+Connected toggle group where one item is selected at a time.
+
+**Gap:** `none` | `sm` (default)
+
+```tsx
+<ButtonGroup value={lang} onValueChange={setLang}>
+  <ButtonGroupItem value="curl">cURL</ButtonGroupItem>
+  <ButtonGroupItem value="python">Python</ButtonGroupItem>
+</ButtonGroup>
+```
+
+**Exports:** `ButtonGroup`, `ButtonGroupItem`, `ButtonGroupProps`, `ButtonGroupItemProps`, `buttonGroupVariants`, `buttonGroupItemVariants`
+
+---
+
+### Input
+
+Text input with variant and size support.
+
+**Variants:** `default` | `error` | `ghost`
+
+**Sizes:** `sm` (12px) | `md` (14px, default)
+
+```tsx
+<Input placeholder="Enter text..." />
+<Input variant="error" placeholder="Invalid value" />
+<Input variant="ghost" placeholder="Inline edit..." />
+<Input size="sm" placeholder="Compact" />
+```
+
+| Variant | Background | Border | Focus |
+|---|---|---|---|
+| `default` | `--surface-5` | `--border-1` | border -> `--text-muted` |
+| `error` | `--surface-5` | `--text-error` | stays `--text-error` |
+| `ghost` | transparent | transparent | border -> `--border-1`, bg -> `--surface-5` |
+
+**Exports:** `Input`, `InputProps`, `inputVariants`
+
+---
+
+### Textarea
+
+Multi-line text input with variant support.
+
+**Variants:** `default` | `error` | `ghost`
+
+```tsx
+<Textarea placeholder="Enter message..." rows={4} />
+<Textarea variant="error" placeholder="Invalid content" />
+<Textarea variant="ghost" placeholder="Inline edit..." />
+```
+
+**Exports:** `Textarea`, `TextareaProps`, `textareaVariants`
+
+---
+
+### Badge
+
+Inline status label with extensive color variants.
+
+**Variants:** `default` | `outline` | `type` | `green` | `red` | `gray` | `blue` | `blue-secondary` | `purple` | `orange` | `amber` | `teal` | `cyan` | `pink` | `gray-secondary`
+
+**Sizes:** `sm` | `md` (default) | `lg`
+
+**Props:** `dot?: boolean` (color variants only), `icon?: ComponentType`
+
+```tsx
+<Badge variant="green" dot>Active</Badge>
+<Badge variant="red" size="sm">Error</Badge>
+<Badge variant="blue" icon={InfoIcon}>Info</Badge>
+```
+
+**Exports:** `Badge`, `BadgeProps`, `badgeVariants`
+
+---
+
+### Checkbox
+
+Radix-based checkbox with size variants.
+
+**Sizes:** `sm` (14px) | `md` (16px, default) | `lg` (20px)
+
+```tsx
+<Checkbox checked={value} onCheckedChange={setValue} />
+<Checkbox size="sm" />
+<Checkbox size="lg" />
+<Checkbox disabled checked />
+```
+
+**Exports:** `Checkbox`, `CheckboxProps`, `checkboxVariants`, `checkboxIconVariants`
+
+---
+
+### Switch
+
+Toggle switch with size variants. Uses `--text-primary` for checked state.
+
+**Sizes:** `sm` (14px height) | `md` (20px, default) | `lg` (24px)
+
+```tsx
+<Switch checked={on} onCheckedChange={setOn} />
+<Switch size="sm" />
+<Switch size="lg" />
+<Switch disabled />
+```
+
+**Exports:** `Switch`, `SwitchProps`, `switchVariants`, `switchThumbVariants`
+
+---
+
+### Label
+
+Form label with size variants and required indicator.
+
+**Sizes:** `sm` (11px) | `md` (13px, default) | `lg` (15px)
+
+**Props:** `required?: boolean` (shows red asterisk)
+
+```tsx
+<Label htmlFor="email">Email</Label>
+<Label required>Name</Label>
+<Label size="sm">Caption</Label>
+```
+
+**Exports:** `Label`, `LabelProps`, `labelVariants`
+
+---
+
+### FormField
+
+Labeled field wrapper with error display.
+
+**Props:** `label`, `htmlFor?`, `optional?`, `error?`, `children`
+
+```tsx
+<FormField label="Email" htmlFor="email" error="Required">
+  <Input id="email" variant="error" />
+</FormField>
+<FormField label="Bio" optional>
+  <Textarea />
+</FormField>
+```
+
+**Exports:** `FormField`, `FormFieldProps`
+
+---
+
+### Slider
+
+Range slider with size variants.
+
+**Sizes:** `sm` | `md` (default) | `lg`
+
+```tsx
+<Slider value={[50]} onValueChange={setValue} min={0} max={100} />
+<Slider size="sm" value={[30]} />
+<Slider size="lg" value={[70]} />
+```
+
+**Exports:** `Slider`, `SliderProps`
+
+---
+
+### Avatar
+
+User avatar with image, fallback, and status indicator.
+
+**Sizes:** `xs` (14px) | `sm` (24px) | `md` (32px, default) | `lg` (40px)
+
+**Status:** `online` | `offline` | `busy` | `away`
+
+```tsx
+<Avatar size="lg" status="online">
+  <AvatarImage src="/photo.jpg" alt="User" />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+```
+
+**Exports:** `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarProps`, `avatarVariants`, `avatarStatusVariants`
+
+---
+
+### Skeleton
+
+Loading placeholder with shape variants.
+
+**Variants:** `line` (default, rounded-md) | `circle` (rounded-full) | `rectangle` (rounded-sm)
+
+```tsx
+<Skeleton className="h-4 w-48" />
+<Skeleton variant="circle" className="h-8 w-8" />
+<Skeleton variant="rectangle" className="h-20 w-full" />
+```
+
+**Exports:** `Skeleton`, `SkeletonProps`, `skeletonVariants`
+
+---
+
+### Banner
+
+Full-width notification banner with semantic variants.
+
+**Variants:** `default` | `destructive` | `warning` | `info` | `success`
+
+**Props:** `text?`, `actionLabel?`, `onAction?`, `actionVariant?`, `children?`
+
+```tsx
+<Banner text="Changes saved" variant="success" />
+<Banner text="Error occurred" variant="destructive" actionLabel="Retry" onAction={retry} />
+```
+
+**Exports:** `Banner`, `BannerProps`
+
+---
+
+### TagInput
+
+Input for managing tag lists with validation.
+
+**Tag Variants:** `default` (blue) | `secondary` (bordered) | `invalid` (red)
+
+**Props:** `items`, `onAdd`, `onRemove`, `tagVariant?`, `fileInputOptions?`, `triggerKeys?`
+
+```tsx
+<TagInput
+  items={tags}
+  onAdd={(v) => { addTag(v); return isValid(v) }}
+  onRemove={(v, i) => removeTag(i)}
+  tagVariant="secondary"
+/>
+```
+
+**Exports:** `Tag`, `TagInput`, `TagItem`, `TagProps`, `TagInputProps`, `tagVariants`, `tagInputVariants`, `FileInputOptions`
+
+---
+
+### Combobox
+
+Dropdown select with search, multi-select, and editable modes.
+
+**Sizes:** `sm` | `md` (default)
+
+**Modes:** Standard, `searchable`, `editable`, `multiSelect`
+
+```tsx
+<Combobox options={opts} value={val} onChange={setVal} placeholder="Select..." />
+<Combobox options={opts} value="" onChange={() => {}} searchable size="sm" />
+<Combobox options={opts} multiSelect multiSelectValues={[]} onMultiSelectChange={setVals} />
+```
+
+**Exports:** `Combobox`, `ComboboxOption`, `ComboboxOptionGroup`
+
+---
+
+### DatePicker
+
+Calendar dropdown for date and date-range selection.
+
+**Sizes:** `default` | `sm`
+
+**Modes:** `single` (default), `range`, `inline`
+
+```tsx
+<DatePicker value={date} onChange={setDate} placeholder="Select date" />
+<DatePicker mode="range" startDate={start} endDate={end} onRangeChange={handleRange} />
+<DatePicker inline value={date} onChange={setDate} />
+```
+
+**Exports:** `DatePicker`, `DatePickerProps`, `datePickerVariants`
+
+---
+
+### TimePicker
+
+Time selection dropdown with 12h display.
+
+**Sizes:** `default` | `sm`
+
+```tsx
+<TimePicker value={time} onChange={setTime} placeholder="Select time" />
+<TimePicker size="sm" value="14:00" />
+```
+
+**Exports:** `TimePicker`, `TimePickerProps`, `timePickerVariants`
+
+---
+
+### Tooltip
+
+Compound tooltip component with shortcut and preview support.
+
+**Sub-components:** `Tooltip.Root`, `Tooltip.Trigger`, `Tooltip.Content`, `Tooltip.Provider`, `Tooltip.Shortcut`, `Tooltip.Preview`
+
+```tsx
+<Tooltip.Provider>
+  <Tooltip.Root>
+    <Tooltip.Trigger asChild>
+      <Button>Hover me</Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      <Tooltip.Shortcut keys="⌘S">Save</Tooltip.Shortcut>
+    </Tooltip.Content>
+  </Tooltip.Root>
+</Tooltip.Provider>
+```
+
+**Exports:** `Tooltip`
+
+---
+
+### Popover
+
+Navigation popover with folder drill-down, search, and scroll area.
+
+**Sizes:** `sm` | `md` (default)
+
+**Color Schemes:** `default` | `inverted`
+
+**Variants:** `default` | `secondary`
+
+**Sub-components:** `Popover`, `PopoverTrigger`, `PopoverAnchor`, `PopoverContent`, `PopoverItem`, `PopoverFolder`, `PopoverBackButton`, `PopoverSearch`, `PopoverSection`, `PopoverDivider`, `PopoverScrollArea`
+
+```tsx
+<Popover>
+  <PopoverTrigger asChild>
+    <Button>Open</Button>
+  </PopoverTrigger>
+  <PopoverContent>
+    <PopoverSearch placeholder="Search..." />
+    <PopoverScrollArea className="max-h-40">
+      <PopoverItem>Item 1</PopoverItem>
+      <PopoverItem active>Selected Item</PopoverItem>
+    </PopoverScrollArea>
+  </PopoverContent>
+</Popover>
+```
+
+---
+
+### DropdownMenu
+
+Full-featured dropdown menu built on Radix UI primitives.
+
+**Sub-components:** `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioItem`, `DropdownMenuRadioGroup`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuGroup`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`, `DropdownMenuPortal`, `DropdownMenuSearchInput`
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button>Options</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Edit</DropdownMenuItem>
+    <DropdownMenuItem>Delete</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+---
+
+### Modal
+
+Dialog component with optional tabs. Uses Radix Dialog primitives.
+
+**Content Sizes:** `sm` | `md` | `lg` | `xl` | `full`
+
+**Sub-components:** `Modal`, `ModalTrigger`, `ModalContent`, `ModalHeader`, `ModalBody`, `ModalFooter`, `ModalClose`, `ModalOverlay`, `ModalPortal`, `ModalTitle`, `ModalDescription`, `ModalTabs`, `ModalTabsList`, `ModalTabsTrigger`, `ModalTabsContent`
+
+```tsx
+<Modal>
+  <ModalTrigger asChild>
+    <Button>Open</Button>
+  </ModalTrigger>
+  <ModalContent size="md">
+    <ModalHeader>Title</ModalHeader>
+    <ModalBody>Content</ModalBody>
+    <ModalFooter>
+      <Button variant="primary">Save</Button>
+    </ModalFooter>
+  </ModalContent>
+</Modal>
+```
+
+---
+
+### SModal (Sidebar Modal)
+
+Dialog with sidebar navigation for settings-style UIs.
+
+**Sub-components:** `SModal`, `SModalTrigger`, `SModalContent`, `SModalSidebar`, `SModalSidebarHeader`, `SModalSidebarSection`, `SModalSidebarSectionTitle`, `SModalSidebarItem`, `SModalMain`, `SModalMainHeader`, `SModalMainBody`, `SModalClose`, `SModalTabs`, `SModalTabsList`, `SModalTabsTrigger`, `SModalTabsContent`, `SModalTabsBody`
+
+```tsx
+<SModal>
+  <SModalTrigger asChild>
+    <Button>Settings</Button>
+  </SModalTrigger>
+  <SModalContent>
+    <SModalSidebar>
+      <SModalSidebarHeader>Settings</SModalSidebarHeader>
+      <SModalSidebarSection>
+        <SModalSidebarSectionTitle>Account</SModalSidebarSectionTitle>
+        <SModalSidebarItem icon={<User />} active>Profile</SModalSidebarItem>
+      </SModalSidebarSection>
+    </SModalSidebar>
+    <SModalMain>
+      <SModalMainHeader>Profile</SModalMainHeader>
+      <SModalMainBody>Content</SModalMainBody>
+    </SModalMain>
+  </SModalContent>
+</SModal>
+```
+
+---
+
+### Code
+
+Syntax-highlighted code viewer with line numbers, search, and JSON folding.
+
+**Compound object:** `Code.Container`, `Code.Content`, `Code.Gutter`, `Code.Placeholder`, `Code.Viewer` (standard + virtualized)
+
+```tsx
+// Simple viewer
+<Code.Viewer code={sourceCode} language="javascript" showGutter />
+
+// With text wrapping
+<Code.Viewer code={longLine} language="json" wrapText />
+```
+
+**Supported languages:** JavaScript, TypeScript, JSON, Python, HTML, CSS, Markdown, Bash, YAML, SQL, and more via PrismJS.
+
+**Exports:** `Code`, `CODE_LINE_HEIGHT_PX`, `calculateGutterWidth`, `getCodeEditorProps`, `highlight`, `languages`
+
+---
+
+### Expandable
+
+Animated collapsible content using Radix Collapsible.
+
+```tsx
+<Expandable expanded={isOpen}>
+  <ExpandableContent>
+    <p>Animated content</p>
+  </ExpandableContent>
+</Expandable>
+```
+
+**Exports:** `Expandable`, `ExpandableContent`
+
+---
+
+### Breadcrumb
+
+Navigation breadcrumb with link and text items.
+
+```tsx
+<Breadcrumb items={[
+  { label: 'Home', href: '/' },
+  { label: 'Settings', href: '/settings' },
+  { label: 'Profile' },
+]} />
+```
+
+**Exports:** `Breadcrumb`, `BreadcrumbItem`, `BreadcrumbProps`
+
+---
+
+### Table
+
+Standard HTML table with consistent styling.
+
+**Sub-components:** `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Alice</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+---
+
+### InputOTP
+
+OTP verification input using `input-otp` library.
+
+```tsx
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+**Exports:** `InputOTP`, `InputOTPGroup`, `InputOTPSeparator`, `InputOTPSlot`
+
+---
+
+### Toast
+
+Imperative toast notification system.
+
+```tsx
+// Wrap app with provider
+<ToastProvider />
+
+// Call from anywhere
+import { toast } from '@/components/emcn'
+
+toast('Changes saved', {
+  type: 'success',
+  duration: 3000,
+})
+```
+
+**Exports:** `ToastProvider`, `toast`, `useToast`, `CountdownRing`
+
+---
+
+### TourTooltip
+
+Positioned tooltip for product tours.
+
+```tsx
+<TourTooltip
+  targetRef={buttonRef}
+  placement="bottom"
+  title="Welcome"
+  description="Click here to get started"
+  onNext={nextStep}
+  onDismiss={endTour}
+/>
+```
+
+**Exports:** `TourTooltip`, `TourTooltipProps`, `TourTooltipPlacement`, `TourCard`, `TourCardProps`
+
+---
+
+## Icons
+
+Custom SVG icons are imported from `@/components/emcn`. They accept standard `SVGProps<SVGSVGElement>`.
+
+### Available Icons
+
+`BubbleChatClose`, `BubbleChatPreview`, `Card`, `ChevronDown`, `Connections`, `Copy`, `Cursor`, `DocumentAttachment`, `Download`, `Duplicate`, `Expand`, `Eye`, `FolderCode`, `FolderPlus`, `Hand`, `HexSimple`, `Key`, `Layout`, `Library`, `Loader`, `MoreHorizontal`, `NoWrap`, `PanelLeft`, `Play`, `PlayOutline`, `Redo`, `Rocket`, `Trash`, `Trash2`, `Undo`, `Wrap`, `ZoomIn`, `ZoomOut`
+
+Some icons have CSS module animations: `Copy`, `Download`, `Layout`, `Loader`.
+
+```tsx
+import { Copy, Loader, Play } from '@/components/emcn'
+
+<Copy className="h-4 w-4 text-[var(--text-icon)]" />
+```
+
+---
+
+## Styling Guidelines
+
+1. **Always use semantic tokens** (`var(--text-primary)`) over raw colors
+2. **Use `hover-hover:`** instead of `hover:` for interactive states (prevents sticky hover on touch)
+3. **Use `cn()`** from `@/lib/core/utils/cn` for conditional classes
+4. **Use `font-medium`** (not `font-normal`) as the base weight - it maps to theme-aware `--font-weight-medium`
+5. **Use `rounded-sm`** (`4px`) for inputs and small elements, `rounded-[5px]` for buttons
+6. **Use `text-caption`** (`12px`) as the default UI text size, `text-small` (`13px`) for labels
+7. **Use `transition-colors`** for interactive hover/active states
+8. **Respect `motion-reduce:animate-none`** on all animations
+9. **Use `data-[disabled]`** for disabled states on Radix components, `disabled:` for native elements
+
+### Token Usage Patterns
+
+```tsx
+// Surface hierarchy: bg < surface-1 < surface-2 < surface-3 < surface-4 < surface-5 < surface-6 < surface-7
+// Text hierarchy: text-primary > text-secondary > text-tertiary > text-muted > text-subtle
+// Border hierarchy: border < border-1 < border-muted
+
+// Interactive element pattern
+className="bg-[var(--surface-4)] text-[var(--text-secondary)] border-[var(--border)]
+  hover-hover:bg-[var(--surface-6)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)]"
+
+// Input pattern
+className="border-[var(--border-1)] bg-[var(--surface-5)] text-[var(--text-primary)]
+  placeholder:text-[var(--text-muted)] focus-visible:border-[var(--text-muted)]"
+
+// Disabled pattern
+className="disabled:cursor-not-allowed disabled:opacity-50"
+// or for Radix
+className="data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+```
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index bd5e6b7b5c2..789ee4ae23a 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -8,6 +8,7 @@ import {
   AvatarFallback,
   AvatarImage,
   Badge,
+  Banner,
   Breadcrumb,
   BubbleChatClose,
   BubbleChatPreview,
@@ -30,6 +31,7 @@ import {
   Eye,
   FolderCode,
   FolderPlus,
+  FormField,
   Hand,
   HexSimple,
   Input,
@@ -64,6 +66,7 @@ import {
   PopoverTrigger,
   Redo,
   Rocket,
+  Skeleton,
   Slider,
   SModal,
   SModalContent,
@@ -228,6 +231,9 @@ export default function PlaygroundPage() {
             <VariantRow label='ghost'>
               <Button variant='ghost'>Ghost</Button>
             </VariantRow>
+            <VariantRow label='subtle'>
+              <Button variant='subtle'>Subtle</Button>
+            </VariantRow>
             <VariantRow label='ghost-secondary'>
               <Button variant='ghost-secondary'>Ghost Secondary</Button>
             </VariantRow>
@@ -337,6 +343,9 @@ export default function PlaygroundPage() {
             <VariantRow label='gray'>
               <Badge variant='gray'>Gray</Badge>
             </VariantRow>
+            <VariantRow label='pink'>
+              <Badge variant='pink'>Pink</Badge>
+            </VariantRow>
             <VariantRow label='gray-secondary'>
               <Badge variant='gray-secondary'>Gray Secondary</Badge>
             </VariantRow>
@@ -352,6 +361,18 @@ export default function PlaygroundPage() {
             <VariantRow label='default'>
               <Input placeholder='Enter text...' className='max-w-xs' />
             </VariantRow>
+            <VariantRow label='error'>
+              <Input variant='error' placeholder='Invalid value' className='max-w-xs' />
+            </VariantRow>
+            <VariantRow label='ghost'>
+              <Input variant='ghost' placeholder='Inline edit...' className='max-w-xs' />
+            </VariantRow>
+            <VariantRow label='size sm'>
+              <Input size='sm' placeholder='Small input' className='max-w-xs' />
+            </VariantRow>
+            <VariantRow label='size md'>
+              <Input size='md' placeholder='Medium input' className='max-w-xs' />
+            </VariantRow>
             <VariantRow label='disabled'>
               <Input placeholder='Disabled' disabled className='max-w-xs' />
             </VariantRow>
@@ -417,15 +438,85 @@ export default function PlaygroundPage() {
 
           {/* Textarea */}
           <Section title='Textarea'>
-            <Textarea placeholder='Enter your message...' className='max-w-md' rows={4} />
+            <VariantRow label='default'>
+              <Textarea placeholder='Enter your message...' className='max-w-md' rows={3} />
+            </VariantRow>
+            <VariantRow label='error'>
+              <Textarea
+                variant='error'
+                placeholder='Invalid content'
+                className='max-w-md'
+                rows={3}
+              />
+            </VariantRow>
+            <VariantRow label='ghost'>
+              <Textarea
+                variant='ghost'
+                placeholder='Inline edit...'
+                className='max-w-md'
+                rows={3}
+              />
+            </VariantRow>
           </Section>
 
           {/* Label */}
           <Section title='Label'>
-            <div className='flex flex-col gap-2'>
-              <Label htmlFor='demo-input'>Label Text</Label>
-              <Input id='demo-input' placeholder='Input with label' className='max-w-xs' />
-            </div>
+            <VariantRow label='default'>
+              <Label>Label Text</Label>
+            </VariantRow>
+            <VariantRow label='required'>
+              <Label required>Required Field</Label>
+            </VariantRow>
+            <VariantRow label='size sm'>
+              <Label size='sm'>Small Label</Label>
+            </VariantRow>
+            <VariantRow label='size md'>
+              <Label size='md'>Medium Label</Label>
+            </VariantRow>
+            <VariantRow label='size lg'>
+              <Label size='lg'>Large Label</Label>
+            </VariantRow>
+            <VariantRow label='with input'>
+              <div className='flex flex-col gap-2'>
+                <Label htmlFor='demo-input' required>
+                  Email Address
+                </Label>
+                <Input id='demo-input' placeholder='Input with label' className='max-w-xs' />
+              </div>
+            </VariantRow>
+          </Section>
+
+          {/* FormField */}
+          <Section title='FormField'>
+            <VariantRow label='default'>
+              <FormField label='Username' htmlFor='ff-user'>
+                <Input id='ff-user' placeholder='Enter username' className='max-w-xs' />
+              </FormField>
+            </VariantRow>
+            <VariantRow label='optional'>
+              <FormField label='Bio' htmlFor='ff-bio' optional>
+                <Textarea
+                  id='ff-bio'
+                  placeholder='Tell us about yourself'
+                  className='max-w-xs'
+                  rows={2}
+                />
+              </FormField>
+            </VariantRow>
+            <VariantRow label='with error'>
+              <FormField
+                label='Email'
+                htmlFor='ff-email'
+                error='Please enter a valid email address'
+              >
+                <Input
+                  id='ff-email'
+                  variant='error'
+                  placeholder='Enter email'
+                  className='max-w-xs'
+                />
+              </FormField>
+            </VariantRow>
           </Section>
 
           {/* Switch */}
@@ -436,6 +527,22 @@ export default function PlaygroundPage() {
                 {switchValue ? 'On' : 'Off'}
               </span>
             </VariantRow>
+            <VariantRow label='size sm'>
+              <Switch size='sm' />
+              <span className='text-[var(--text-secondary)] text-sm'>Small</span>
+            </VariantRow>
+            <VariantRow label='size md'>
+              <Switch size='md' />
+              <span className='text-[var(--text-secondary)] text-sm'>Medium (default)</span>
+            </VariantRow>
+            <VariantRow label='size lg'>
+              <Switch size='lg' />
+              <span className='text-[var(--text-secondary)] text-sm'>Large</span>
+            </VariantRow>
+            <VariantRow label='disabled'>
+              <Switch disabled />
+              <Switch disabled checked />
+            </VariantRow>
           </Section>
 
           {/* Checkbox */}
@@ -472,6 +579,18 @@ export default function PlaygroundPage() {
               </div>
               <span className='text-[var(--text-secondary)] text-sm'>{sliderValue[0]}</span>
             </VariantRow>
+            <VariantRow label='size sm'>
+              <div className='w-48'>
+                <Slider size='sm' value={[50]} max={100} step={1} />
+              </div>
+              <span className='text-[var(--text-secondary)] text-sm'>Small</span>
+            </VariantRow>
+            <VariantRow label='size lg'>
+              <div className='w-48'>
+                <Slider size='lg' value={[70]} max={100} step={1} />
+              </div>
+              <span className='text-[var(--text-secondary)] text-sm'>Large</span>
+            </VariantRow>
             <VariantRow label='disabled'>
               <div className='w-48'>
                 <Slider value={[30]} disabled max={100} step={1} />
@@ -995,6 +1114,45 @@ export default function PlaygroundPage() {
             </VariantRow>
           </Section>
 
+          {/* Banner */}
+          <Section title='Banner'>
+            <Banner text='Default informational banner' variant='default' />
+            <Banner text='Error: Something went wrong' variant='destructive' />
+            <Banner text='Warning: Please review before continuing' variant='warning' />
+            <Banner text='Info: A new version is available' variant='info' />
+            <Banner text='Success: Your changes have been saved' variant='success' />
+            <Banner
+              text='Banner with action'
+              variant='info'
+              actionLabel='Update now'
+              onAction={() => {}}
+            />
+          </Section>
+
+          {/* Skeleton */}
+          <Section title='Skeleton'>
+            <VariantRow label='line (default)'>
+              <Skeleton className='h-4 w-48' />
+              <Skeleton className='h-4 w-32' />
+            </VariantRow>
+            <VariantRow label='circle'>
+              <Skeleton variant='circle' className='h-8 w-8' />
+              <Skeleton variant='circle' className='h-10 w-10' />
+            </VariantRow>
+            <VariantRow label='rectangle'>
+              <Skeleton variant='rectangle' className='h-20 w-32' />
+            </VariantRow>
+            <VariantRow label='composition'>
+              <div className='flex items-center gap-3'>
+                <Skeleton variant='circle' className='h-10 w-10' />
+                <div className='space-y-2'>
+                  <Skeleton className='h-4 w-32' />
+                  <Skeleton className='h-3 w-48' />
+                </div>
+              </div>
+            </VariantRow>
+          </Section>
+
           {/* Icons */}
           <Section title='Icons'>
             <div className='grid grid-cols-6 gap-4 sm:grid-cols-8 md:grid-cols-10'>
diff --git a/apps/sim/components/emcn/components/banner/banner.tsx b/apps/sim/components/emcn/components/banner/banner.tsx
index 452cfb928f5..34a8d876132 100644
--- a/apps/sim/components/emcn/components/banner/banner.tsx
+++ b/apps/sim/components/emcn/components/banner/banner.tsx
@@ -5,11 +5,25 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { Button, type ButtonProps } from '@/components/emcn/components/button/button'
 import { cn } from '@/lib/core/utils/cn'
 
+/**
+ * Variant styles for the Banner component.
+ *
+ * @remarks
+ * Supports semantic variants:
+ * - **default** - Neutral surface background for informational banners
+ * - **destructive** - Red background for error/danger messages
+ * - **warning** - Amber/orange background for caution messages
+ * - **info** - Blue background for informational highlights
+ * - **success** - Green background for positive confirmations
+ */
 const bannerVariants = cva('shrink-0 px-6 py-2.5', {
   variants: {
     variant: {
       default: 'bg-[var(--surface-active)]',
       destructive: 'bg-red-50 dark:bg-red-950/30',
+      warning: 'bg-amber-50 dark:bg-amber-950/30',
+      info: 'bg-blue-50 dark:bg-blue-950/30',
+      success: 'bg-green-50 dark:bg-green-950/30',
     },
   },
   defaultVariants: {
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index 05760852633..2cf3e6422b0 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -97,7 +97,7 @@ export interface ComboboxProps
   /** Additional input props for editable mode */
   inputProps?: Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
-    'value' | 'onChange' | 'disabled' | 'placeholder'
+    'value' | 'onChange' | 'disabled' | 'placeholder' | 'size'
   >
   /** Ref for the input element in editable mode */
   inputRef?: React.RefObject<HTMLInputElement | null>
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index f7a6fe5c82d..f813a40e293 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -60,7 +60,7 @@ export { Expandable, ExpandableContent } from './expandable/expandable'
 export { FormField, type FormFieldProps } from './form-field/form-field'
 export { Input, type InputProps, inputVariants } from './input/input'
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp'
-export { Label } from './label/label'
+export { Label, type LabelProps, labelVariants } from './label/label'
 export {
   MODAL_SIZES,
   Modal,
@@ -122,9 +122,9 @@ export {
   SModalTabsTrigger,
   SModalTrigger,
 } from './s-modal/s-modal'
-export { Skeleton } from './skeleton/skeleton'
+export { Skeleton, type SkeletonProps, skeletonVariants } from './skeleton/skeleton'
 export { Slider, type SliderProps } from './slider/slider'
-export { Switch } from './switch/switch'
+export { Switch, type SwitchProps, switchThumbVariants, switchVariants } from './switch/switch'
 export {
   Table,
   TableBody,
@@ -145,7 +145,7 @@ export {
   tagInputVariants,
   tagVariants,
 } from './tag-input/tag-input'
-export { Textarea } from './textarea/textarea'
+export { Textarea, type TextareaProps, textareaVariants } from './textarea/textarea'
 export { TimePicker, type TimePickerProps, timePickerVariants } from './time-picker/time-picker'
 export { CountdownRing } from './toast/countdown-ring'
 export { ToastProvider, toast, useToast } from './toast/toast'
diff --git a/apps/sim/components/emcn/components/input/input.tsx b/apps/sim/components/emcn/components/input/input.tsx
index b3649a34e86..172981c1dbc 100644
--- a/apps/sim/components/emcn/components/input/input.tsx
+++ b/apps/sim/components/emcn/components/input/input.tsx
@@ -23,18 +23,33 @@ import { cn } from '@/lib/core/utils/cn'
 
 /**
  * Variant styles for the Input component.
- * Currently supports a 'default' variant.
+ *
+ * @remarks
+ * Supports visual variants for different contexts:
+ * - **default** - Standard bordered input with surface background
+ * - **error** - Red-tinted border and focus ring for validation errors
+ * - **ghost** - Transparent background, border only on focus/hover
  */
 const inputVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border font-medium font-sans text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: '',
+        default:
+          'border-[var(--border-1)] bg-[var(--surface-5)] focus-visible:border-[var(--text-muted)]',
+        error:
+          'border-[var(--text-error)] bg-[var(--surface-5)] focus-visible:border-[var(--text-error)]',
+        ghost:
+          'border-transparent bg-transparent hover-hover:bg-[var(--surface-4)] focus-visible:border-[var(--border-1)] focus-visible:bg-[var(--surface-5)]',
+      },
+      size: {
+        sm: 'px-1.5 py-1 text-caption',
+        md: 'px-2 py-1.5 text-sm',
       },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'md',
     },
   }
 )
@@ -44,19 +59,31 @@ const inputVariants = cva(
  * Extends native input attributes with variant support.
  */
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
     VariantProps<typeof inputVariants> {}
 
 /**
  * Minimal input component matching the textarea styling.
  * Uses consistent emcn design patterns.
+ *
+ * @example
+ * ```tsx
+ * // Error state
+ * <Input variant="error" placeholder="Invalid value" />
+ *
+ * // Ghost variant (transparent until focused)
+ * <Input variant="ghost" placeholder="Inline edit..." />
+ *
+ * // Small size
+ * <Input size="sm" placeholder="Compact input" />
+ * ```
  */
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, variant, type = 'text', ...props }, ref) => {
+  ({ className, variant, size, type = 'text', ...props }, ref) => {
     return (
       <input
         type={type}
-        className={cn(inputVariants({ variant }), className)}
+        className={cn(inputVariants({ variant, size }), className)}
         ref={ref}
         {...props}
       />
diff --git a/apps/sim/components/emcn/components/label/label.tsx b/apps/sim/components/emcn/components/label/label.tsx
index aad8b54b381..e210e5db019 100644
--- a/apps/sim/components/emcn/components/label/label.tsx
+++ b/apps/sim/components/emcn/components/label/label.tsx
@@ -1,9 +1,40 @@
 'use client'
 
 import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
-export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {}
+/**
+ * Variant styles for the Label component.
+ *
+ * @remarks
+ * Supports size variants for different contexts:
+ * - **sm** - Compact labels for dense forms (11px)
+ * - **md** - Default label size (13px)
+ * - **lg** - Larger labels for prominent form sections (15px)
+ */
+const labelVariants = cva(
+  'inline-flex items-center font-medium text-[var(--text-primary)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'text-xs',
+        md: 'text-small',
+        lg: 'text-base',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+)
+
+export interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
+    VariantProps<typeof labelVariants> {
+  /** Displays a red asterisk after the label text */
+  required?: boolean
+}
 
 /**
  * EMCN Label component built on Radix UI Label primitive.
@@ -12,27 +43,27 @@ export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelP
  * Provides consistent typography and styling for form labels.
  * Automatically handles disabled states through peer-disabled CSS.
  *
- * @param className - Additional CSS classes to apply
- * @param props - Additional props passed to the Radix Label primitive
- * @returns The styled label element
- *
  * @example
  * ```tsx
+ * // Default label
  * <Label htmlFor="email">Email Address</Label>
+ *
+ * // Required label with asterisk
+ * <Label htmlFor="name" required>Full Name</Label>
+ *
+ * // Small label
+ * <Label size="sm">Caption label</Label>
  * ```
  */
-function Label({ className, ...props }: LabelProps) {
+function Label({ className, size, required, children, ...props }: LabelProps) {
   return (
-    <LabelPrimitive.Root
-      className={cn(
-        'inline-flex items-center font-medium text-[var(--text-primary)] text-small leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className
-      )}
-      {...props}
-    />
+    <LabelPrimitive.Root className={cn(labelVariants({ size }), className)} {...props}>
+      {children}
+      {required ? <span className='ml-0.5 text-[var(--text-error)]'>*</span> : null}
+    </LabelPrimitive.Root>
   )
 }
 
 Label.displayName = LabelPrimitive.Root.displayName
 
-export { Label }
+export { Label, labelVariants }
diff --git a/apps/sim/components/emcn/components/skeleton/skeleton.tsx b/apps/sim/components/emcn/components/skeleton/skeleton.tsx
index 7dbee5edc01..c3c2e25a53d 100644
--- a/apps/sim/components/emcn/components/skeleton/skeleton.tsx
+++ b/apps/sim/components/emcn/components/skeleton/skeleton.tsx
@@ -1,19 +1,52 @@
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
+/**
+ * Variant styles for the Skeleton component.
+ *
+ * @remarks
+ * Supports shape variants for different placeholder types:
+ * - **line** - Rounded rectangle for text lines (default)
+ * - **circle** - Perfect circle for avatars and icons
+ * - **rectangle** - Sharp-cornered rectangle for images and cards
+ */
+const skeletonVariants = cva(
+  'animate-pulse bg-[var(--surface-active)] motion-reduce:animate-none',
+  {
+    variants: {
+      variant: {
+        line: 'rounded-md',
+        circle: 'rounded-full',
+        rectangle: 'rounded-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'line',
+    },
+  }
+)
+
+export interface SkeletonProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof skeletonVariants> {}
+
 /**
  * Placeholder loading skeleton with a subtle pulse animation.
- * @param props - Standard div attributes including className for sizing.
+ *
+ * @example
+ * ```tsx
+ * // Text line skeleton
+ * <Skeleton className="h-4 w-48" />
+ *
+ * // Avatar skeleton
+ * <Skeleton variant="circle" className="h-8 w-8" />
+ *
+ * // Image skeleton
+ * <Skeleton variant="rectangle" className="h-32 w-full" />
+ * ```
  */
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'animate-pulse rounded-md bg-[var(--surface-active)] motion-reduce:animate-none',
-        className
-      )}
-      {...props}
-    />
-  )
+function Skeleton({ className, variant, ...props }: SkeletonProps) {
+  return <div className={cn(skeletonVariants({ variant }), className)} {...props} />
 }
 
-export { Skeleton }
+export { Skeleton, skeletonVariants }
diff --git a/apps/sim/components/emcn/components/slider/slider.tsx b/apps/sim/components/emcn/components/slider/slider.tsx
index 021fe9c056a..713d625f2de 100644
--- a/apps/sim/components/emcn/components/slider/slider.tsx
+++ b/apps/sim/components/emcn/components/slider/slider.tsx
@@ -4,7 +4,21 @@ import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
 import { cn } from '@/lib/core/utils/cn'
 
-export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {}
+/**
+ * Track height and thumb size per slider size variant.
+ */
+const SLIDER_SIZES = {
+  sm: { track: 'h-1', thumb: 'h-2.5 w-2.5', hitArea: 'before:inset-[-12px]' },
+  md: { track: 'h-[6px]', thumb: 'h-[14px] w-[14px]', hitArea: 'before:inset-[-15px]' },
+  lg: { track: 'h-2', thumb: 'h-[18px] w-[18px]', hitArea: 'before:inset-[-15px]' },
+} as const
+
+type SliderSize = keyof typeof SLIDER_SIZES
+
+export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  /** Size variant of the slider */
+  size?: SliderSize
+}
 
 /**
  * EMCN Slider component built on Radix UI Slider primitive.
@@ -12,27 +26,49 @@ export interface SliderProps extends React.ComponentPropsWithoutRef<typeof Slide
  *
  * @example
  * ```tsx
+ * // Default size
  * <Slider value={[50]} onValueChange={setValue} min={0} max={100} step={10} />
+ *
+ * // Small size for compact UIs
+ * <Slider size="sm" value={[50]} onValueChange={setValue} />
+ *
+ * // Large size for prominent controls
+ * <Slider size="lg" value={[50]} onValueChange={setValue} />
  * ```
  */
 const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
-  ({ className, disabled, ...props }, ref) => (
-    <SliderPrimitive.Root
-      ref={ref}
-      disabled={disabled}
-      className={cn(
-        'relative flex w-full touch-none select-none items-center',
-        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors'>
-        <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
-      </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className='relative block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
-    </SliderPrimitive.Root>
-  )
+  ({ className, disabled, size = 'md', ...props }, ref) => {
+    const sizeConfig = SLIDER_SIZES[size]
+
+    return (
+      <SliderPrimitive.Root
+        ref={ref}
+        disabled={disabled}
+        className={cn(
+          'relative flex w-full touch-none select-none items-center',
+          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+          className
+        )}
+        {...props}
+      >
+        <SliderPrimitive.Track
+          className={cn(
+            'relative w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors',
+            sizeConfig.track
+          )}
+        >
+          <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb
+          className={cn(
+            'relative block cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors before:absolute before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
+            sizeConfig.thumb,
+            sizeConfig.hitArea
+          )}
+        />
+      </SliderPrimitive.Root>
+    )
+  }
 )
 
 Slider.displayName = SliderPrimitive.Root.displayName
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
index 0db43d07024..dff47373a58 100644
--- a/apps/sim/components/emcn/components/switch/switch.tsx
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -2,31 +2,88 @@
 
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
+/**
+ * Variant styles for the Switch root element.
+ *
+ * @remarks
+ * Supports multiple sizes:
+ * - **sm** - Compact switch (14px height) for dense UIs like tables
+ * - **md** - Default switch (20px height)
+ * - **lg** - Larger switch (24px height) for prominent toggles
+ */
+const switchVariants = cva(
+  'peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-3.5 w-6',
+        md: 'h-5 w-9',
+        lg: 'h-6 w-11',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+)
+
+/**
+ * Variant styles for the Switch thumb element.
+ */
+const switchThumbVariants = cva(
+  'pointer-events-none block rounded-full bg-[var(--surface-2)] shadow-sm ring-0 transition-transform',
+  {
+    variants: {
+      size: {
+        sm: 'h-2.5 w-2.5 data-[state=checked]:translate-x-[11px] data-[state=unchecked]:translate-x-0.5',
+        md: 'h-4 w-4 data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5',
+        lg: 'h-5 w-5 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+)
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
+    VariantProps<typeof switchVariants> {}
+
 /**
  * Switch component styled to match Sim's design system.
  * Uses brand color for checked state, neutral border for unchecked.
+ *
+ * @example
+ * ```tsx
+ * // Default size
+ * <Switch checked={value} onCheckedChange={setValue} />
+ *
+ * // Small size for tables
+ * <Switch size="sm" checked={value} onCheckedChange={setValue} />
+ *
+ * // Large size
+ * <Switch size="lg" checked={value} onCheckedChange={setValue} />
+ * ```
  */
 const Switch = React.memo(
-  React.forwardRef<
-    React.ElementRef<typeof SwitchPrimitives.Root>,
-    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
-  >(({ className, disabled, ...props }, ref) => (
-    <SwitchPrimitives.Root
-      disabled={disabled}
-      className={cn(
-        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
-        className
-      )}
-      {...props}
-      ref={ref}
-    >
-      <SwitchPrimitives.Thumb className='pointer-events-none block h-4 w-4 rounded-full bg-[var(--surface-2)] shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5' />
-    </SwitchPrimitives.Root>
-  ))
+  React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+    ({ className, size, disabled, ...props }, ref) => (
+      <SwitchPrimitives.Root
+        disabled={disabled}
+        className={cn(switchVariants({ size }), className)}
+        {...props}
+        ref={ref}
+      >
+        <SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))} />
+      </SwitchPrimitives.Root>
+    )
+  )
 )
 
 Switch.displayName = 'Switch'
 
-export { Switch }
+export { Switch, switchVariants, switchThumbVariants }
diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx
index a92cee7edf7..05a696a8468 100644
--- a/apps/sim/components/emcn/components/textarea/textarea.tsx
+++ b/apps/sim/components/emcn/components/textarea/textarea.tsx
@@ -2,12 +2,26 @@ import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
+/**
+ * Variant styles for the Textarea component.
+ *
+ * @remarks
+ * Supports visual variants for different contexts:
+ * - **default** - Standard bordered textarea with surface background
+ * - **error** - Red-tinted border for validation errors
+ * - **ghost** - Transparent background, border only on focus/hover
+ */
 const textareaVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: '',
+        default:
+          'border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 focus-visible:border-[var(--text-muted)]',
+        error:
+          'border-[var(--text-error)] bg-[var(--surface-5)] px-2 py-2 focus-visible:border-[var(--text-error)]',
+        ghost:
+          'border-transparent bg-transparent px-2 py-2 hover-hover:bg-[var(--surface-4)] focus-visible:border-[var(--border-1)] focus-visible:bg-[var(--surface-5)]',
       },
     },
     defaultVariants: {
@@ -22,7 +36,15 @@ export interface TextareaProps
 
 /**
  * Minimal textarea component matching the user-input styling.
- * Features a resize handle in the bottom right corner.
+ *
+ * @example
+ * ```tsx
+ * // Error state
+ * <Textarea variant="error" placeholder="Invalid value" />
+ *
+ * // Ghost variant (transparent until focused)
+ * <Textarea variant="ghost" placeholder="Inline edit..." />
+ * ```
  */
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, variant, ...props }, ref) => {

From 3c28b333c25dcb808fbb03e3bb76c77b0f35c60c Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Fri, 27 Mar 2026 02:58:10 +0530
Subject: [PATCH 2/2] chore: fix review changes

---
 apps/sim/components/emcn/components/banner/banner.tsx     | 2 ++
 apps/sim/components/emcn/components/switch/switch.tsx     | 2 +-
 apps/sim/components/emcn/components/textarea/textarea.tsx | 8 ++++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/sim/components/emcn/components/banner/banner.tsx b/apps/sim/components/emcn/components/banner/banner.tsx
index 34a8d876132..5452f0f7fe7 100644
--- a/apps/sim/components/emcn/components/banner/banner.tsx
+++ b/apps/sim/components/emcn/components/banner/banner.tsx
@@ -16,6 +16,8 @@ import { cn } from '@/lib/core/utils/cn'
  * - **info** - Blue background for informational highlights
  * - **success** - Green background for positive confirmations
  */
+// TODO: Replace raw Tailwind palette colors with semantic tokens once
+// muted banner background tokens (e.g. --banner-destructive-bg) are added to globals.css.
 const bannerVariants = cva('shrink-0 px-6 py-2.5', {
   variants: {
     variant: {
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
index dff47373a58..6fa6994a4f5 100644
--- a/apps/sim/components/emcn/components/switch/switch.tsx
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -38,7 +38,7 @@ const switchThumbVariants = cva(
   {
     variants: {
       size: {
-        sm: 'h-2.5 w-2.5 data-[state=checked]:translate-x-[11px] data-[state=unchecked]:translate-x-0.5',
+        sm: 'h-2.5 w-2.5 data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0.5',
         md: 'h-4 w-4 data-[state=checked]:translate-x-[18px] data-[state=unchecked]:translate-x-0.5',
         lg: 'h-5 w-5 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5',
       },
diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx
index 05a696a8468..b04bca3ec3f 100644
--- a/apps/sim/components/emcn/components/textarea/textarea.tsx
+++ b/apps/sim/components/emcn/components/textarea/textarea.tsx
@@ -12,16 +12,16 @@ import { cn } from '@/lib/core/utils/cn'
  * - **ghost** - Transparent background, border only on focus/hover
  */
 const textareaVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border px-2 py-2 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
         default:
-          'border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 focus-visible:border-[var(--text-muted)]',
+          'border-[var(--border-1)] bg-[var(--surface-5)] focus-visible:border-[var(--text-muted)]',
         error:
-          'border-[var(--text-error)] bg-[var(--surface-5)] px-2 py-2 focus-visible:border-[var(--text-error)]',
+          'border-[var(--text-error)] bg-[var(--surface-5)] focus-visible:border-[var(--text-error)]',
         ghost:
-          'border-transparent bg-transparent px-2 py-2 hover-hover:bg-[var(--surface-4)] focus-visible:border-[var(--border-1)] focus-visible:bg-[var(--surface-5)]',
+          'border-transparent bg-transparent hover-hover:bg-[var(--surface-4)] focus-visible:border-[var(--border-1)] focus-visible:bg-[var(--surface-5)]',
       },
     },
     defaultVariants: {