Updated several input components

lib/component/input/SelectInput.tsx

@@ -18,24 +18,22 @@ export default function SelectInput(props: SelectInputProps){
 			value={value}
 			onChange={onChange}
 		>
-			<div
-				className="relative w-full"
+			<ListboxButton
+				className={clsx(
+					"group relative flex flex-row items-center justify-between w-full",
+					"border-2 px-2 py-1 rounded-lg"
+					//"not-data-open:rounded-lg data-open:rounded-t-lg"
+				)}
 			>
-				<ListboxButton
-					className={clsx(
-						"flex flex-row items-center justify-between w-full",
-						"outline rounded px-2 py-1"
-					)}
-				>
-					<span>{label}</span>
-					<span><BsChevronDown size={22}/></span>
-				</ListboxButton>
-				<ListboxOptions
-					className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
-				>
-					{children}
-				</ListboxOptions>
-			</div>
+				<span>{label}</span>
+				<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
+			</ListboxButton>
+			<ListboxOptions
+				className="w-(--button-width) max-h-60! overflow-hidden z-10 outline-none rounded-lg"
+				anchor="bottom"
+			>
+				{children}
+			</ListboxOptions>
 		</Listbox>
 	);
 }

lib/component/input/TextArea.tsx

@@ -0,0 +1,61 @@
+import type { TextAreaProps } from "$/types/Input";
+import clsx from "clsx";
+
+
+export default function TextArea({
+	id = crypto.randomUUID().replaceAll("-", ""),
+	className,
+	inputClassName,
+	labelClassName,
+	maxLength,
+	rows,
+	cols,
+	spellCheck,
+	placeholder,
+	defaultValue,
+	value,
+	onChange,
+	disabled
+}: TextAreaProps){
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center rounded-lg border-2",
+				className
+			)}
+		>
+			<div
+				className="relative flex flex-row items-center justify-center px-2 py-1"
+			>
+				<textarea
+					id={id}
+					className={clsx(
+						"peer bg-transparent outline-none placeholder-transparent resize",
+						inputClassName
+					)}
+					placeholder={placeholder}
+					maxLength={maxLength}
+					rows={rows}
+					cols={cols}
+					defaultValue={defaultValue}
+					value={value}
+					onChange={onChange}
+					disabled={disabled}
+					spellCheck={spellCheck}
+				/>
+				<label
+					className={clsx(
+						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
+						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text",
+						"flex items-center",
+						labelClassName
+					)}
+					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					htmlFor={id}
+				>
+					{placeholder}
+				</label>
+			</div>
+		</div>
+	);
+}

lib/component/input/TextInput.tsx

@@ -2,20 +2,19 @@ import type { TextInputProps } from "$/types/Input";
 import clsx from "clsx";
 
 
-export default function TextInput(props: TextInputProps){
-	const {
-		id,
-		className,
-		inputClassName,
-		labelClassName,
-		placeholder,
-		defaultValue,
-		value,
-		onChange,
-		disabled
-	} = props;
-
-
+export default function TextInput({
+	id = crypto.randomUUID().replaceAll("-", ""),
+	className,
+	inputClassName,
+	labelClassName,
+	maxLength,
+	spellCheck,
+	placeholder,
+	defaultValue,
+	value,
+	onChange,
+	disabled
+}: TextInputProps){
 	return (
 		<div
 			className={clsx(
@@ -34,10 +33,12 @@ export default function TextInput(props: TextInputProps){
 						inputClassName
 					)}
 					placeholder={placeholder}
+					maxLength={maxLength}
 					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
+					spellCheck={spellCheck}
 				/>
 				<label
 					className={clsx(
@@ -46,7 +47,7 @@ export default function TextInput(props: TextInputProps){
 						"flex items-center",
 						labelClassName
 					)}
-					style={{ transitionProperty: "top,, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
 					htmlFor={id}
 				>
 					{placeholder}

lib/types/Input.d.ts

@@ -3,10 +3,12 @@ import type { ChangeEventHandler } from "react";
 
 
 export interface TextInputProps {
-	id: string;
+	id?: string;
 	className?: string;
 	inputClassName?: string;
 	labelClassName?: string;
+	maxLength?: number;
+	spellCheck?: boolean;
 	placeholder?: string;
 	defaultValue?: string;
 	value?: string;
@@ -14,6 +16,12 @@ export interface TextInputProps {
 	disabled?: boolean;
 }
 
+export interface TextAreaProps extends TextInputProps{
+	rows?: number;
+	cols?: number;
+	onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+}
+
 export interface SelectInputProps {
 	label: React.ReactNode;
 	value?: string;