Basecoat UI MCP

<!-- Basecoat Input Group Patterns --> <!-- Note: There is no dedicated Input Group component - these are pure HTML/Tailwind patterns --> <div class="space-y-6"> <!-- Input with Icon Prefix --> <div class="relative"> <input type="text" class="input pl-9" placeholder="Search..."> <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle> <path d="m21 21-4.3-4.3"></path> </svg> </div> </div> <!-- Input with Icon Suffix --> <div class="relative"> <input type="email" class="input pr-9" placeholder="Enter your email"> <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect width="20" height="16" x="2" y="4" rx="2"></rect> <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path> </svg> </div> </div> <!-- Input with Both Icons --> <div class="relative"> <input type="text" class="input px-9" placeholder="Card number"> <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect width="20" height="14" x="2" y="5" rx="2"></rect> <path d="M2 10h20"></path> </svg> </div> <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> </div> </div> <!-- Text Prefix/Suffix --> <div class="space-y-6 mt-8"> <!-- Currency Input --> <div class="relative"> <input type="text" class="input pl-7 pr-12" placeholder="0.00"> <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">$</div> <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">USD</div> </div> <!-- URL Input --> <div class="relative"> <input type="text" class="input pl-15 pr-12" placeholder="example.com"> <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">https://</div> <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">.com</div> </div> <!-- Email Domain Input --> <div class="relative"> <input type="text" class="input pr-30" placeholder="Enter your username"> <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground text-sm">@company.com</div> </div> </div> <!-- Button Suffix --> <div class="space-y-6 mt-8"> <!-- Copy Button --> <div class="relative"> <input type="text" readonly class="input pr-9" value="https://example.com/share/abc123"> <button class="absolute right-1.5 top-1/2 -translate-y-1/2 btn-icon-ghost text-muted-foreground hover:text-accent-foreground size-6" > <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"> <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect> <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path> </svg> </button> </div> <!-- Search Button --> <div class="relative"> <input type="text" class="input pr-20" placeholder="Type to search..."> <button type="button" class="absolute right-1.5 top-1/2 -translate-y-1/2 btn-secondary h-6 px-2 rounded">Search</button> </div> </div> <!-- Loading State --> <div class="space-y-6 mt-8"> <div class="relative"> <input type="text" class="input pr-9" placeholder="Searching..." disabled> <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground opacity-50"> <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> </div> </div> <div class="relative"> <input type="text" class="input pr-24" placeholder="Saving changes..." disabled> <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 text-sm text-muted-foreground opacity-50"> <span>Saving...</span> <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle> <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="1"></path> </svg> </div> </div> </div> <!-- Tooltip on Icon --> <div class="space-y-6 mt-8"> <div class="relative"> <input type="password" class="input pr-9" placeholder="Enter password"> <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4" data-tooltip="Password must be at least 8 characters long."> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> </div> </div> </div> <!-- Textarea with Footer --> <div class="relative mt-8"> <textarea class="textarea pr-10 min-h-27 pb-12" placeholder="Ask, Search or Chat..."></textarea> <footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2"> <button type="button" class="btn-icon-outline rounded-full size-6 text-muted-foreground hover:text-accent-foreground"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"> <path d="M5 12h14"></path> <path d="M12 5v14"></path> </svg> </button> <div class="text-muted-foreground text-sm ml-auto">52% used</div> <hr class="w-0 h-4 border-r border-border shrink-0 m-0"> <button type="button" class="btn-icon rounded-full size-6 bg-muted-foreground hover:bg-foreground" disabled> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"> <path d="m5 12 7-7 7 7"></path> <path d="M12 19V5"></path> </svg> </button> </footer> </div> <!-- Group with External Labels --> <div class="flex w-fit items-stretch mt-8"> <label class="text-sm flex items-center bg-muted border border-r-0 px-4 rounded-l-md shadow-xs">https://</label> <div class="relative"> <input type="text" class="input pr-9 rounded-none" placeholder="yoursite"> <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </div> </div> <div class="text-sm flex items-center bg-muted border border-l-0 px-4 rounded-r-md shadow-xs">.com</div> </div>