uibee 3.2.0 → 3.3.1

package/dist/components/inputs/fileInput.js

@@ -0,0 +1,108 @@
+"use client";
+import { useRef, useState } from "react";
+import { FileIcon, UploadCloud, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/fileInput.tsx
+function FileInput({ name, label, accept, multiple = false, onChange, className = "" }) {
+	const [files, setFiles] = useState([]);
+	const [dragging, setDragging] = useState(false);
+	const inputRef = useRef(null);
+	function handleFiles(incoming) {
+		if (!incoming) return;
+		const arr = multiple ? Array.from(incoming) : [incoming[0]];
+		setFiles(arr);
+		onChange(arr);
+	}
+	function removeFile(index) {
+		const next = files.filter((_, i) => i !== index);
+		setFiles(next);
+		onChange(next);
+		if (inputRef.current) inputRef.current.value = "";
+	}
+	function onDrop(e) {
+		e.preventDefault();
+		setDragging(false);
+		handleFiles(e.dataTransfer.files);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col gap-2 ${className}`,
+		children: [
+			label && /* @__PURE__ */ jsx("label", {
+				className: "text-sm font-medium text-login-200",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "button",
+				tabIndex: 0,
+				onClick: () => inputRef.current?.click(),
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+				},
+				onDragOver: (e) => {
+					e.preventDefault();
+					setDragging(true);
+				},
+				onDragLeave: () => setDragging(false),
+				onDrop,
+				className: `
+                    flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6
+                    transition-all duration-150
+                    ${dragging ? "scale-[1.01] border-login bg-login/5" : "border-login-500/50 bg-login-800/30 hover:border-login/50 hover:bg-login/5"}
+                `,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref: inputRef,
+						type: "file",
+						name,
+						accept,
+						multiple,
+						className: "hidden",
+						onChange: (e) => handleFiles(e.target.files)
+					}),
+					/* @__PURE__ */ jsx(UploadCloud, { className: "h-7 w-7 text-login-400" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-login-200",
+							children: ["Drop files here or ", /* @__PURE__ */ jsx("span", {
+								className: "text-login",
+								children: "browse"
+							})]
+						}), accept && /* @__PURE__ */ jsx("p", {
+							className: "mt-0.5 text-xs text-login-400",
+							children: accept
+						})]
+					})
+				]
+			}),
+			files.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1.5",
+				children: files.map((file, i) => /* @__PURE__ */ jsxs("li", {
+					className: "\n                            flex items-center gap-2 rounded-lg\n                            border border-login-500/25 bg-login-800/50 px-3 py-2 text-sm\n                        ",
+					children: [
+						/* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4 shrink-0 text-login-400" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 truncate text-login-200",
+							children: file.name
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 text-xs text-login-400",
+							children: [(file.size / 1024).toFixed(1), " KB"]
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								removeFile(i);
+							},
+							className: "cursor-pointer text-login-400 transition-colors hover:text-red-400",
+							children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+						})
+					]
+				}, i))
+			})
+		]
+	});
+}
+//#endregion
+export { FileInput as default };

package/dist/components/inputs/input.d.ts

@@ -0,0 +1,16 @@
+import React, { JSX } from "react";
+
+//#region src/components/inputs/input.d.ts
+type InputProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+  name: string;
+  label?: string;
+  error?: string;
+  className?: string;
+  icon?: JSX.Element;
+  info?: string;
+  description?: string;
+  textSize?: 'sm' | 'md';
+};
+declare function Input(props: InputProps): JSX.Element;
+//#endregion
+export { InputProps, Input as default };

package/dist/components/inputs/input.js

@@ -0,0 +1,157 @@
+"use client";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import ColorPickerPopup from "./shared/colorPickerPopup.js";
+import "./shared/index.js";
+import DateTimePickerPopup from "./shared/dateTimePickerPopup.js";
+import useClickOutside from "../../hooks/useClickOutside.js";
+import { useId, useRef, useState } from "react";
+import { Calendar, Clock } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/input.tsx
+function Input(props) {
+	const { name, label, error, className, icon, info, description, textSize = "sm", ...inputProps } = props;
+	const { type = "text", value } = inputProps;
+	const localRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const anchorName = `--input-${useId().replace(/:/g, "")}`;
+	const containerRef = useRef(null);
+	useClickOutside(containerRef, () => setIsOpen(false));
+	const isDateType = [
+		"date",
+		"datetime-local",
+		"time"
+	].includes(type);
+	const isColorType = type === "color";
+	const isClickableType = isDateType || isColorType;
+	function handleIconClick() {
+		if (isClickableType && !inputProps.disabled) setIsOpen(!isOpen);
+		else if (localRef.current && !inputProps.disabled) localRef.current.focus();
+	}
+	function pad(n) {
+		return n.toString().padStart(2, "0");
+	}
+	function handleDateChange(date) {
+		const onChange = inputProps.onChange;
+		if (!onChange) return;
+		const yyyy = date.getFullYear();
+		const MM = pad(date.getMonth() + 1);
+		const dd = pad(date.getDate());
+		const hh = pad(date.getHours());
+		const mm = pad(date.getMinutes());
+		let newValue = "";
+		if (type === "date") newValue = `${yyyy}-${MM}-${dd}`;
+		else if (type === "time") newValue = `${hh}:${mm}`;
+		else if (type === "datetime-local") newValue = `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
+		onChange({ target: {
+			name,
+			value: newValue,
+			type
+		} });
+	}
+	function handleColorChange(color) {
+		const onChange = inputProps.onChange;
+		if (!onChange) return;
+		onChange({ target: {
+			name,
+			value: color,
+			type
+		} });
+	}
+	let displayIcon = icon;
+	if (!displayIcon && isDateType) if (type === "time") displayIcon = /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" });
+	else displayIcon = /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4" });
+	else if (!displayIcon && isColorType) displayIcon = /* @__PURE__ */ jsx("div", {
+		className: "w-4 h-4 rounded border border-login-200",
+		style: { backgroundColor: value || "#000000" }
+	});
+	function getDateValue() {
+		if (!value) return null;
+		if (type === "time") {
+			const date = /* @__PURE__ */ new Date(`2000-01-01T${value}`);
+			return isNaN(date.getTime()) ? null : date;
+		}
+		const date = new Date(value);
+		return isNaN(date.getTime()) ? null : date;
+	}
+	function getDateDisplayValue() {
+		if (!value || !isDateType) return value;
+		const date = getDateValue();
+		if (!date) return value;
+		const yyyy = date.getFullYear();
+		const MM = pad(date.getMonth() + 1);
+		const dd = pad(date.getDate());
+		const hh = pad(date.getHours());
+		const mm = pad(date.getMinutes());
+		if (type === "date") return `${dd}.${MM}.${yyyy}`;
+		if (type === "time") return `${hh}:${mm}`;
+		if (type === "datetime-local") return `${dd}.${MM}.${yyyy} ${hh}:${mm}`;
+		return value;
+	}
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		name,
+		required: inputProps.required,
+		info,
+		error,
+		description,
+		textSize,
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative flex items-center",
+			ref: containerRef,
+			children: [
+				displayIcon && /* @__PURE__ */ jsx("div", {
+					className: `
+                            absolute left-3 text-login-200
+                            ${isClickableType && !inputProps.disabled ? "cursor-pointer hover:text-login-text" : "pointer-events-none"}
+                        `,
+					onClick: handleIconClick,
+					children: displayIcon
+				}),
+				/* @__PURE__ */ jsx("input", {
+					...inputProps,
+					ref: localRef,
+					id: name,
+					name: isClickableType ? void 0 : name,
+					type: isClickableType ? "text" : type,
+					value: isDateType ? getDateDisplayValue() : value,
+					readOnly: isClickableType,
+					onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true),
+					"aria-describedby": error ? `${name}-error` : void 0,
+					style: { anchorName },
+					className: `
+                        w-full rounded-md bg-login-500/50 border border-login-500
+                        text-login-text placeholder-login-200 text-sm
+                        focus:outline-none focus:border-login/60 focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        h-10 py-2 ${displayIcon ? "pl-10 pr-3" : "px-3"}
+                        transition-all duration-150
+                        input-reset
+                        ${error ? "border-red-500/70 focus:border-red-500/70 focus:ring-red-500/30" : ""}
+                        ${isClickableType && !inputProps.disabled ? "cursor-pointer" : ""}
+                    `
+				}),
+				isClickableType && /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value
+				}),
+				isOpen && isDateType && !inputProps.disabled && /* @__PURE__ */ jsx(DateTimePickerPopup, {
+					value: getDateValue(),
+					onChange: handleDateChange,
+					type,
+					onClose: () => setIsOpen(false),
+					anchorName
+				}),
+				isOpen && isColorType && !inputProps.disabled && /* @__PURE__ */ jsx(ColorPickerPopup, {
+					value: value || "",
+					onChange: handleColorChange,
+					onClose: () => setIsOpen(false),
+					anchorName
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Input as default };

package/dist/components/inputs/multiSelect.d.ts

@@ -0,0 +1,37 @@
+//#region src/components/inputs/multiSelect.d.ts
+type Option = {
+  label: string;
+  value: string;
+};
+type MultiSelectProps = {
+  label?: string;
+  name: string;
+  options: Option[];
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  placeholder?: string;
+  error?: string;
+  className?: string;
+  disabled?: boolean;
+  required?: boolean;
+  info?: string;
+  description?: string;
+  textSize?: 'sm' | 'md';
+};
+declare function MultiSelect({
+  label,
+  name,
+  options,
+  value,
+  onChange,
+  placeholder,
+  error,
+  className,
+  disabled,
+  required,
+  info,
+  description,
+  textSize
+}: MultiSelectProps): import("react").JSX.Element;
+//#endregion
+export { MultiSelectProps, MultiSelect as default };

package/dist/components/inputs/multiSelect.js

@@ -0,0 +1,99 @@
+"use client";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import useClickOutside from "../../hooks/useClickOutside.js";
+import { useRef, useState } from "react";
+import { Check, ChevronDown, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/multiSelect.tsx
+function MultiSelect({ label, name, options, value = [], onChange, placeholder = "Select…", error, className, disabled, required, info, description, textSize = "sm" }) {
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef(null);
+	useClickOutside(containerRef, () => setOpen(false));
+	function toggleOption(optionValue) {
+		if (!onChange) return;
+		if (value.includes(optionValue)) onChange(value.filter((v) => v !== optionValue));
+		else onChange([...value, optionValue]);
+	}
+	function removeOption(optionValue) {
+		if (!onChange) return;
+		onChange(value.filter((v) => v !== optionValue));
+	}
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		name,
+		required,
+		info,
+		description,
+		error,
+		className,
+		textSize,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: "relative w-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					onClick: () => !disabled && setOpen((o) => !o),
+					className: `
+                        flex min-h-10 cursor-pointer items-center justify-between gap-2
+                        rounded-md bg-login-500/50 border border-login-500 px-3 py-1.5
+                        transition-all duration-150 select-none
+                        ${open ? "border-login/60 ring-1 ring-login/30" : ""}
+                        ${error ? "border-red-500/70" : ""}
+                        ${disabled ? "opacity-40 cursor-not-allowed" : ""}
+                    `,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap gap-1.5",
+						children: [value.length === 0 && /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-login-200",
+							children: placeholder
+						}), value.map((val) => {
+							const option = options.find((o) => o.value === val);
+							if (!option) return null;
+							return /* @__PURE__ */ jsxs("span", {
+								className: "\n                                        flex items-center gap-1 rounded px-2 py-0.5 text-sm\n                                        border border-login-500 bg-login-600 text-login-100\n                                    ",
+								children: [option.label, !disabled && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation();
+										removeOption(val);
+									},
+									className: "hover:text-red-300 transition-colors",
+									children: /* @__PURE__ */ jsx(X, { size: 13 })
+								})]
+							}, val);
+						})]
+					}), /* @__PURE__ */ jsx(ChevronDown, {
+						size: 16,
+						className: `shrink-0 text-login-200 transition-transform duration-150 ${open ? "rotate-180" : ""}`
+					})]
+				}),
+				open && options.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "\n                        absolute z-50 mt-1 w-full max-h-60 overflow-auto\n                        rounded-md border border-login-500/50 bg-login-800 shadow-lg\n                    ",
+					children: options.map((option) => {
+						const selected = value.includes(option.value);
+						return /* @__PURE__ */ jsxs("div", {
+							onClick: () => toggleOption(option.value),
+							className: `
+                                        flex cursor-pointer items-center justify-between px-3 py-2 text-sm
+                                        hover:bg-login-700 transition-colors select-none
+                                        ${selected ? "text-login-50" : "text-login-100"}
+                                    `,
+							children: [/* @__PURE__ */ jsx("span", { children: option.label }), selected && /* @__PURE__ */ jsx(Check, {
+								size: 14,
+								className: "text-login shrink-0"
+							})]
+						}, option.value);
+					})
+				}),
+				/* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: value.join(",")
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { MultiSelect as default };

package/dist/components/inputs/radio.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/inputs/radio.d.ts
+type RadioOption = {
+  label: string;
+  value: string | number;
+};
+type RadioProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
+  name: string;
+  label?: string;
+  error?: string;
+  info?: string;
+  description?: string;
+  className?: string;
+  options: RadioOption[];
+  value?: string | number | null;
+  onChange?: (value: string | number) => void;
+  textSize?: 'sm' | 'md';
+};
+declare function Radio(props: RadioProps): import("react").JSX.Element;
+//#endregion
+export { RadioOption, RadioProps, Radio as default };

package/dist/components/inputs/radio.js

@@ -0,0 +1,70 @@
+"use client";
+import InputLabel from "./shared/inputLabel.js";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/radio.tsx
+function Radio(props) {
+	const { options, onChange, value, label, description, error, info, name, className, textSize = "sm", ...rest } = props;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		name,
+		required: rest.required,
+		info,
+		description,
+		error,
+		textSize,
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2",
+			children: options.map((option) => /* @__PURE__ */ jsx(RadioItem, {
+				name,
+				value: option.value,
+				label: option.label,
+				checked: value === option.value,
+				disabled: rest.disabled,
+				onChange: () => {
+					if (onChange) onChange(option.value);
+				},
+				className: "mb-0"
+			}, option.value))
+		})
+	});
+}
+function RadioItem(props) {
+	const { name, label, error, ...inputProps } = props;
+	const { value } = inputProps;
+	const id = `${name}-${value}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative w-5 h-5 shrink-0",
+			children: [/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				id,
+				name,
+				type: "radio",
+				className: `
+                        peer appearance-none rounded-full border border-login-500 bg-login-500/50
+                        checked:bg-login checked:border-login
+                        focus:outline-none focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        cursor-pointer transition-all duration-150
+                        w-5 h-5 absolute inset-0
+                        ${error ? "border-red-500/70" : ""}
+                    `
+			}), /* @__PURE__ */ jsx("div", { className: `
+                    absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+                    w-2 h-2 rounded-full bg-white pointer-events-none opacity-0
+                    peer-checked:opacity-100 transition-opacity duration-200
+                ` })]
+		}), label && /* @__PURE__ */ jsx(InputLabel, {
+			label,
+			name,
+			disabled: inputProps.disabled,
+			className: "select-none cursor-pointer"
+		})]
+	});
+}
+//#endregion
+export { Radio as default };

package/dist/components/inputs/range.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/inputs/range.d.ts
+type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {
+  name: string;
+  label?: string;
+  error?: string;
+  className?: string;
+  info?: string;
+  description?: string;
+  showValue?: boolean;
+  textSize?: 'sm' | 'md';
+};
+declare function Range(props: RangeProps): import("react").JSX.Element;
+//#endregion
+export { RangeProps, Range as default };

package/dist/components/inputs/range.js

@@ -0,0 +1,60 @@
+"use client";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/range.tsx
+function Range(props) {
+	const { name, label, error, className, info, description, showValue = true, textSize = "sm", ...inputProps } = props;
+	const { min = 0, max = 100, step = 1, value, defaultValue, onChange, ...restInputProps } = inputProps;
+	const displayValue = value ?? defaultValue ?? 0;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		name,
+		required: restInputProps.required,
+		info,
+		description,
+		error,
+		textSize,
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ jsx("input", {
+				...restInputProps,
+				id: name,
+				name,
+				type: "range",
+				min,
+				max,
+				step,
+				...onChange ? {
+					value,
+					onChange
+				} : { defaultValue: value ?? defaultValue ?? 0 },
+				title: label,
+				"aria-invalid": !!error,
+				"aria-describedby": error ? `${name}-error` : void 0,
+				className: `
+                        flex-1 h-2 bg-login-500 rounded-lg appearance-none cursor-pointer
+                        accent-login
+                        [&::-webkit-slider-thumb]:appearance-none
+                        [&::-webkit-slider-thumb]:w-4
+                        [&::-webkit-slider-thumb]:h-4
+                        [&::-webkit-slider-thumb]:rounded-full
+                        [&::-webkit-slider-thumb]:bg-login
+                        [&::-moz-range-thumb]:w-4
+                        [&::-moz-range-thumb]:h-4
+                        [&::-moz-range-thumb]:rounded-full
+                        [&::-moz-range-thumb]:bg-login
+                        [&::-moz-range-thumb]:border-none
+                        disabled:opacity-50 disabled:cursor-not-allowed
+                        ${error ? "accent-red-500" : ""}
+                    `
+			}), showValue && /* @__PURE__ */ jsx("span", {
+				className: "text-login-text text-sm font-medium min-w-10 text-right",
+				children: displayValue
+			})]
+		})
+	});
+}
+//#endregion
+export { Range as default };

package/dist/components/inputs/searchInput.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/inputs/searchInput.d.ts
+interface SearchInputProps {
+  placeholder?: string;
+  variant?: 'default' | 'minimal';
+}
+declare function SearchInput({
+  placeholder,
+  variant
+}: SearchInputProps): import("react").JSX.Element;
+//#endregion
+export { SearchInput as default };

package/dist/components/inputs/searchInput.js

@@ -0,0 +1,56 @@
+"use client";
+import Input from "./input.js";
+import { useEffect, useState } from "react";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from "next/navigation.js";
+//#region src/components/inputs/searchInput.tsx
+function SearchInput({ placeholder = "Search...", variant = "default" }) {
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const [searchValue, setSearchValue] = useState(searchParams.get("q") || "");
+	useEffect(() => {
+		setSearchValue(searchParams.get("q") || "");
+	}, [searchParams]);
+	function handleSearch(value) {
+		setSearchValue(value);
+		const params = new URLSearchParams(searchParams.toString());
+		if (value.trim()) params.set("q", value.trim());
+		else params.delete("q");
+		params.delete("page");
+		router.push(`${pathname}?${params.toString()}`);
+	}
+	function handleKeyDown(e) {
+		if (e.key === "Enter") handleSearch(searchValue);
+	}
+	function handleChange(e) {
+		setSearchValue(e.target.value);
+	}
+	if (variant === "minimal") return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5" }), /* @__PURE__ */ jsx("input", {
+			type: "text",
+			value: searchValue,
+			onChange: (e) => setSearchValue(e.target.value),
+			onKeyDown: handleKeyDown,
+			onBlur: () => handleSearch(searchValue),
+			placeholder,
+			className: "pl-10 pr-4 py-2 border-b outline-none w-64"
+		})]
+	});
+	else return /* @__PURE__ */ jsx("div", {
+		className: "w-fit min-w-48",
+		children: /* @__PURE__ */ jsx(Input, {
+			name: "search",
+			icon: /* @__PURE__ */ jsx(Search, { className: "w-5 h-5" }),
+			value: searchValue,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			onBlur: () => handleSearch(searchValue),
+			placeholder
+		})
+	});
+}
+//#endregion
+export { SearchInput as default };