mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-02-24 02:46:11 -05:00
30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
import clsx from 'clsx'
|
|
import {forwardRef, Ref} from 'react'
|
|
|
|
/** Text input. Wraps html `<input>` */
|
|
export const Input = forwardRef(
|
|
(
|
|
props: {
|
|
error?: boolean
|
|
} & JSX.IntrinsicElements['input'],
|
|
ref: Ref<HTMLInputElement>
|
|
) => {
|
|
const { error, className, ...rest } = props
|
|
|
|
return (
|
|
<input
|
|
ref={ref}
|
|
className={clsx(
|
|
'invalid:border-error invalid:text-error disabled:bg-canvas-50 disabled:border-ink-200 disabled:text-ink-500 bg-canvas-0 h-12 rounded-md border px-4 shadow-sm transition-colors invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
|
|
error
|
|
? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
|
|
: 'border-ink-300 placeholder-ink-400 focus:ring-primary-500 focus:border-primary-500',
|
|
className
|
|
)}
|
|
step={0.001} // default to 3 decimal places
|
|
{...rest}
|
|
/>
|
|
)
|
|
}
|
|
)
|