uibee 3.2.0 → 3.3.1

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

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

package/dist/components/inputs/select.js

@@ -0,0 +1,164 @@
+"use client";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import useClickOutside from "../../hooks/useClickOutside.js";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown, Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image.js";
+//#region src/components/inputs/select.tsx
+function Select({ label, name, value, onChange, options, error, className, disabled, required, placeholder = "Select an option", info, description, clearable = true, searchable = true, textSize = "sm" }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [selectedOption, setSelectedOption] = useState(options.find((opt) => opt.value === value));
+	useEffect(() => {
+		if (!isOpen) setSearchTerm("");
+	}, [isOpen]);
+	useEffect(() => {
+		setSelectedOption(options.find((opt) => opt.value === value));
+	}, [value, options]);
+	const containerRef = useRef(null);
+	useClickOutside(containerRef, () => setIsOpen(false));
+	function handleSelect(option) {
+		if (disabled) return;
+		setSelectedOption(option);
+		setIsOpen(false);
+		if (onChange) onChange(option.value);
+	}
+	function handleClear(e) {
+		e.stopPropagation();
+		if (disabled) return;
+		setSelectedOption(void 0);
+		if (onChange) onChange(null);
+	}
+	const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		label,
+		name,
+		required,
+		info,
+		description,
+		error,
+		textSize,
+		className,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			ref: containerRef,
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => !disabled && setIsOpen(!isOpen),
+				disabled,
+				"aria-haspopup": "listbox",
+				"aria-expanded": isOpen,
+				"aria-labelledby": label ? void 0 : name,
+				className: `
+                        w-full rounded-md bg-login-500/50 border border-login-500
+                        text-login-text text-left 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 pl-3 pr-10
+                        transition-all duration-150
+                        flex items-center justify-between
+                        ${error ? "border-red-500/70 focus:border-red-500/70 focus:ring-red-500/30" : ""}
+                        ${!selectedOption ? "text-login-200" : ""}
+                    `,
+				title: label,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 truncate",
+					children: [selectedOption?.image && /* @__PURE__ */ jsx(Image, {
+						src: selectedOption.image,
+						alt: "",
+						width: 30,
+						height: 20,
+						className: "rounded-xs object-cover shrink-0"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: selectedOption ? selectedOption.label : placeholder
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "absolute inset-y-0 right-0 flex items-center px-2 gap-1",
+					children: [clearable && selectedOption && !disabled && /* @__PURE__ */ jsx("div", {
+						role: "button",
+						onClick: handleClear,
+						className: `
+                                    p-1 hover:bg-login-500 rounded-full text-login-200
+                                    hover:text-red-400 transition-colors cursor-pointer
+                                `,
+						title: "Clear selection",
+						children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+					}), /* @__PURE__ */ jsx("div", {
+						className: `
+                            text-login-200 pointer-events-none
+                            transition-transform duration-200
+                            ${isOpen ? "rotate-180" : ""}
+                        `,
+						children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4" })
+					})]
+				})]
+			}), isOpen && /* @__PURE__ */ jsxs("div", {
+				className: `
+                        absolute z-50 w-full mt-1 bg-login-700 border border-login-500/50
+                        rounded-md shadow-xl max-h-60 overflow-hidden flex flex-col
+                    `,
+				children: [searchable && /* @__PURE__ */ jsx("div", {
+					className: "p-2 sticky top-0 bg-login-700 border-b border-login-500/20 z-10",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-login-200" }), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: searchTerm,
+							onChange: (e) => setSearchTerm(e.target.value),
+							placeholder: "Search...",
+							autoFocus: true,
+							className: `
+                                            w-full bg-login-600 border border-login-500/50 rounded-md
+                                            py-1.5 pl-9 pr-3 text-sm text-login-text
+                                            focus:outline-none focus:border-login/60 focus:ring-1 focus:ring-login/30
+                                        `
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "overflow-auto noscroll",
+					children: filteredOptions.length > 0 ? /* @__PURE__ */ jsx("ul", {
+						className: "py-1",
+						role: "listbox",
+						children: filteredOptions.map((option) => /* @__PURE__ */ jsx("li", {
+							role: "option",
+							"aria-selected": selectedOption?.value === option.value,
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => handleSelect(option),
+								className: `
+                                                    w-full text-left px-3 py-2 text-sm
+                                                    hover:bg-login-600 transition-colors duration-150
+                                                    flex items-center gap-2
+                                                    ${selectedOption?.value === option.value ? "bg-login/15 text-login" : "text-login-text"}
+                                                `,
+								children: [option.image && /* @__PURE__ */ jsx(Image, {
+									src: option.image,
+									alt: "",
+									width: 75,
+									height: 25,
+									className: "rounded-md object-cover shrink-0"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: option.label
+								})]
+							})
+						}, option.value))
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-2 text-sm text-login-200",
+						children: searchTerm ? "No results found" : "No options available"
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: selectedOption?.value || "",
+			required
+		})]
+	});
+}
+//#endregion
+export { Select as default };

