unicornial-ui 0.0.7 → 0.0.9

package/dist/unicornial-ui.es.js

@@ -1,43 +1,71 @@
 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 { jsx as s, jsxs as c } from "react/jsx-runtime";
-var l = {
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+var u = {
 	colors: {
 		primary: "#aa3bff",
-		secondary: "#f4f3ec"
+		secondary: "#f4f3ec",
+		text: "#000000",
+		background: "#ffffff",
+		border: "#e5e4e7",
+		header: {
+			background: "#ffffff",
+			border: "#e5e4e7"
+		}
+	},
+	darkColors: {
+		primary: "#aa3bff",
+		secondary: "#f4f3ec",
+		text: "#ffffff",
+		background: "#0b0912",
+		border: "#2a2535",
+		header: {
+			background: "#0b0912",
+			border: "#2a2535"
+		}
 	},
 	darkMode: !1,
 	text: {
 		title: "text-3xl font-bold text-text-h",
 		subtitle: "text-xl font-semibold text-text-h",
-		normal: "text-base font-normal text-text"
+		normal: "text-base font-normal text-text",
+		color: "text-text",
+		darkColor: "text-text-d"
 	}
-}, u = e(null), d = (e, t) => {
+}, d = (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);
 	}
 	return n;
-};
-function f({ children: e, config: t }) {
-	let r = a(() => d(l, t ?? {}), [t]), [c, f] = o(r.colors), [p, m] = o(r.darkMode), [h, g] = o(r.text), _ = n((e) => {
-		f((t) => ({
+}, 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) => ({
 			...t,
 			...e
 		}));
-	}, []), v = n((e) => {
-		m(e);
-	}, []), y = n((e) => {
-		g((t) => ({
+	}, []), b = n((e) => {
+		m((t) => ({
 			...t,
 			...e
 		}));
-	}, []), b = n((e) => {
-		e.colors && f((t) => ({
+	}, []), x = n((e) => {
+		g(e);
+	}, []), S = n((e) => {
+		v((t) => ({
+			...t,
+			...e
+		}));
+	}, []), C = n((e) => {
+		e.colors && l((t) => ({
 			...t,
 			...e.colors
-		})), e.darkMode !== void 0 && m(e.darkMode), e.text && g((t) => ({
+		})), e.darkColors && m((t) => ({
+			...t,
+			...e.darkColors
+		})), e.darkMode !== void 0 && g(e.darkMode), e.text && v((t) => ({
 			...t,
 			...e.text
 		}));
@@ -45,63 +73,67 @@ function f({ children: e, config: t }) {
 	i(() => {
 		if (typeof document > "u") return;
 		let e = document.documentElement;
-		p ? e.classList.add("dark") : e.classList.remove("dark"), e.style.setProperty("--theme-primary", c.primary), e.style.setProperty("--theme-secondary", c.secondary);
-	}, [c, p]);
-	let x = a(() => ({
+		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(() => ({
 		enabled: !0,
-		colors: c,
-		darkMode: p,
-		text: h,
-		setColors: _,
-		setDarkMode: v,
-		setText: y,
-		setTheme: b
+		colors: s,
+		darkColors: p,
+		darkMode: h,
+		text: _,
+		setColors: y,
+		setDarkColors: b,
+		setDarkMode: x,
+		setText: S,
+		setTheme: C
 	}), [
-		c,
-		p,
+		s,
 		h,
 		_,
-		v,
 		y,
-		b
+		x,
+		S,
+		C
 	]);
-	return /* @__PURE__ */ s(u.Provider, {
-		value: x,
+	return /* @__PURE__ */ c(f.Provider, {
+		value: w,
 		children: e
 	});
 }
-function p() {
-	return r(u) || {
+function m() {
+	return r(f) || {
 		enabled: !1,
-		colors: l.colors,
-		darkMode: l.darkMode,
-		text: l.text,
+		colors: u.colors,
+		darkColors: u.darkColors,
+		darkMode: u.darkMode,
+		text: u.text,
 		setColors: () => {},
 		setDarkMode: () => {},
 		setText: () => {},
-		setTheme: () => {}
+		setTheme: () => {},
+		setDarkColors: () => {}
 	};
 }
 //#endregion
 //#region src/components/Button.tsx
-var m = {
+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"
-}, h = {
+}, 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 g(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 `rgba(${i >> 16 & 255}, ${i >> 8 & 255}, ${i & 255}, ${t})`;
 }
-var _ = t(function({ variant: e = "primary", size: t = "md", className: n = "", style: r, ...i }, o) {
-	let c = p(), l = a(() => {
-		if (!c.enabled) return;
-		let t = c.colors.primary, n = c.colors.secondary, r = g(t, .1), i = g(t, .5), a = g(t, .5);
+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,
@@ -127,8 +159,8 @@ var _ = t(function({ variant: e = "primary", size: t = "md", className: n = "",
 				"--tw-ring-color": a
 			};
 		}
-	}, [c, e]), u = c.enabled && e === "primary" ? "hover:brightness-110" : c.enabled && e === "outline" ? "hover:bg-[var(--hover-bg)] hover:border-[var(--hover-border)]" : c.enabled ? "hover:bg-[var(--hover-bg)]" : "";
-	return /* @__PURE__ */ s("button", {
+	}, [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",
@@ -136,8 +168,8 @@ var _ = t(function({ variant: e = "primary", size: t = "md", className: n = "",
 			"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 			"disabled:opacity-50 disabled:pointer-events-none",
 			"select-none",
-			m[e],
-			h[t],
+			h[e],
+			g[t],
 			u,
 			n
 		].join(" "),
@@ -147,73 +179,80 @@ var _ = t(function({ variant: e = "primary", size: t = "md", className: n = "",
 		},
 		...i
 	});
-}), v = {
-	default: "",
-	sticky: "sticky top-0 z-50",
-	blur: "sticky top-0 z-50 transition-all duration-300"
-};
+});
+//#endregion
+//#region src/utils/utils.ts
 function y(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})`;
+	return [
+		i >> 16 & 255,
+		i >> 8 & 255,
+		i & 255,
+		t
+	];
 }
-var b = t(function({ behaviour: e = "default", className: t = "", style: n, children: r, ...c }, l) {
-	let u = p(), [d, f] = o(!1);
+function b(e) {
+	return `rgba(${e[0]}, ${e[1]}, ${e[2]}, ${e[3]})`;
+}
+//#endregion
+//#region src/components/Header.tsx
+var x = {
+	default: "",
+	sticky: "sticky top-0 z-50",
+	hide: "transition-transform duration-300 absolute top-0 left-0"
+}, S = {
+	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(() => {
-		if (e !== "blur") return;
+		if (e !== "hide") return;
 		let t = () => {
-			f(window.scrollY > 0);
+			p(window.scrollY > 10);
 		};
 		return t(), window.addEventListener("scroll", t, { passive: !0 }), () => window.removeEventListener("scroll", t);
 	}, [e]);
-	let m = e === "blur" && d ? "backdrop-blur-md bg-bg/70 border-b border-border shadow" : e === "blur" ? "bg-bg" : "bg-bg border-b border-border", h = a(() => {
-		if (!u.enabled) return;
-		let t = u.darkMode ? "#0b0912" : "#ffffff", n = u.darkMode ? "#2a2535" : "#e5e4e7", r = y(u.darkMode ? "#0b0912" : "#ffffff", .7), i = d ? "rgba(0, 0, 0, 0.1) 0 4px 12px -2px" : void 0;
-		return e === "blur" && d ? {
-			backgroundColor: r,
-			borderBottom: `1px solid ${n}`,
-			boxShadow: i,
-			color: u.darkMode ? "#e8e4f0" : "#08060d"
-		} : {
-			backgroundColor: t,
-			borderBottom: e === "default" ? void 0 : `1px solid ${n}`,
-			color: u.darkMode ? "#e8e4f0" : "#08060d"
+	let g = a(() => {
+		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
 		};
-	}, [
-		u,
-		e,
-		d
-	]);
-	return /* @__PURE__ */ s("header", {
-		ref: l,
+	}, [d]);
+	return /* @__PURE__ */ c("header", {
+		ref: u,
 		className: [
-			"w-full px-6 py-4 flex items-center justify-between",
-			v[e],
-			m,
+			"w-full h-16 px-12 py-2 flex items-center justify-between shadow-md shadow-gray-500/25",
+			x[e],
+			S[s],
 			t
 		].join(" "),
 		style: {
-			...h,
-			...n
+			...g,
+			...n,
+			transform: `translateY(${h})`
 		},
-		...c,
+		...l,
 		children: r
 	});
-}), x = t(function({ className: e = "", style: t, alt: n = "", ...r }, i) {
-	return /* @__PURE__ */ s("div", {
+}), 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", {
 		className: "h-full flex items-center justify-center shrink-0",
-		children: /* @__PURE__ */ s("img", {
-			ref: i,
+		children: /* @__PURE__ */ c("img", {
+			ref: a,
 			alt: n,
-			className: "h-full max-h-[48px] w-auto object-contain",
+			className: "h-full max-h-12 w-auto object-contain",
 			style: {
 				aspectRatio: "auto",
 				...t
 			},
-			...r
+			...i,
+			src: o
 		})
 	});
-}), S = t(function({ className: e = "", style: t, children: n, ...r }, i) {
-	let o = p(), c = a(() => {
+}), 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);
 		return {
@@ -222,7 +261,7 @@ var b = t(function({ behaviour: e = "default", className: t = "", style: n, chil
 			"--hover-color": o.colors.primary
 		};
 	}, [o]), l = o.enabled ? "hover:text-[var(--hover-color)]" : "";
-	return /* @__PURE__ */ s("a", {
+	return /* @__PURE__ */ c("a", {
 		ref: i,
 		className: [
 			"inline-flex items-center justify-center",
@@ -236,99 +275,142 @@ var b = t(function({ behaviour: e = "default", className: t = "", style: n, chil
 			e
 		].join(" "),
 		style: {
-			...c,
+			...s,
 			...t
 		},
 		...r,
 		children: n
 	});
-}), C = Object.assign(b, {
-	Logo: x,
-	NavButton: S
-});
-//#endregion
-//#region src/components/Background.tsx
-function w(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 T = {
+}), E = Object.assign(C, {
+	Logo: w,
+	NavButton: T
+}), D = {
 	"dots-grid": (e, t) => ({
-		backgroundImage: `radial-gradient(${e} 1px, transparent 1px)`,
+		backgroundImage: `radial-gradient(${e} 1.5px, transparent 1.5px)`,
 		backgroundSize: `${t}px ${t}px`
 	}),
-	"isometric-dot-paper": (e, t) => ({
-		backgroundImage: `radial-gradient(${e} 1px, transparent 1px)`,
-		backgroundSize: `${t}px ${t * 1.732}px`,
-		backgroundPosition: `0 0, ${t / 2}px ${t * 1.732 / 2}px`
-	}),
-	paper: (e, t) => ({
-		backgroundImage: `linear-gradient(${e} 1px, transparent 1px), linear-gradient(90deg, ${e} 1px, transparent 1px)`,
-		backgroundSize: `${t}px ${t}px`
+	"dots-isometric": (e, t) => ({
+		backgroundImage: `
+    radial-gradient(circle, ${e} 1px, transparent 1px),
+    radial-gradient(circle, ${e} 1px, transparent 1px)
+  `,
+		backgroundSize: `${t}px ${t * .866}px`,
+		backgroundPosition: `
+    0 0,
+    ${t / 2}px ${t * .433}px
+  `
 	}),
-	"diamond-grid": (e, t) => ({
-		backgroundImage: `linear-gradient(45deg, ${e} 1px, transparent 1px), linear-gradient(-45deg, ${e} 1px, transparent 1px)`,
+	grid: (e, t) => ({
+		backgroundImage: `linear-gradient(${e} 2px, transparent 2px), linear-gradient(90deg, ${e} 2px, transparent 2px)`,
 		backgroundSize: `${t}px ${t}px`
 	}),
-	"paper-45": (e, t) => ({
-		backgroundImage: `linear-gradient(45deg, ${e} 1px, transparent 1px), linear-gradient(-45deg, ${e} 1px, transparent 1px)`,
+	diamond: (e, t) => {
+		let n = 2.2, r = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="${t}"
+         height="${t * .866}"
+         viewBox="0 0 ${t} ${t * .866}">
+      <polygon
+        points="
+          ${t / 2},0
+          ${t / 2 + n},${n}
+          ${t / 2},${n * 2}
+          ${t / 2 - n},${n}
+        "
+        fill="${e}"
+      />
+    </svg>
+  `;
+		return {
+			backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(r)}")`,
+			backgroundSize: `${t}px ${t * .866}px`
+		};
+	},
+	"grid-45": (e, t) => ({
+		backgroundImage: `
+    linear-gradient(
+      45deg,
+      transparent 49%,
+      ${e} 49%,
+      ${e} 51%,
+      transparent 51%
+    ),
+    linear-gradient(
+      -45deg,
+      transparent 49%,
+      ${e} 49%,
+      ${e} 51%,
+      transparent 51%
+    )
+  `,
 		backgroundSize: `${t}px ${t}px`
 	}),
 	lines: (e, t) => ({
 		backgroundImage: `linear-gradient(${e} 1px, transparent 1px)`,
 		backgroundSize: `${t}px ${t}px`
-	}),
-	"falling-stars": (e, t) => ({
-		backgroundImage: `
-      radial-gradient(${e} 1px, transparent 1px),
-      radial-gradient(${e} 1px, transparent 1px),
-      radial-gradient(${e} 1.5px, transparent 1.5px),
-      radial-gradient(${e} 1px, transparent 1px)
-    `,
-		backgroundSize: `${t * 5}px ${t * 5}px, ${t * 3}px ${t * 3}px, ${t * 7}px ${t * 7}px, ${t * 4}px ${t * 4}px`,
-		backgroundPosition: `0 0, ${t}px ${t * 2}px, ${t * 3}px ${t}px, ${t * 2}px ${t * 4}px`,
-		animation: "falling-stars 20s linear infinite"
 	})
-}, E = t(function({ variant: e = "dots-grid", color: t, size: n = 24, className: r = "", style: i, children: o, ...l }, u) {
-	let d = p(), f = a(() => t || (d.enabled ? w(d.colors.primary, .25) : "rgba(170, 59, 255, 0.25)"), [t, d]), m = a(() => T[e](f, n), [
+}, O = {
+	"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    ",
+		maskSize: "100% 100%",
+		WebkitMaskSize: "100% 100%",
+		maskRepeat: "no-repeat",
+		WebkitMaskRepeat: "no-repeat"
+	}),
+	"fade-out": () => ({
+		maskImage: "\n      radial-gradient(\n        ellipse at center,\n        rgba(0, 0, 0, 0) 40%,\n        rgba(0, 0, 0, 0.6) 100%\n      )\n    ",
+		WebkitMaskImage: "\n      radial-gradient(\n        ellipse at center,\n        rgba(0, 0, 0, 0) 40%,\n        rgba(0, 0, 0, 0.6) 100%\n      )\n    ",
+		maskSize: "100% 100%",
+		WebkitMaskSize: "100% 100%",
+		maskRepeat: "no-repeat",
+		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]()
+	}), [
 		e,
-		f,
-		n
+		t,
+		p,
+		r
 	]);
-	return /* @__PURE__ */ c("div", {
-		ref: u,
-		className: ["w-full h-full relative overflow-hidden", r].join(" "),
-		style: i,
-		...l,
-		children: [/* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ l("div", {
+		ref: d,
+		className: ["w-full h-full relative overflow-hidden flex flex-col", i].join(" "),
+		style: o,
+		...u,
+		children: [/* @__PURE__ */ c("div", {
 			"aria-hidden": !0,
 			className: "absolute inset-0 -z-10 pointer-events-none",
-			style: m
-		}), o]
+			style: h
+		}), s]
 	});
-}), D = t(function({ variant: e = "line", orientation: t = "horizontal", color: n, thickness: r = 1, spacing: i = 16, className: o = "", style: c, ...l }, u) {
-	let d = p(), f = a(() => n || (d.enabled && d.darkMode ? "#2a2535" : "#e5e4e7"), [n, d]), m = t === "horizontal";
+}), 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";
 	if (e === "point") {
-		let e = m ? {
+		let e = p ? {
 			paddingTop: i,
 			paddingBottom: i
 		} : {
 			paddingLeft: i,
 			paddingRight: i
 		};
-		return /* @__PURE__ */ s("div", {
+		return /* @__PURE__ */ c("div", {
 			ref: u,
 			className: [
 				"flex items-center justify-center shrink-0",
-				m ? "w-full" : "h-full",
+				p ? "w-full" : "h-full",
 				o
 			].join(" "),
 			style: {
 				...e,
-				...c
+				...s
 			},
 			...l,
-			children: /* @__PURE__ */ s("span", {
+			children: /* @__PURE__ */ c("span", {
 				"aria-hidden": !0,
 				className: "rounded-full shrink-0",
 				style: {
@@ -339,7 +421,7 @@ var T = {
 			})
 		});
 	}
-	let h = m ? {
+	let h = p ? {
 		height: r,
 		backgroundColor: f,
 		marginTop: i,
@@ -350,52 +432,52 @@ var T = {
 		marginLeft: i,
 		marginRight: i
 	};
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ c("div", {
 		ref: u,
 		role: "separator",
 		"aria-orientation": t,
 		className: [
 			"shrink-0",
-			m ? "w-full" : "h-full",
+			p ? "w-full" : "h-full",
 			o
 		].join(" "),
 		style: {
 			...h,
-			...c
+			...s
 		},
 		...l
 	});
-}), O = {
+}), j = {
 	sm: "h-8 px-3 text-sm",
 	md: "h-10 px-4 text-base",
 	lg: "h-12 px-5 text-lg"
-}, k = {
+}, M = {
 	sm: "pl-9 pr-3",
 	md: "pl-11 pr-4",
 	lg: "pl-13 pr-5"
-}, A = {
+}, N = {
 	sm: "pl-3 pr-9",
 	md: "pl-4 pr-11",
 	lg: "pl-5 pr-13"
-}, j = {
+}, P = {
 	sm: "pl-9 pr-9",
 	md: "pl-11 pr-11",
 	lg: "pl-13 pr-13"
-}, M = {
+}, F = {
 	sm: "w-4 h-4 left-2.5",
 	md: "w-5 h-5 left-3",
 	lg: "w-6 h-6 left-4"
-}, N = {
+}, I = {
 	sm: "w-4 h-4 right-2.5",
 	md: "w-5 h-5 right-3",
 	lg: "w-6 h-6 right-4"
 };
-function P(e, t) {
+function L(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 F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, leftIcon: r, rightIcon: i, className: o = "", wrapperClassName: l = "", style: u, disabled: d, ...f }, m) {
-	let h = p(), g = a(() => {
+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 };
 		switch (e) {
@@ -404,21 +486,21 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 				backgroundColor: i,
 				borderBottom: `2px solid ${n ? a : "transparent"}`,
 				"--focus-border": n ? a : t,
-				"--ring-color": P(n ? a : t, .5)
+				"--ring-color": L(n ? a : t, .5)
 			};
 			case "underline": return {
 				...o,
 				backgroundColor: "transparent",
 				borderBottom: `1.5px solid ${n ? a : r}`,
 				"--focus-border": n ? a : t,
-				"--ring-color": P(n ? a : t, .5)
+				"--ring-color": L(n ? a : t, .5)
 			};
 			default: return {
 				...o,
 				backgroundColor: h.darkMode ? "#0b0912" : "#ffffff",
 				border: `1px solid ${n ? a : r}`,
 				"--focus-border": n ? a : t,
-				"--ring-color": P(n ? a : t, .5)
+				"--ring-color": L(n ? a : t, .5)
 			};
 		}
 	}, [
@@ -437,27 +519,27 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 		h,
 		e,
 		n
-	]), v = r && i ? j[t] : r ? k[t] : i ? A[t] : O[t], y = e === "underline" ? "bg-transparent rounded-none" : "rounded-lg", b = a(() => h.enabled ? {
+	]), 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": P(h.darkMode ? "#908a9e" : "#706a7c", 1),
+		"--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__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		className: [
 			"relative w-full flex items-center",
 			_,
 			d ? "opacity-50 cursor-not-allowed" : "",
-			l
+			s
 		].join(" "),
 		style: g,
 		children: [
-			r && /* @__PURE__ */ s("span", {
+			r && /* @__PURE__ */ c("span", {
 				"aria-hidden": !0,
-				className: ["absolute text-text-muted pointer-events-none shrink-0", M[t]].join(" "),
+				className: ["absolute text-text-muted pointer-events-none shrink-0", F[t]].join(" "),
 				children: r
 			}),
-			/* @__PURE__ */ s("input", {
-				ref: m,
+			/* @__PURE__ */ c("input", {
+				ref: p,
 				disabled: d,
 				className: [
 					"w-full h-full outline-none bg-transparent font-normal",
@@ -474,14 +556,14 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 				},
 				...f
 			}),
-			i && /* @__PURE__ */ s("span", {
+			i && /* @__PURE__ */ c("span", {
 				"aria-hidden": !0,
-				className: ["absolute text-text-muted pointer-events-none shrink-0", N[t]].join(" "),
+				className: ["absolute text-text-muted pointer-events-none shrink-0", I[t]].join(" "),
 				children: i
 			})
 		]
 	});
-}), I = (e) => typeof e == "string" && e.trim() !== "" && !isNaN(Number(e)), L = (e) => typeof e == "number" ? isNaN(e) ? null : e : I(e) ? Number(e) : null, R = {
+}), 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) ? {
@@ -503,7 +585,7 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 		};
 	},
 	min: (e) => (t) => {
-		let n = L(t);
+		let n = B(t);
 		return n === null ? String(t ?? "").length >= e ? {
 			valid: !0,
 			message: ""
@@ -519,7 +601,7 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 		};
 	},
 	max: (e) => (t) => {
-		let n = L(t);
+		let n = B(t);
 		return n === null ? String(t ?? "").length <= e ? {
 			valid: !0,
 			message: ""
@@ -534,7 +616,7 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 			message: `El valor debe ser menor o igual a ${e}`
 		};
 	}
-}, z = class e {
+}, H = class e {
 	checks = [];
 	add(e) {
 		return this.checks.push(e), this;
@@ -552,16 +634,16 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 		return new e().max(t);
 	}
 	email() {
-		return this.add(R.email());
+		return this.add(V.email());
 	}
 	onlyNumbers() {
-		return this.add(R.onlyNumbers());
+		return this.add(V.onlyNumbers());
 	}
 	min(e) {
-		return this.add(R.min(e));
+		return this.add(V.min(e));
 	}
 	max(e) {
-		return this.add(R.max(e));
+		return this.add(V.max(e));
 	}
 	validate(e) {
 		for (let t of this.checks) {
@@ -573,8 +655,26 @@ var F = t(function({ variant: e = "default", Isize: t = "md", error: n = !1, lef
 			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;
 };
 //#endregion
-export { E as Background, _ as Button, C as Header, F as Input, D as Separator, f as ThemeProvider, z as Validate, l as themeConfig, p as useTheme, R as validators };
+export { k as Background, v as Button, W as DesktopOnly, E as Header, R as Input, U as MobileOnly, A as Separator, p as ThemeProvider, H as Validate, u as themeConfig, m as useTheme, V as validators };
 
 //# sourceMappingURL=unicornial-ui.es.js.map