Input

1import { type VariantProps, cva } from 'class-variance-authority';
2import type * as React from 'react';
3 
4import { cn } from '@/lib/utils';
5 
6// Edge case when type=search for input, there is a cancel button (X) that is styled to match the design system colors.
7const searchCancelButtonIcon =
8  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgNEw0IDEyTTQgNEwxMiAxMiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=';
9 
10// Search input cancel button (X) styling - Clean icon with design system colors
11const searchCancelButtonStyles = [
12  '[&::-webkit-search-cancel-button]:appearance-none',
13  '[&::-webkit-search-cancel-button]:size-4',
14  '[&::-webkit-search-cancel-button]:cursor-pointer',
15  '[&::-webkit-search-cancel-button]:rounded-full',
16  '[&::-webkit-search-cancel-button]:bg-text-secondary',
17  '[&::-webkit-search-cancel-button]:hover:bg-text-primary',
18  '[&::-webkit-search-cancel-button]:transition-colors',
19  `[&::-webkit-search-cancel-button]:[mask-image:url(${searchCancelButtonIcon})]`,
20  '[&::-webkit-search-cancel-button]:[mask-size:contain]',
21  '[&::-webkit-search-cancel-button]:[mask-repeat:no-repeat]',
22  '[&::-webkit-search-cancel-button]:[mask-position:center]',
23].join(' ');
24 
25// Shared input variant styles - exported for use in InputGroup
26export const inputVariantStyles = {
27  default: {
28    base: 'border border-transparent bg-fill-onsurface-ui-3 shadow-elevation-0',
29    text: 'text-fg-primary placeholder:text-fg-tertiary',
30    hover: 'hover:bg-stateslayer-overlay-hover',
31    focus:
32      'focus-visible:bg-stateslayer-overlay-active-inverse focus-visible:ring-stroke-status-focus',
33    error: 'aria-invalid:border-status-error aria-invalid:ring-0',
34    disabled:
35      'disabled:cursor-not-allowed disabled:bg-stateslayer-overlay-disabled disabled:text-fg-disabled disabled:placeholder:text-fg-disabled',
36  },
37  inline: {
38    base: 'bg-transparent border-0 border-b-[1px] shadow-none',
39    border: 'border-b-stroke-tertiary',
40    text: 'text-fg-primary placeholder:text-fg-tertiary',
41    hover: 'hover:border-b-stroke-tertiary-hover',
42    focus:
43      'focus-visible:border-b-stroke-status-focus focus-visible:ring-0 focus-visible:shadow-elevation-0',
44    error: 'aria-invalid:border-b-status-error aria-invalid:ring-0',
45    disabled:
46// … truncated