package/dist/components/inputs/shared/colorPickerPopup.js

@@ -0,0 +1,293 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/shared/colorPickerPopup.tsx
+function hexToHsv(hex) {
+	hex = hex.replace("#", "");
+	let r = 0, g = 0, b = 0;
+	if (hex.length === 3) {
+		r = parseInt(hex[0] + hex[0], 16);
+		g = parseInt(hex[1] + hex[1], 16);
+		b = parseInt(hex[2] + hex[2], 16);
+	} else if (hex.length === 6) {
+		r = parseInt(hex.substring(0, 2), 16);
+		g = parseInt(hex.substring(2, 4), 16);
+		b = parseInt(hex.substring(4, 6), 16);
+	}
+	r /= 255;
+	g /= 255;
+	b /= 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const d = max - min;
+	let h = 0;
+	const s = max === 0 ? 0 : d / max;
+	const v = max;
+	if (max !== min) {
+		switch (max) {
+			case r:
+				h = (g - b) / d + (g < b ? 6 : 0);
+				break;
+			case g:
+				h = (b - r) / d + 2;
+				break;
+			case b:
+				h = (r - g) / d + 4;
+				break;
+		}
+		h /= 6;
+	}
+	return {
+		h: h * 360,
+		s: s * 100,
+		v: v * 100
+	};
+}
+function hsvToRgb(h, s, v) {
+	let r = 0, g = 0, b = 0;
+	const i = Math.floor(h * 6);
+	const f = h * 6 - i;
+	const p = v * (1 - s);
+	const q = v * (1 - f * s);
+	const t = v * (1 - (1 - f) * s);
+	switch (i % 6) {
+		case 0:
+			r = v;
+			g = t;
+			b = p;
+			break;
+		case 1:
+			r = q;
+			g = v;
+			b = p;
+			break;
+		case 2:
+			r = p;
+			g = v;
+			b = t;
+			break;
+		case 3:
+			r = p;
+			g = q;
+			b = v;
+			break;
+		case 4:
+			r = t;
+			g = p;
+			b = v;
+			break;
+		case 5:
+			r = v;
+			g = p;
+			b = q;
+			break;
+	}
+	return {
+		r: Math.round(r * 255),
+		g: Math.round(g * 255),
+		b: Math.round(b * 255)
+	};
+}
+function hsvToHex(h, s, v) {
+	const { r, g, b } = hsvToRgb(h / 360, s / 100, v / 100);
+	function toHex(x) {
+		const hex = x.toString(16);
+		return hex.length === 1 ? "0" + hex : hex;
+	}
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+const PRESET_COLORS = [
+	"#f87171",
+	"#fd8738",
+	"#fbbf24",
+	"#facc15",
+	"#a3e635",
+	"#4ade80",
+	"#34d399",
+	"#2dd4bf",
+	"#38bdf8",
+	"#60a5fa",
+	"#818cf8",
+	"#a78bfa",
+	"#c084fc",
+	"#e879f9",
+	"#f472b6",
+	"#fb7185"
+];
+function SaturationPicker({ hsv, onChange }) {
+	const containerRef = useRef(null);
+	function handleMove(e) {
+		if (!containerRef.current) return;
+		const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+		const x = Math.min(Math.max((e.clientX - left) / width, 0), 1);
+		const y = Math.min(Math.max((e.clientY - top) / height, 0), 1);
+		onChange(x * 100, (1 - y) * 100);
+	}
+	function handleMouseDown(e) {
+		handleMove(e);
+		function moveHandler(e) {
+			handleMove(e);
+		}
+		function upHandler() {
+			window.removeEventListener("mousemove", moveHandler);
+			window.removeEventListener("mouseup", upHandler);
+		}
+		window.addEventListener("mousemove", moveHandler);
+		window.addEventListener("mouseup", upHandler);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "w-full h-32 relative rounded-md overflow-hidden cursor-crosshair mb-3 select-none",
+		style: { backgroundColor: hsvToHex(hsv.h, 100, 100) },
+		onMouseDown: handleMouseDown,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-r from-white to-transparent" }),
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black to-transparent" }),
+			/* @__PURE__ */ jsx("div", {
+				className: `
+                    absolute w-3 h-3 border-2 border-white rounded-full
+                    shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none
+                `,
+				style: {
+					left: `${hsv.s}%`,
+					top: `${100 - hsv.v}%`
+				}
+			})
+		]
+	});
+}
+function HuePicker({ hue, onChange }) {
+	const containerRef = useRef(null);
+	function handleMove(e) {
+		if (!containerRef.current) return;
+		const { left, width } = containerRef.current.getBoundingClientRect();
+		onChange(Math.min(Math.max((e.clientX - left) / width, 0), 1) * 360);
+	}
+	function handleMouseDown(e) {
+		handleMove(e);
+		function moveHandler(e) {
+			handleMove(e);
+		}
+		function upHandler() {
+			window.removeEventListener("mousemove", moveHandler);
+			window.removeEventListener("mouseup", upHandler);
+		}
+		window.addEventListener("mousemove", moveHandler);
+		window.addEventListener("mouseup", upHandler);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: "w-full h-3 relative rounded-full cursor-pointer mb-4 select-none",
+		style: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
+		onMouseDown: handleMouseDown,
+		children: /* @__PURE__ */ jsx("div", {
+			className: `
+                    absolute w-4 h-4 bg-white border border-gray-200
+                    rounded-full shadow-sm -translate-x-1/2 -translate-y-1/2
+                    top-1/2 pointer-events-none
+                `,
+			style: { left: `${hue / 360 * 100}%` }
+		})
+	});
+}
+function ColorPickerPopup({ value, onChange, onClose, anchorName }) {
+	const [hsv, setHsv] = useState(() => hexToHsv(value || "#000000"));
+	const [hexInput, setHexInput] = useState(value || "#000000");
+	useEffect(() => {
+		if (value && value !== hexInput) {
+			setHsv(hexToHsv(value));
+			setHexInput(value);
+		}
+	}, [value]);
+	function handleColorChange(newHsv) {
+		setHsv(newHsv);
+		const hex = hsvToHex(newHsv.h, newHsv.s, newHsv.v);
+		setHexInput(hex);
+		onChange(hex);
+	}
+	function handleSaturationChange(s, v) {
+		handleColorChange({
+			...hsv,
+			s,
+			v
+		});
+	}
+	function handleHueChange(h) {
+		handleColorChange({
+			...hsv,
+			h
+		});
+	}
+	function manualHexChange(e) {
+		const val = e.target.value;
+		setHexInput(val);
+		if (/^#[0-9A-F]{6}$/i.test(val)) {
+			setHsv(hexToHsv(val));
+			onChange(val);
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed z-50 bg-login-700 border border-login-500/50 rounded-md shadow-xl p-3 w-64 select-none anchor-popup",
+		style: {
+			positionAnchor: anchorName,
+			positionArea: "bottom span-right",
+			insetArea: "bottom span-right",
+			positionTryFallbacks: "flip-block",
+			margin: "0.25rem 0"
+		},
+		children: [
+			/* @__PURE__ */ jsx(SaturationPicker, {
+				hsv,
+				onChange: handleSaturationChange
+			}),
+			/* @__PURE__ */ jsx(HuePicker, {
+				hue: hsv.h,
+				onChange: handleHueChange
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 mb-3",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "text-xs text-login-200 font-mono",
+						children: "HEX"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: hexInput,
+						onChange: manualHexChange,
+						className: `
+                        flex-1 min-w-0 bg-login-600 border border-login-500/50 rounded
+                        px-2 py-1 text-sm text-login-text focus:outline-none
+                        focus:border-login/60 focus:ring-1 focus:ring-login/30
+                    `,
+						spellCheck: false
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "w-8 h-8 rounded border border-login-500/50 shrink-0",
+						style: { backgroundColor: hexInput }
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-8 gap-1.5 pt-3 border-t border-login-500/25",
+				children: PRESET_COLORS.map((color) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `
+                            w-6 h-6 rounded-sm cursor-pointer hover:scale-110
+                            hover:zIndex-10 transition-transform ring-1 ring-inset ring-black/10
+                        `,
+					style: { backgroundColor: color },
+					onClick: () => {
+						setHsv(hexToHsv(color));
+						setHexInput(color);
+						onChange(color);
+						onClose();
+					},
+					title: color
+				}, color))
+			})
+		]
+	});
+}
+//#endregion
+export { ColorPickerPopup as default };