81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
||
import { forwardRef, type InputHTMLAttributes, type TextareaHTMLAttributes, type LabelHTMLAttributes } from "react";
|
||
|
||
// -----------------------------------------------------------------
|
||
// Label
|
||
// -----------------------------------------------------------------
|
||
export function Label({
|
||
className,
|
||
...props
|
||
}: LabelHTMLAttributes<HTMLLabelElement>) {
|
||
return (
|
||
<label
|
||
className={cn(
|
||
"text-xs uppercase tracking-[0.18em] text-ink/70 font-medium",
|
||
className
|
||
)}
|
||
{...props}
|
||
/>
|
||
);
|
||
}
|
||
|
||
// -----------------------------------------------------------------
|
||
// Input
|
||
// -----------------------------------------------------------------
|
||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||
error?: string;
|
||
}
|
||
|
||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||
({ className, error, ...props }, ref) => (
|
||
<input
|
||
ref={ref}
|
||
className={cn(
|
||
"w-full bg-transparent border-b py-2.5 text-base",
|
||
"placeholder:text-ink/40 focus:outline-none",
|
||
error
|
||
? "border-red-600 focus:border-red-700"
|
||
: "border-ink/25 focus:border-ink",
|
||
"transition-colors",
|
||
className
|
||
)}
|
||
{...props}
|
||
/>
|
||
)
|
||
);
|
||
Input.displayName = "Input";
|
||
|
||
// -----------------------------------------------------------------
|
||
// Textarea
|
||
// -----------------------------------------------------------------
|
||
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
||
error?: string;
|
||
}
|
||
|
||
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||
({ className, error, ...props }, ref) => (
|
||
<textarea
|
||
ref={ref}
|
||
className={cn(
|
||
"w-full bg-transparent border py-3 px-3 text-base rounded-md",
|
||
"placeholder:text-ink/40 focus:outline-none resize-y min-h-[120px]",
|
||
error
|
||
? "border-red-600 focus:border-red-700"
|
||
: "border-ink/25 focus:border-ink",
|
||
"transition-colors",
|
||
className
|
||
)}
|
||
{...props}
|
||
/>
|
||
)
|
||
);
|
||
Textarea.displayName = "Textarea";
|
||
|
||
// -----------------------------------------------------------------
|
||
// FieldError – ein einheitlicher Fehler-Text
|
||
// -----------------------------------------------------------------
|
||
export function FieldError({ message }: { message?: string }) {
|
||
if (!message) return null;
|
||
return <p className="mt-1.5 text-xs text-red-700">{message}</p>;
|
||
}
|