unicornial-ui 0.0.12 → 0.0.13

package/dist/unicornial-ui.es.js

@@ -1,7 +1,7 @@
 import "./unicornial-ui.css";
-import { createContext as e, forwardRef as t, useCallback as n, useContext as r, useEffect as i, useMemo as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-var u = {
+import e, { createContext as t, forwardRef as n, useCallback as r, useContext as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+var f = {
 	colors: {
 		primary: "#aa3bff",
 		secondary: "#f4f3ec",
@@ -32,37 +32,37 @@ var u = {
 		color: "text-text",
 		darkColor: "text-text-d"
 	}
-}, d = (e, t) => {
+}, p = (e, t) => {
 	let n = { ...e };
 	for (let r of Object.keys(t)) {
 		let i = t[r];
-		i && typeof i == "object" && !Array.isArray(i) && e[r] && typeof e[r] == "object" && !Array.isArray(e[r]) ? n[r] = d(e[r], i) : i !== void 0 && (n[r] = i);
+		i && typeof i == "object" && !Array.isArray(i) && e[r] && typeof e[r] == "object" && !Array.isArray(e[r]) ? n[r] = p(e[r], i) : i !== void 0 && (n[r] = i);
 	}
 	return n;
-}, f = e(null);
-function p({ children: e, config: t }) {
-	let r = a(() => d(u, t ?? {}), [t]), [s, l] = o(r.colors), [p, m] = o(r.darkColors), [h, g] = o(r.darkMode), [_, v] = o(r.text), y = n((e) => {
-		l((t) => ({
+}, m = t(null);
+function h({ children: e, config: t }) {
+	let n = o(() => p(f, t ?? {}), [t]), [i, s] = c(n.colors), [l, d] = c(n.darkColors), [h, g] = c(n.darkMode), [_, v] = c(n.text), y = r((e) => {
+		s((t) => ({
 			...t,
 			...e
 		}));
-	}, []), b = n((e) => {
-		m((t) => ({
+	}, []), b = r((e) => {
+		d((t) => ({
 			...t,
 			...e
 		}));
-	}, []), x = n((e) => {
+	}, []), x = r((e) => {
 		g(e);
-	}, []), S = n((e) => {
+	}, []), S = r((e) => {
 		v((t) => ({
 			...t,
 			...e
 		}));
-	}, []), C = n((e) => {
-		e.colors && l((t) => ({
+	}, []), C = r((e) => {
+		e.colors && s((t) => ({
 			...t,
 			...e.colors
-		})), e.darkColors && m((t) => ({
+		})), e.darkColors && d((t) => ({
 			...t,
 			...e.darkColors
 		})), e.darkMode !== void 0 && g(e.darkMode), e.text && v((t) => ({
@@ -70,15 +70,19 @@ function p({ children: e, config: t }) {
 			...e.text
 		}));
 	}, []);
-	i(() => {
+	a(() => {
 		if (typeof document > "u") return;
 		let e = document.documentElement;
-		h ? e.classList.add("dark") : e.classList.remove("dark"), e.style.setProperty("--theme-primary", h ? p.primary : s.primary), e.style.setProperty("--theme-secondary", h ? p.secondary : s.secondary);
-	}, [s, h]);
-	let w = a(() => ({
+		h ? e.classList.add("dark") : e.classList.remove("dark"), e.style.setProperty("--theme-primary", h ? l.primary : i.primary), e.style.setProperty("--theme-secondary", h ? l.secondary : i.secondary);
+	}, [
+		i,
+		h,
+		l
+	]);
+	let w = o(() => ({
 		enabled: !0,
-		colors: s,
-		darkColors: p,
+		colors: i,
+		darkColors: l,
 		darkMode: h,
 		text: _,
 		setColors: y,
@@ -87,26 +91,28 @@ function p({ children: e, config: t }) {
 		setText: S,
 		setTheme: C
 	}), [
-		s,
+		i,
 		h,
+		l,
 		_,
 		y,
 		x,
+		b,
 		S,
 		C
 	]);
-	return /* @__PURE__ */ c(f.Provider, {
+	return /* @__PURE__ */ u(m.Provider, {
 		value: w,
 		children: e
 	});
 }
-function m() {
-	return r(f) || {
+function g() {
+	return i(m) || {
 		enabled: !1,
-		colors: u.colors,
-		darkColors: u.darkColors,
-		darkMode: u.darkMode,
-		text: u.text,
+		colors: f.colors,
+		darkColors: f.darkColors,
+		darkMode: f.darkMode,
+		text: f.text,
 		setColors: () => {},
 		setDarkMode: () => {},
 		setText: () => {},
@@ -115,74 +121,8 @@ function m() {
 	};
 }
 //#endregion
-//#region src/components/Button.tsx
-var h = {
-	primary: "bg-accent text-white hover:bg-accent/90 focus-visible:ring-accent/50",
-	secondary: "bg-code-bg text-text-h hover:bg-code-bg/80 focus-visible:ring-code-bg/50",
-	outline: "border border-border bg-transparent text-text-h hover:bg-accent-bg hover:border-accent-border focus-visible:ring-accent/50",
-	ghost: "bg-transparent text-text-h hover:bg-accent-bg focus-visible:ring-accent/50"
-}, g = {
-	sm: "px-3 py-1.5 text-sm gap-1.5",
-	md: "px-5 py-2.5 text-base gap-2",
-	lg: "px-7 py-3 text-lg gap-2.5"
-};
-function _(e, t) {
-	let n = e.replace("#", ""), r = n.length === 3 ? n.split("").map((e) => e + e).join("") : n, i = parseInt(r, 16);
-	return `rgba(${i >> 16 & 255}, ${i >> 8 & 255}, ${i & 255}, ${t})`;
-}
-var v = t(function({ variant: e = "primary", size: t = "md", className: n = "", style: r, ...i }, o) {
-	let s = m(), l = a(() => {
-		if (!s.enabled) return;
-		let t = s.colors.primary, n = s.colors.secondary, r = _(t, .1), i = _(t, .5), a = _(t, .5);
-		switch (e) {
-			case "primary": return {
-				backgroundColor: t,
-				color: "#fff",
-				"--tw-ring-color": a
-			};
-			case "secondary": return {
-				backgroundColor: n,
-				color: "#08060d"
-			};
-			case "outline": return {
-				borderColor: "#e5e4e7",
-				backgroundColor: "transparent",
-				color: "#08060d",
-				"--hover-bg": r,
-				"--hover-border": i,
-				"--tw-ring-color": a
-			};
-			default: return {
-				backgroundColor: "transparent",
-				color: "#08060d",
-				"--hover-bg": r,
-				"--tw-ring-color": a
-			};
-		}
-	}, [s, e]), u = s.enabled && e === "primary" ? "hover:brightness-110" : s.enabled && e === "outline" ? "hover:bg-[var(--hover-bg)] hover:border-[var(--hover-border)]" : s.enabled ? "hover:bg-[var(--hover-bg)]" : "";
-	return /* @__PURE__ */ c("button", {
-		ref: o,
-		className: [
-			"inline-flex items-center justify-center font-medium rounded-lg",
-			"transition-all duration-200 ease-in-out",
-			"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-			"disabled:opacity-50 disabled:pointer-events-none",
-			"select-none",
-			h[e],
-			g[t],
-			u,
-			n
-		].join(" "),
-		style: {
-			...l,
-			...r
-		},
-		...i
-	});
-});
-//#endregion
 //#region src/utils/utils.ts
-function y(e, t) {
+function _(e, t) {
 	let n = e.replace("#", ""), r = n.length === 3 ? n.split("").map((e) => e + e).join("") : n, i = parseInt(r, 16);
 	return [
 		i >> 16 & 255,
@@ -191,55 +131,55 @@ function y(e, t) {
 		t
 	];
 }
-function b(e) {
+function v(e) {
 	return `rgba(${e[0]}, ${e[1]}, ${e[2]}, ${e[3]})`;
 }
 //#endregion
 //#region src/components/Header.tsx
-var x = {
+var y = {
 	default: "",
 	sticky: "sticky top-0 z-50",
 	hide: "transition-transform duration-300 absolute top-0 left-0"
-}, S = {
+}, b = {
 	default: "",
 	blur: "bg-white/10 backdrop-blur-sm"
-}, C = t(function({ behaviour: e = "default", className: t = "", style: n, children: r, variant: s = "default", ...l }, u) {
-	let d = m(), [f, p] = o(!1), h = e === "hide" && f ? "-100%" : "0";
-	i(() => {
+}, x = n(function({ behaviour: e = "default", className: t = "", style: n, children: r, variant: i = "default", ...s }, l) {
+	let d = g(), [f, p] = c(!1), m = e === "hide" && f ? "-100%" : "0";
+	a(() => {
 		if (e !== "hide") return;
 		let t = () => {
 			p(window.scrollY > 10);
 		};
 		return t(), window.addEventListener("scroll", t, { passive: !0 }), () => window.removeEventListener("scroll", t);
 	}, [e]);
-	let g = a(() => {
+	let h = o(() => {
 		if (d.enabled) return {
 			backgroundColor: d.darkMode ? d.darkColors.header.background : d.colors.header.background,
 			borderBottom: `1px solid ${d.darkMode ? d.darkColors.header.border : d.colors.header.border}`,
 			color: d.darkMode ? d.darkColors.text : d.colors.text
 		};
 	}, [d]);
-	return /* @__PURE__ */ c("header", {
-		ref: u,
+	return /* @__PURE__ */ u("header", {
+		ref: l,
 		className: [
 			"w-full h-16 px-12 py-2 flex items-center justify-between shadow-md shadow-gray-500/25",
-			x[e],
-			S[s],
+			y[e],
+			b[i],
 			t
 		].join(" "),
 		style: {
-			...g,
+			...h,
 			...n,
-			transform: `translateY(${h})`
+			transform: `translateY(${m})`
 		},
-		...l,
+		...s,
 		children: r
 	});
-}), w = t(function({ className: e = "", style: t, alt: n = "", darkSrc: r, ...i }, a) {
-	let o = m().darkMode && r ? r : i.src;
-	return /* @__PURE__ */ c("div", {
+}), S = n(function({ className: e = "", style: t, alt: n = "", darkSrc: r, ...i }, a) {
+	let o = g().darkMode && r ? r : i.src;
+	return /* @__PURE__ */ u("div", {
 		className: "h-full flex items-center justify-center shrink-0",
-		children: /* @__PURE__ */ c("img", {
+		children: /* @__PURE__ */ u("img", {
 			ref: a,
 			alt: n,
 			className: "h-full max-h-12 w-auto object-contain",
@@ -251,26 +191,26 @@ var x = {
 			src: o
 		})
 	});
-}), T = t(function({ className: e = "", style: t, children: n, ...r }, i) {
-	let o = m(), s = a(() => {
-		if (!o.enabled) return;
-		let e = y(o.colors.primary, .5);
+}), C = n(function({ className: e = "", style: t, children: n, ...r }, i) {
+	let a = g(), s = o(() => {
+		if (!a.enabled) return;
+		let e = _(a.colors.primary, .5);
 		return {
-			color: o.darkMode ? "#e8e4f0" : "#08060d",
+			color: a.darkMode ? "#e8e4f0" : "#08060d",
 			"--tw-ring-color": e,
-			"--hover-color": o.colors.primary
+			"--hover-color": a.colors.primary
 		};
-	}, [o]), l = o.enabled ? "hover:text-[var(--hover-color)]" : "";
-	return /* @__PURE__ */ c("a", {
+	}, [a]), c = a.enabled ? "hover:text-[var(--hover-color)]" : "";
+	return /* @__PURE__ */ u("a", {
 		ref: i,
 		className: [
 			"inline-flex items-center justify-center",
 			"px-3 py-2 text-sm font-medium",
-			o.enabled ? "" : "text-text-h hover:text-accent",
-			l,
+			a.enabled ? "" : "text-text-h hover:text-accent",
+			c,
 			"transition-colors duration-200 ease-in-out",
 			"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-md",
-			o.enabled ? "" : "focus-visible:ring-accent/50",
+			a.enabled ? "" : "focus-visible:ring-accent/50",
 			"select-none",
 			e
 		].join(" "),
@@ -281,10 +221,10 @@ var x = {
 		...r,
 		children: n
 	});
-}), E = Object.assign(C, {
-	Logo: w,
-	NavButton: T
-}), D = {
+}), w = Object.assign(x, {
+	Logo: S,
+	NavButton: C
+}), T = {
 	"dots-grid": (e, t) => ({
 		backgroundImage: `radial-gradient(${e} 1.5px, transparent 1.5px)`,
 		backgroundSize: `${t}px ${t}px`
@@ -349,7 +289,7 @@ var x = {
 		backgroundImage: `linear-gradient(${e} 1px, transparent 1px)`,
 		backgroundSize: `${t}px ${t}px`
 	})
-}, O = {
+}, E = {
 	"fade-in": () => ({
 		maskImage: "\n      radial-gradient(\n        ellipse at center,\n        rgba(0, 0, 0, 0.7) 0%,\n        rgba(0, 0, 0, 0) 75%\n      )\n    ",
 		WebkitMaskImage: "\n      radial-gradient(\n        ellipse at center,\n        rgba(0, 0, 0, 0.7) 0%,\n        rgba(0, 0, 0, 0) 75%\n      )\n    ",
@@ -367,29 +307,29 @@ var x = {
 		WebkitMaskRepeat: "no-repeat"
 	}),
 	none: () => ({})
-}, k = t(function({ variant: e = "dots-grid", mask: t = "none", color: n, size: r = 24, className: i = "", style: o, children: s, ...u }, d) {
-	let f = m(), p = a(() => n || (f.enabled ? b(y(f.colors.primary, .25)) : "rgba(170, 59, 255, 0.25)"), [n, f]), h = a(() => ({
-		...D[e](p, r),
-		...O[t]()
+}, D = n(function({ variant: e = "dots-grid", mask: t = "none", color: n, size: r = 24, className: i = "", style: a, children: s, ...c }, l) {
+	let f = g(), p = o(() => n || (f.enabled ? v(_(f.colors.primary, .25)) : "rgba(170, 59, 255, 0.25)"), [n, f]), m = o(() => ({
+		...T[e](p, r),
+		...E[t]()
 	}), [
 		e,
 		t,
 		p,
 		r
 	]);
-	return /* @__PURE__ */ l("div", {
-		ref: d,
+	return /* @__PURE__ */ d("div", {
+		ref: l,
 		className: ["w-full h-full relative overflow-hidden flex flex-col", i].join(" "),
-		style: o,
-		...u,
-		children: [/* @__PURE__ */ c("div", {
+		style: a,
+		...c,
+		children: [/* @__PURE__ */ u("div", {
 			"aria-hidden": !0,
 			className: "absolute inset-0 -z-10 pointer-events-none",
-			style: h
+			style: m
 		}), s]
 	});
-}), A = t(function({ variant: e = "line", orientation: t = "horizontal", color: n, thickness: r = 1, spacing: i = 16, className: o = "", style: s, ...l }, u) {
-	let d = m(), f = a(() => n || (d.enabled && d.darkMode ? "#2a2535" : "#e5e4e7"), [n, d]), p = t === "horizontal";
+}), O = n(function({ variant: e = "line", orientation: t = "horizontal", color: n, thickness: r = 1, spacing: i = 16, className: a = "", style: s, ...c }, l) {
+	let d = g(), f = o(() => n || (d.enabled && d.darkMode ? "#2a2535" : "#e5e4e7"), [n, d]), p = t === "horizontal";
 	if (e === "point") {
 		let e = p ? {
 			paddingTop: i,
@@ -398,19 +338,19 @@ var x = {
 			paddingLeft: i,
 			paddingRight: i
 		};
-		return /* @__PURE__ */ c("div", {
-			ref: u,
+		return /* @__PURE__ */ u("div", {
+			ref: l,
 			className: [
 				"flex items-center justify-center shrink-0",
 				p ? "w-full" : "h-full",
-				o
+				a
 			].join(" "),
 			style: {
 				...e,
 				...s
 			},
-			...l,
-			children: /* @__PURE__ */ c("span", {
+			...c,
+			children: /* @__PURE__ */ u("span", {
 				"aria-hidden": !0,
 				className: "rounded-full shrink-0",
 				style: {
@@ -421,7 +361,7 @@ var x = {
 			})
 		});
 	}
-	let h = p ? {
+	let m = p ? {
 		height: r,
 		backgroundColor: f,
 		marginTop: i,
@@ -432,197 +372,383 @@ var x = {
 		marginLeft: i,
 		marginRight: i
 	};
-	return /* @__PURE__ */ c("div", {
-		ref: u,
+	return /* @__PURE__ */ u("div", {
+		ref: l,
 		role: "separator",
 		"aria-orientation": t,
 		className: [
 			"shrink-0",
 			p ? "w-full" : "h-full",
-			o
+			a
 		].join(" "),
 		style: {
-			...h,
+			...m,
 			...s
 		},
-		...l
+		...c
 	});
-}), j = {
-	sm: "h-8 px-3 text-sm",
-	md: "h-10 px-4 text-base",
-	lg: "h-12 px-5 text-lg"
-}, M = {
-	sm: "pl-9 pr-3",
-	md: "pl-11 pr-4",
-	lg: "pl-13 pr-5"
-}, N = {
-	sm: "pl-3 pr-9",
-	md: "pl-4 pr-11",
-	lg: "pl-5 pr-13"
-}, P = {
-	sm: "pl-9 pr-9",
-	md: "pl-11 pr-11",
-	lg: "pl-13 pr-13"
-}, F = {
-	sm: "w-4 h-4 left-2.5",
-	md: "w-5 h-5 left-3",
-	lg: "w-6 h-6 left-4"
-}, I = {
-	sm: "w-4 h-4 right-2.5",
-	md: "w-5 h-5 right-3",
-	lg: "w-6 h-6 right-4"
+}), k = n(function({ className: e = "", style: t, children: n, ...r }, i) {
+	let a = g(), s = o(() => ({
+		borderColor: a.darkMode ? a.darkColors.border : a.colors.border,
+		backgroundColor: a.darkMode ? a.darkColors.background : a.colors.background
+	}), [a]);
+	return /* @__PURE__ */ u("div", {
+		ref: i,
+		...r,
+		className: [e, "p-2 rounded-md shadow-md bg-white border"].join(" "),
+		style: {
+			...t,
+			...s
+		},
+		children: n
+	});
+}), A = t(null);
+function j({ initialValues: e, onSubmit: t, children: n }) {
+	let [r, i] = c(e), [a, o] = c(null), [s, l] = c(!1), d = (e) => {
+		if (e.preventDefault(), a) {
+			let e = Object.keys(a).some((e) => {
+				let t = a[e], n = r[e];
+				return !t.validate(n).valid;
+			});
+			t(r, e);
+		} else t(r, !1);
+	};
+	return /* @__PURE__ */ u(A.Provider, {
+		value: {
+			initialValues: e,
+			values: r,
+			setValues: i,
+			isSubmitting: s,
+			validators: a,
+			setValidators: o,
+			setIsSubmitting: l,
+			handleSubmit: d,
+			reset: () => {
+				i(e);
+			}
+		},
+		children: /* @__PURE__ */ u("form", {
+			onSubmit: d,
+			children: n
+		})
+	});
+}
+function M() {
+	let e = i(A);
+	if (!e) throw Error("useForm must be used within a FormProvider");
+	return e;
+}
+//#endregion
+//#region src/components/Input.tsx
+var N = {
+	default: "border border-gray-300 rounded-md p-2",
+	filled: "bg-gray-100 border border-gray-300 rounded-md p-2",
+	underline: "border-b border-gray-300 p-2"
+}, P = n(function({ variant: e = "default", label: t, ...n }, r) {
+	return /* @__PURE__ */ d("div", {
+		className: "w-full",
+		children: [t && /* @__PURE__ */ u("label", {
+			htmlFor: n.id,
+			className: "block text-sm font-bold mb-1 mt-2 text-gray-700",
+			children: t
+		}), /* @__PURE__ */ u("input", {
+			ref: r,
+			...n,
+			className: `mb-4 last:mb-0 block w-full ${N[e]} focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm`
+		})]
+	});
+});
+//#endregion
+//#region src/hooks/useDebounce.tsx
+function F(e, t) {
+	let n = s(e), i = s(null);
+	a(() => {
+		n.current = e;
+	}, [e]);
+	let o = r((...e) => {
+		i.current !== null && clearTimeout(i.current), i.current = setTimeout(() => {
+			i.current = null, n.current(...e);
+		}, t);
+	}, [t]);
+	return a(() => () => {
+		i.current !== null && clearTimeout(i.current);
+	}, []), o;
+}
+//#endregion
+//#region src/components/UnicornialInput.tsx
+var I = n(function({ variant: t = "default", debounce: n = 300, label: r, name: i, ...o }, s) {
+	let { values: c, setValues: f, isSubmitting: p, setValidators: m } = M();
+	a(() => {
+		i && o.validator && m((e) => ({
+			...e ?? {},
+			[i]: o.validator
+		}));
+	}, [
+		i,
+		o.validator,
+		m
+	]);
+	let [h, g] = e.useState(""), _ = F((e) => {
+		v(e.target.value), o.onChange && o.onChange(e);
+	}, n || 300), v = (e) => {
+		if (o.validator) {
+			let t = o.validator.validate(e, (e) => f({
+				...c,
+				[i]: e
+			}));
+			t.valid ? g("") : g(t.message);
+		}
+	}, y = (e) => {
+		v(e.target.value), o.onBlur && o.onBlur(e);
+	}, b = (e) => {
+		i && f({
+			...c,
+			[i]: e.target.value
+		}), _(e);
+	};
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(P, {
+		variant: t,
+		label: r,
+		ref: s,
+		value: i && (c[i] || ""),
+		disabled: p,
+		...o,
+		onChange: b,
+		onBlur: y
+	}), h && /* @__PURE__ */ u("p", {
+		className: "text-sm text-red-500 mt-1",
+		children: h
+	})] });
+}), L = {
+	primary: "bg-accent text-white hover:bg-accent/90 focus-visible:ring-accent/50",
+	secondary: "bg-code-bg text-text-h hover:bg-code-bg/80 focus-visible:ring-code-bg/50",
+	outline: "border border-border bg-transparent text-text-h hover:bg-accent-bg hover:border-accent-border focus-visible:ring-accent/50",
+	ghost: "bg-transparent text-text-h hover:bg-accent-bg focus-visible:ring-accent/50"
+}, R = {
+	sm: "px-3 py-1.5 text-sm gap-1.5",
+	md: "px-5 py-2.5 text-base gap-2",
+	lg: "px-7 py-3 text-lg gap-2.5"
 };
-function L(e, t) {
+function z(e, t) {
 	let n = e.replace("#", ""), r = n.length === 3 ? n.split("").map((e) => e + e).join("") : n, i = parseInt(r, 16);
 	return `rgba(${i >> 16 & 255}, ${i >> 8 & 255}, ${i & 255}, ${t})`;
 }
-var R = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, leftIcon: r, rightIcon: i, className: o = "", wrapperClassName: s = "", style: u, disabled: d, ...f }, p) {
-	let h = m(), g = a(() => {
-		if (!h.enabled) return;
-		let t = h.colors.primary, r = h.darkMode ? "#2a2535" : "#e5e4e7", i = h.darkMode ? "#14111f" : "#f5f5f7", a = "#ef4444", o = { borderRadius: e === "underline" ? 0 : 8 };
+var B = n(function({ variant: e = "primary", size: t = "md", className: n = "", style: r, ...i }, a) {
+	let s = g(), c = o(() => {
+		if (!s.enabled) return;
+		let t = s.colors.primary, n = s.colors.secondary, r = z(t, .1), i = z(t, .5), a = z(t, .5);
 		switch (e) {
-			case "filled": return {
-				...o,
-				backgroundColor: i,
-				borderBottom: `2px solid ${n ? a : "transparent"}`,
-				"--focus-border": n ? a : t,
-				"--ring-color": L(n ? a : t, .5)
+			case "primary": return {
+				backgroundColor: t,
+				color: "#fff",
+				"--tw-ring-color": a
 			};
-			case "underline": return {
-				...o,
+			case "secondary": return {
+				backgroundColor: n,
+				color: "#08060d"
+			};
+			case "outline": return {
+				borderColor: "#e5e4e7",
 				backgroundColor: "transparent",
-				borderBottom: `1.5px solid ${n ? a : r}`,
-				"--focus-border": n ? a : t,
-				"--ring-color": L(n ? a : t, .5)
+				color: "#08060d",
+				"--hover-bg": r,
+				"--hover-border": i,
+				"--tw-ring-color": a
 			};
 			default: return {
-				...o,
-				backgroundColor: h.darkMode ? "#0b0912" : "#ffffff",
-				border: `1px solid ${n ? a : r}`,
-				"--focus-border": n ? a : t,
-				"--ring-color": L(n ? a : t, .5)
+				backgroundColor: "transparent",
+				color: "#08060d",
+				"--hover-bg": r,
+				"--tw-ring-color": a
 			};
 		}
-	}, [
-		h,
-		e,
-		n
-	]), _ = a(() => {
-		if (h.enabled) return e === "underline" ? "focus-within:border-b-[2px] focus-within:border-b-[var(--focus-border)]" : "focus-within:ring-2 focus-within:ring-[var(--ring-color)] focus-within:ring-offset-0 focus-within:border-[var(--focus-border)]";
-		if (e === "underline") return n ? "border-b-2 border-b-red-500 focus-within:border-b-accent" : "border-b border-border focus-within:border-b-2 focus-within:border-b-accent";
-		let t = "focus-within:ring-2 focus-within:ring-accent/50 focus-within:ring-offset-0";
-		switch (e) {
-			case "filled": return n ? `bg-code-bg border-b-2 border-b-red-500 ${t} focus-within:border-b-accent` : `bg-code-bg border-b-2 border-b-transparent ${t} focus-within:border-b-accent`;
-			default: return n ? `bg-bg border border-red-500 rounded-lg ${t} focus-within:border-accent` : `bg-bg border border-border rounded-lg ${t} focus-within:border-accent`;
-		}
-	}, [
-		h,
-		e,
-		n
-	]), v = r && i ? P[t] : r ? M[t] : i ? N[t] : j[t], y = e === "underline" ? "bg-transparent rounded-none" : "rounded-lg", b = a(() => h.enabled ? {
-		color: h.darkMode ? "#e8e4f0" : "#08060d",
-		"--placeholder-color": L(h.darkMode ? "#908a9e" : "#706a7c", 1),
-		backgroundColor: "transparent"
-	} : void 0, [h]), x = h.enabled ? "placeholder:text-[color:var(--placeholder-color)]" : "placeholder:text-text-muted";
-	return /* @__PURE__ */ l("div", {
+	}, [s, e]), l = s.enabled && e === "primary" ? "hover:brightness-110" : s.enabled && e === "outline" ? "hover:bg-[var(--hover-bg)] hover:border-[var(--hover-border)]" : s.enabled ? "hover:bg-[var(--hover-bg)]" : "";
+	return /* @__PURE__ */ u("button", {
+		ref: a,
 		className: [
-			"relative w-full flex items-center",
-			_,
-			d ? "opacity-50 cursor-not-allowed" : "",
-			s
+			"inline-flex items-center justify-center font-medium rounded-lg",
+			"transition-all duration-200 ease-in-out",
+			"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+			"disabled:opacity-50 disabled:pointer-events-none",
+			"select-none",
+			L[e],
+			R[t],
+			l,
+			n
 		].join(" "),
-		style: g,
-		children: [
-			r && /* @__PURE__ */ c("span", {
-				"aria-hidden": !0,
-				className: ["absolute text-text-muted pointer-events-none shrink-0", F[t]].join(" "),
-				children: r
-			}),
-			/* @__PURE__ */ c("input", {
-				ref: p,
-				disabled: d,
-				className: [
-					"w-full h-full outline-none bg-transparent font-normal",
-					"transition-all duration-200 ease-in-out",
-					"disabled:cursor-not-allowed",
-					v,
-					y,
-					x,
-					o
-				].join(" "),
-				style: {
-					...b,
-					...u
-				},
-				...f
-			}),
-			i && /* @__PURE__ */ c("span", {
-				"aria-hidden": !0,
-				className: ["absolute text-text-muted pointer-events-none shrink-0", I[t]].join(" "),
-				children: i
-			})
-		]
+		style: {
+			...c,
+			...r
+		},
+		...i
 	});
-}), z = (e) => typeof e == "string" && e.trim() !== "" && !isNaN(Number(e)), B = (e) => typeof e == "number" ? isNaN(e) ? null : e : z(e) ? Number(e) : null, V = {
-	email: () => (e) => {
-		let t = String(e ?? "");
-		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t) ? {
+}), V = ({ children: e }) => {
+	let [t, n] = c(!1);
+	return a(() => {
+		let e = () => {
+			let e = window.innerHeight > window.innerWidth;
+			n(e);
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), t ? /* @__PURE__ */ u(l, { children: e }) : null;
+}, H = ({ children: e }) => {
+	let [t, n] = c(!1);
+	return a(() => {
+		let e = () => {
+			let e = window.innerHeight > window.innerWidth;
+			n(!e);
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), t ? /* @__PURE__ */ u(l, { children: e }) : null;
+}, U = {
+	required: (e) => (t) => String(t ?? "").trim() === "" ? {
+		valid: !1,
+		message: e || "Este campo es obligatorio"
+	} : {
+		valid: !0,
+		message: ""
+	},
+	onlyNumbers: (e) => (t) => {
+		let n = String(t ?? "");
+		return /^\d+$/.test(n) ? {
 			valid: !0,
 			message: ""
 		} : {
 			valid: !1,
-			message: "El valor no es un correo válido"
+			message: e || "Debe contener solo números"
 		};
 	},
-	onlyNumbers: () => (e) => {
-		let t = String(e ?? "");
-		return /^\d+$/.test(t) ? {
+	min: (e, t) => (n) => {
+		if (isNaN(e)) throw Error("El valor debe ser un número");
+		return Number(n) >= e ? {
 			valid: !0,
 			message: ""
 		} : {
 			valid: !1,
-			message: "El valor debe contener solo números"
+			message: t || `El valor debe ser mayor o igual a ${e}`
 		};
 	},
-	min: (e) => (t) => {
-		let n = B(t);
-		return n === null ? String(t ?? "").length >= e ? {
+	max: (e, t) => (n) => {
+		if (isNaN(e)) throw Error("El valor debe ser un número");
+		return Number(n) <= e ? {
 			valid: !0,
 			message: ""
 		} : {
 			valid: !1,
-			message: `La longitud debe ser al menos ${e}`
-		} : n >= e ? {
+			message: t || `El valor debe ser menor o igual a ${e}`
+		};
+	},
+	positive: (e) => (t) => Number(t) > 0 ? {
+		valid: !0,
+		message: ""
+	} : {
+		valid: !1,
+		message: e || "El valor debe ser positivo"
+	},
+	negative: (e) => (t) => Number(t) < 0 ? {
+		valid: !0,
+		message: ""
+	} : {
+		valid: !1,
+		message: e || "El valor debe ser negativo"
+	},
+	integer: (e) => (t) => {
+		let n = Number(t);
+		return Number.isInteger(n) ? {
 			valid: !0,
 			message: ""
 		} : {
 			valid: !1,
-			message: `El valor debe ser mayor o igual a ${e}`
+			message: e || "El valor debe ser un número entero"
 		};
 	},
-	max: (e) => (t) => {
-		let n = B(t);
-		return n === null ? String(t ?? "").length <= e ? {
+	round: () => (e) => {
+		let t = Number(e);
+		return {
+			valid: !0,
+			message: Math.round(t).toString()
+		};
+	},
+	truncate: () => (e) => {
+		let t = Number(e);
+		return {
+			valid: !0,
+			message: Math.trunc(t).toString()
+		};
+	},
+	email: (e) => (t) => {
+		let n = String(t ?? "");
+		return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(n) ? {
 			valid: !0,
 			message: ""
 		} : {
 			valid: !1,
-			message: `La longitud debe ser como máximo ${e}`
-		} : n <= e ? {
+			message: e || "Correo invalido"
+		};
+	},
+	minLength: (e, t) => (n) => {
+		if (isNaN(e)) throw Error("El valor debe ser un número");
+		return String(n ?? "").length >= e ? {
+			valid: !0,
+			message: ""
+		} : {
+			valid: !1,
+			message: t || `El valor debe tener al menos ${e} caracteres`
+		};
+	},
+	maxLength: (e, t) => (n) => {
+		if (isNaN(e)) throw Error("El valor debe ser un número");
+		return String(n ?? "").length <= e ? {
+			valid: !0,
+			message: ""
+		} : {
+			valid: !1,
+			message: t || `El valor debe tener como máximo ${e} caracteres`
+		};
+	},
+	lowercase: () => (e) => ({
+		valid: !0,
+		message: String(e ?? "").toLowerCase()
+	}),
+	uppercase: () => (e) => ({
+		valid: !0,
+		message: String(e ?? "").toUpperCase()
+	}),
+	regex: (e, t) => (n) => {
+		let r = String(n ?? "");
+		return e.test(r) ? {
 			valid: !0,
 			message: ""
 		} : {
 			valid: !1,
-			message: `El valor debe ser menor o igual a ${e}`
+			message: t || "El valor no coincide con el patrón"
 		};
+	},
+	trim: () => (e) => ({
+		valid: !0,
+		message: String(e ?? "").trim()
+	}),
+	minDate: (e, t) => (n) => new Date(String(n ?? "")) >= e ? {
+		valid: !0,
+		message: ""
+	} : {
+		valid: !1,
+		message: t || `La fecha debe ser posterior a ${e.toLocaleDateString()}`
+	},
+	maxDate: (e, t) => (n) => new Date(String(n ?? "")) <= e ? {
+		valid: !0,
+		message: ""
+	} : {
+		valid: !1,
+		message: t || `La fecha debe ser anterior a ${e.toLocaleDateString()}`
 	}
-}, H = class e {
+}, W = class e {
 	checks = [];
 	add(e) {
 		return this.checks.push(e), this;
 	}
-	static email() {
-		return new e().email();
+	static required() {
+		return new e().add(U.required());
 	}
 	static onlyNumbers() {
 		return new e().onlyNumbers();
@@ -633,63 +759,116 @@ var R = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 	static max(t) {
 		return new e().max(t);
 	}
-	email() {
-		return this.add(V.email());
+	static positive() {
+		return new e().add(U.positive());
+	}
+	static negative() {
+		return new e().add(U.negative());
+	}
+	static integer() {
+		return new e().add(U.integer());
+	}
+	static round() {
+		return new e().add(U.round());
+	}
+	static truncate() {
+		return new e().add(U.truncate());
+	}
+	static email() {
+		return new e().email();
+	}
+	static minLength(t) {
+		return new e().minLength(t);
+	}
+	static maxLength(t) {
+		return new e().maxLength(t);
+	}
+	static lowercase() {
+		return new e().add(U.lowercase());
+	}
+	static uppercase() {
+		return new e().add(U.uppercase());
+	}
+	static trim() {
+		return new e().add(U.trim());
+	}
+	static regex(t, n) {
+		return new e().add(U.regex(t, n || "Valor inválido"));
+	}
+	static minDate(t) {
+		return new e().add(U.minDate(t));
+	}
+	static maxDate(t) {
+		return new e().add(U.maxDate(t));
+	}
+	required() {
+		return this.add(U.required());
 	}
 	onlyNumbers() {
-		return this.add(V.onlyNumbers());
+		return this.add(U.onlyNumbers());
 	}
 	min(e) {
-		return this.add(V.min(e));
+		return this.add(U.min(e));
 	}
 	max(e) {
-		return this.add(V.max(e));
+		return this.add(U.max(e));
+	}
+	positive() {
+		return this.add(U.positive());
+	}
+	negative() {
+		return this.add(U.negative());
+	}
+	integer() {
+		return this.add(U.integer());
 	}
-	validate(e) {
-		for (let t of this.checks) {
-			let n = t(e);
-			if (!n.valid) return n;
+	round() {
+		return this.add(U.round());
+	}
+	truncate() {
+		return this.add(U.truncate());
+	}
+	email() {
+		return this.add(U.email());
+	}
+	minLength(e) {
+		return this.add(U.minLength(e));
+	}
+	maxLength(e) {
+		return this.add(U.maxLength(e));
+	}
+	lowercase() {
+		return this.add(U.lowercase());
+	}
+	uppercase() {
+		return this.add(U.uppercase());
+	}
+	trim() {
+		return this.add(U.trim());
+	}
+	regex(e, t) {
+		return this.add(U.regex(e, t || "Valor inválido"));
+	}
+	minDate(e) {
+		return this.add(U.minDate(e));
+	}
+	maxDate(e) {
+		return this.add(U.maxDate(e));
+	}
+	validate(e, t) {
+		let n = e;
+		for (let e of this.checks) {
+			let r = e(n);
+			if (!r.valid) return r;
+			r.message && (n = r.message, t && (n = t(n)));
 		}
 		return {
 			valid: !0,
 			message: ""
 		};
 	}
-}, U = ({ children: e }) => {
-	let [t, n] = o(!1);
-	return i(() => {
-		let e = () => {
-			let e = window.innerHeight > window.innerWidth;
-			n(e);
-		};
-		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, []), t ? /* @__PURE__ */ c(s, { children: e }) : null;
-}, W = ({ children: e }) => {
-	let [t, n] = o(!1);
-	return i(() => {
-		let e = () => {
-			let e = window.innerHeight > window.innerWidth;
-			n(!e);
-		};
-		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, []), t ? /* @__PURE__ */ c(s, { children: e }) : null;
-}, G = t(function({ className: e = "", style: t, children: n, ...r }, i) {
-	let o = m(), s = a(() => ({
-		borderColor: o.darkMode ? o.darkColors.border : o.colors.border,
-		backgroundColor: o.darkMode ? o.darkColors.background : o.colors.background
-	}), [o]);
-	return /* @__PURE__ */ c("div", {
-		ref: i,
-		...r,
-		className: ["px-2 py-1 rounded-xs shadow-md bg-white border", e].join(" "),
-		style: {
-			...t,
-			...s
-		},
-		children: n
-	});
-});
+};
 //#endregion
-export { k as Background, v as Button, W as DesktopOnly, E as Header, R as Input, U as MobileOnly, A as Separator, G as Surface, p as ThemeProvider, H as Validate, u as themeConfig, m as useTheme, V as validators };
+export { D as Background, B as Button, H as DesktopOnly, j as Form, w as Header, P as Input, V as MobileOnly, O as Separator, k as Surface, h as ThemeProvider, I as UnicornialInput, W as Validate, f as themeConfig, F as useDebounce, M as useForm, g as useTheme, U as validators };
 
 //# sourceMappingURL=unicornial-ui.es.js.map