54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { cn } from '@/lib/cn';
|
||
|
|
|
||
|
|
export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
|
||
|
|
function Input({ className, ...props }, ref) {
|
||
|
|
return (
|
||
|
|
<input
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
'h-8 w-full rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2.5 text-[13px] text-[--color-fg] placeholder:text-[--color-fg-subtle] transition-colors duration-200 ease-out focus:border-[--color-accent] focus:outline-none focus:ring-1 focus:ring-[--color-accent]',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
|
||
|
|
export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
|
||
|
|
function Textarea({ className, ...props }, ref) {
|
||
|
|
return (
|
||
|
|
<textarea
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
'mono w-full rounded-md border border-[--color-border] bg-[--color-bg-subtle] p-3 text-[13px] leading-relaxed text-[--color-fg] placeholder:text-[--color-fg-subtle] transition-colors duration-200 ease-out focus:border-[--color-accent] focus:outline-none focus:ring-1 focus:ring-[--color-accent]',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
|
||
|
|
export function Label({
|
||
|
|
children,
|
||
|
|
hint,
|
||
|
|
className,
|
||
|
|
htmlFor,
|
||
|
|
}: {
|
||
|
|
children: React.ReactNode;
|
||
|
|
hint?: string;
|
||
|
|
className?: string;
|
||
|
|
htmlFor?: string;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className={cn('flex items-baseline justify-between', className)}>
|
||
|
|
<label htmlFor={htmlFor} className="text-[12px] font-medium text-[--color-fg]">
|
||
|
|
{children}
|
||
|
|
</label>
|
||
|
|
{hint && <span className="mono text-[11px] text-[--color-fg-subtle]">{hint}</span>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|