| | |
| | | { |
| | | variants: { |
| | | size: { |
| | | small: 'py-1 rounded-md system-xs-regular', |
| | | regular: 'px-3 rounded-md system-sm-regular', |
| | | large: 'px-4 rounded-lg system-md-regular', |
| | | regular: 'px-3 radius-md system-sm-regular', |
| | | large: 'px-4 radius-lg system-md-regular', |
| | | }, |
| | | }, |
| | | defaultVariants: { |
| | |
| | | ref={ref} |
| | | style={styleCss} |
| | | className={cn( |
| | | 'min-h-20 w-full appearance-none border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs', |
| | | 'w-full min-h-20 p-2 bg-components-input-bg-normal border border-transparent text-components-input-text-filled hover:bg-components-input-bg-hover hover:border-components-input-border-hover focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs placeholder:text-components-input-text-placeholder appearance-none outline-none caret-primary-600', |
| | | textareaVariants({ size }), |
| | | disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled', |
| | | destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive', |
| | | disabled && 'bg-components-input-bg-disabled border-transparent text-components-input-text-filled-disabled cursor-not-allowed hover:bg-components-input-bg-disabled hover:border-transparent', |
| | | destructive && 'bg-components-input-bg-destructive border-components-input-border-destructive text-components-input-text-filled hover:bg-components-input-bg-destructive hover:border-components-input-border-destructive focus:bg-components-input-bg-destructive focus:border-components-input-border-destructive', |
| | | className, |
| | | )} |
| | | value={value} |