slack-q-1770281563/packages/ui/src/components/Input.tsx
jordan 39ad9a5b04
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
Initialize project from skeleton template
2026-02-05 08:52:44 +00:00

29 lines
995 B
TypeScript

import * as React from 'react';
import { cn } from '../utils/cn';
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
error?: boolean;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, error, ...props }, ref) => {
return (
<input
type={type}
className={cn(
'flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] disabled:cursor-not-allowed disabled:opacity-50',
error
? 'border-[var(--error)] focus-visible:ring-[var(--error)]'
: 'border-[var(--border)] hover:border-[var(--border-hover)]',
className
)}
ref={ref}
{...props}
/>
);
}
);
Input.displayName = 'Input';
export { Input };