-
Notifications
You must be signed in to change notification settings - Fork 45
/
Input.tsx
83 lines (75 loc) · 2.63 KB
/
Input.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import * as React from "react";
import { cn } from "../../helpers/utils";
import { Label, type LabelProps } from "../Label";
import { type LabelHelperProps } from "../types";
/* ---------------------------------- Types --------------------------------- */
export type InputElement = HTMLInputElement;
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
LabelProps &
LabelHelperProps & {
destructive?: boolean;
};
/* -------------------------------- Component ------------------------------- */
const Input = React.forwardRef<InputElement, InputProps>(
(
{
className,
description,
destructive,
disabled,
helperText,
id,
label,
required,
tooltip,
...otherProps
},
ref
) => {
const generatedId = React.useId();
const elId = id ?? generatedId;
const ariaInvalid = otherProps["aria-invalid"] ?? destructive;
return (
<div className="flex flex-col gap-2 wg-antialiased">
<Label
description={description}
disabled={disabled}
htmlFor={elId}
id={`${elId}__label`}
required={required}
tooltip={tooltip}
>
{label}
</Label>
<div className="relative flex items-center">
<input
ref={ref}
aria-describedby={helperText ? `${elId}__describer` : undefined}
aria-invalid={ariaInvalid}
aria-labelledby={label ? `${elId}__label` : undefined}
className={cn(
"flex grow rounded-lg border bg-background px-4 py-2 text-sm leading-6 shadow-wg-xs transition-colors duration-100 placeholder:text-surface-500",
"outline-primary focus:outline focus:outline-2 focus:-outline-offset-1",
!disabled &&
"text-surface-900 hover:border-surface-300 dark:hover:border-surface-200",
disabled &&
"cursor-not-allowed bg-surface-50 text-surface-300 placeholder:text-surface-300 dark:bg-white/5 dark:text-surface-200 dark:placeholder:text-surface-200",
ariaInvalid &&
"border-destructive outline-destructive hover:border-destructive dark:hover:border-destructive",
!ariaInvalid && "border-surface-200 dark:border-surface-100",
className
)}
disabled={disabled}
id={elId}
{...otherProps}
/>
</div>
<Label.Helper aria-invalid={ariaInvalid} disabled={disabled} id={`${elId}__describer`}>
{helperText}
</Label.Helper>
</div>
);
}
);
Input.displayName = "Input";
export default Input;