@jonapin006/tiger 1.0.34 → 1.0.36

package/dist/tiger.es.js

@@ -57,7 +57,11 @@ var v = /* @__PURE__ */ function(e) {
 				xlarge: y.Large
 			},
 			baseTypography: "text-inherit leading-none font-black uppercase tracking-widest whitespace-nowrap",
-			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0 w-fit"
+			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0 w-fit",
+			layout: {
+				container: "inline-flex items-center justify-center gap-2",
+				icon: "w-[1.2em] h-[1.2em] shrink-0"
+			}
 		},
 		iconButtons: {
 			small: {
@@ -671,7 +675,7 @@ var v = /* @__PURE__ */ function(e) {
 			dropdown: {
 				trigger: "flex items-center justify-between px-3 py-2 rounded-lg bg-white border border-zinc-200 hover:bg-zinc-50 active:scale-95 transition-all duration-300 cursor-pointer text-emerald-950",
 				triggerSize: "w-full h-11 px-4 rounded-xl font-bold text-xs",
-				content: "bg-white border border-zinc-200 rounded-lg shadow-2xl py-1",
+				content: "absolute pointer-events-auto z-[100] bg-white border border-zinc-200 rounded-lg shadow-2xl py-1 mt-1",
 				contentSize: "w-full",
 				item: "w-full text-left px-4 py-2.5 text-xs font-bold text-emerald-950 hover:bg-emerald-50 transition-colors",
 				itemHover: "bg-zinc-50 text-emerald-600",
@@ -857,7 +861,7 @@ var v = /* @__PURE__ */ function(e) {
 			dropdown: {
 				trigger: "inline-flex items-center justify-between px-3 py-2 rounded-lg bg-zinc-900 border border-white/10 hover:bg-zinc-800 active:scale-95 transition-all duration-300 cursor-pointer text-white",
 				triggerSize: "w-full h-11 px-4 rounded-xl font-bold text-xs",
-				content: "bg-zinc-900 border border-white/10 rounded-lg shadow-2xl py-1",
+				content: "absolute pointer-events-auto z-[100] bg-zinc-900 border border-white/10 rounded-lg shadow-2xl py-1 mt-1",
 				contentSize: "w-full",
 				item: "w-full text-left px-4 py-2.5 text-xs font-bold text-white hover:bg-white/10 transition-colors",
 				itemHover: "bg-white/10 text-white",
@@ -903,7 +907,11 @@ var v = /* @__PURE__ */ function(e) {
 				xlarge: y.Large
 			},
 			baseTypography: "text-inherit leading-none font-black uppercase tracking-widest whitespace-nowrap",
-			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0 w-fit"
+			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0 w-fit",
+			layout: {
+				container: "inline-flex items-center justify-center gap-2",
+				icon: "w-[1.2em] h-[1.2em] shrink-0"
+			}
 		},
 		iconButtons: {
 			small: {
@@ -1517,7 +1525,7 @@ var v = /* @__PURE__ */ function(e) {
 			dropdown: {
 				trigger: "flex items-center justify-between px-3 py-2 rounded-lg bg-white border border-zinc-200 hover:bg-zinc-50 active:scale-95 transition-all duration-300 cursor-pointer text-zinc-950",
 				triggerSize: "w-full h-11 px-4 rounded-xl font-bold text-xs",
-				content: "bg-white border border-zinc-200 rounded-lg shadow-2xl py-1",
+				content: "absolute pointer-events-auto z-[100] bg-white border border-zinc-200 rounded-lg shadow-2xl py-1 mt-1",
 				contentSize: "w-full",
 				item: "w-full text-left px-4 py-2.5 text-xs font-bold text-zinc-950 hover:bg-zinc-100 transition-colors",
 				itemHover: "bg-zinc-50 text-zinc-950",
@@ -1703,7 +1711,7 @@ var v = /* @__PURE__ */ function(e) {
 			dropdown: {
 				trigger: "inline-flex items-center justify-between px-3 py-2 rounded-lg bg-zinc-900 border border-white/10 hover:bg-zinc-800 active:scale-95 transition-all duration-300 cursor-pointer text-white",
 				triggerSize: "w-full h-11 px-4 rounded-xl font-bold text-xs",
-				content: "bg-zinc-900 border border-white/10 rounded-lg shadow-2xl py-1",
+				content: "absolute pointer-events-auto z-[100] bg-zinc-900 border border-white/10 rounded-lg shadow-2xl py-1 mt-1",
 				contentSize: "w-full",
 				item: "w-full text-left px-4 py-2.5 text-xs font-bold text-white hover:bg-white/10 transition-colors",
 				itemHover: "bg-white/10 text-white",
@@ -1749,7 +1757,11 @@ var v = /* @__PURE__ */ function(e) {
 				xlarge: y.Large
 			},
 			baseTypography: "text-inherit leading-none font-bold tracking-tight whitespace-nowrap",
-			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0 w-fit"
+			baseStyles: "transition-all duration-300 transform-gpu active:scale-95 disabled:opacity-50 inline-flex items-center justify-center shrink-0 w-fit",
+			layout: {
+				container: "inline-flex items-center justify-center gap-2",
+				icon: "w-[1.2em] h-[1.2em] shrink-0"
+			}
 		},
 		iconButtons: {
 			small: {
@@ -2372,7 +2384,7 @@ var v = /* @__PURE__ */ function(e) {
 			dropdown: {
 				trigger: "flex items-center justify-between px-4 py-2 rounded-lg bg-white/60 backdrop-blur-3xl border border-white/80 hover:bg-white/70 active:scale-95 transition-all duration-300 cursor-pointer text-indigo-950",
 				triggerSize: "w-full h-11 px-4 rounded-xl font-bold text-xs",
-				content: "bg-white/70 backdrop-blur-3xl border border-white/80 rounded-lg shadow-2xl py-1",
+				content: "absolute pointer-events-auto z-[100] bg-white/70 backdrop-blur-3xl border border-white/80 rounded-lg shadow-2xl py-1 mt-1",
 				contentSize: "w-full",
 				item: "w-full text-left px-4 py-2.5 text-xs font-bold text-slate-600 hover:bg-white/40 hover:text-indigo-950",
 				itemHover: "bg-white/60 text-indigo-950",
@@ -2564,7 +2576,7 @@ var v = /* @__PURE__ */ function(e) {
 			dropdown: {
 				trigger: "inline-flex items-center justify-between px-4 py-2 rounded-lg bg-white/15 backdrop-blur-3xl border border-white/30 hover:bg-white/20 active:scale-95 transition-all duration-300 cursor-pointer text-slate-950",
 				triggerSize: "w-full h-11 px-4 rounded-xl font-bold text-xs",
-				content: "bg-white/15 backdrop-blur-3xl border border-white/30 rounded-lg shadow-2xl py-1",
+				content: "absolute pointer-events-auto z-[100] bg-white/15 backdrop-blur-3xl border border-white/30 rounded-lg shadow-2xl py-1 mt-1",
 				contentSize: "w-full",
 				item: "w-full text-left px-4 py-2.5 text-xs font-bold text-white/50 hover:bg-white/5 hover:text-white transition-all",
 				itemHover: "bg-white/5 text-white",
@@ -2639,16 +2651,20 @@ var I = ({ children: e, size: t = y.Medium, variant: n = "p", bold: r = !1, ital
 			children: e
 		})
 	});
-}, ne = ({ variant: e = T.Primary, size: t = y.Medium, className: n, children: r, ...i }) => {
-	let { theme: a, themeConfig: o } = P(), s = o.buttons[e], l = t, u = a.geometry.buttons[l], d = a.geometry.buttons.typographyMappings[l];
-	return /* @__PURE__ */ c("button", {
-		className: F(a.geometry.buttons.baseStyles, s, u.size, n),
-		...i,
-		children: /* @__PURE__ */ c(I, {
-			size: d,
-			className: a.geometry.buttons.baseTypography,
-			children: r
-		})
+}, ne = ({ variant: e = T.Primary, size: t = y.Medium, iconLeft: n, iconRight: r, className: i, children: a, ...o }) => {
+	let { theme: s, themeConfig: u } = P(), d = u.buttons[e], f = t, p = s.geometry.buttons[f], m = s.geometry.buttons.typographyMappings[f];
+	return /* @__PURE__ */ l("button", {
+		className: F(s.geometry.buttons.baseStyles, d, p.size, s.geometry.buttons.layout.container, i),
+		...o,
+		children: [
+			n && /* @__PURE__ */ c(n, { className: s.geometry.buttons.layout.icon }),
+			/* @__PURE__ */ c(I, {
+				size: m,
+				className: s.geometry.buttons.baseTypography,
+				children: a
+			}),
+			r && /* @__PURE__ */ c(r, { className: s.geometry.buttons.layout.icon })
+		]
 	});
 }, L = ({ checked: e = !1, onChange: t, size: n = y.Medium, className: r, disabled: i = !1 }) => {
 	let { theme: a, themeConfig: o } = P(), s = a.geometry.checkbox[n], l = () => {
@@ -2991,15 +3007,46 @@ var re = ({ value: e = 0, currentStep: t = 0, totalSteps: n = 5, variant: r = "b
 			className: F("transition-transform duration-300", a && "rotate-180")
 		})]
 	});
-}, Y = ({ children: e, size: t = y.Medium, className: n, ...r }) => {
-	let { isOpen: i, contentRef: a } = K(), { theme: o, themeConfig: s } = P(), l = t;
-	return i ? /* @__PURE__ */ c("div", {
-		ref: a,
+}, Y = ({ children: e, size: t = y.Medium, className: n, style: r, ...a }) => {
+	let { isOpen: s, contentRef: l, triggerRef: u } = K(), { theme: d, themeConfig: f } = P(), [p, m] = o({
+		top: 0,
+		left: 0,
+		width: 0,
+		align: "left"
+	}), h = t;
+	return i(() => {
+		if (s && u.current) {
+			let e = () => {
+				let e = u.current?.getBoundingClientRect();
+				if (e) {
+					let t = window.innerWidth, n = e.left + 200 > t;
+					m({
+						top: e.bottom + window.scrollY,
+						left: n ? e.right - 200 + window.scrollX : e.left + window.scrollX,
+						width: e.width,
+						align: n ? "right" : "left"
+					});
+				}
+			};
+			return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+				window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+			};
+		}
+	}, [s, u]), s ? g(/* @__PURE__ */ c("div", {
+		ref: l,
 		role: "listbox",
-		className: F("absolute left-0", s.dropdown?.content || "", o.geometry.dropdown?.[l]?.size || "", o.geometry.dropdown?.contentPositioning || "", n),
-		...r,
+		className: F(f.dropdown?.content || "", d.geometry.dropdown?.[h]?.size || "", d.geometry.dropdown?.contentPositioning || "", n),
+		style: {
+			position: "absolute",
+			top: p.top,
+			left: p.align === "left" ? p.left : void 0,
+			right: p.align === "right" ? window.innerWidth - (p.left + 200) : void 0,
+			minWidth: p.width,
+			...r
+		},
+		...a,
 		children: e
-	}) : null;
+	}), document.body) : null;
 }, X = ({ children: e, className: t, onClick: n, ...r }) => {
 	let [i, a] = o(!1), { setIsOpen: s } = K(), { themeConfig: l } = P();
 	return /* @__PURE__ */ c("button", {
@@ -3284,30 +3331,32 @@ var le = ({ children: t, className: n, size: r = y.Medium, divided: i = !0 }) =>
 			isHeader: r
 		}) : t)
 	});
-}, _e = ({ children: e, size: t = y.Medium, className: n }) => {
-	let { theme: r, themeConfig: i } = P(), a = r.geometry.table, o = t, s = a.typographyMappings.header;
+}, _e = ({ children: e, size: t = y.Medium, className: n, ...r }) => {
+	let { theme: i, themeConfig: a } = P(), o = i.geometry.table, s = t, l = o.typographyMappings.header;
 	return /* @__PURE__ */ c("th", {
-		className: F(a.headerCell, a[o].headerCellSize, n),
+		className: F(o.headerCell, o[s].headerCellSize, n),
 		style: {
-			backgroundColor: i.table.headerBg,
-			borderBottom: `${a.headerBorder} ${i.borders.header}`,
-			color: i.table.headerText
+			backgroundColor: a.table.headerBg,
+			borderBottom: `${o.headerBorder} ${a.borders.header}`,
+			color: a.table.headerText
 		},
+		...r,
 		children: /* @__PURE__ */ c(I, {
-			size: s,
+			size: l,
 			bold: !0,
-			className: F(a.headerTypography),
+			className: F(o.headerTypography),
 			children: e
 		})
 	});
-}, ve = ({ children: e, size: t = y.Medium, className: n }) => {
-	let { theme: r, themeConfig: i } = P(), a = r.geometry.table, o = t, s = a.typographyMappings.data;
+}, ve = ({ children: e, size: t = y.Medium, className: n, ...r }) => {
+	let { theme: i, themeConfig: a } = P(), o = i.geometry.table, s = t, l = o.typographyMappings.data;
 	return /* @__PURE__ */ c("td", {
-		className: F(a[o].dataCellSize, n),
-		style: { borderBottom: `${a.dataBorder} ${i.borders.row}` },
+		className: F(o[s].dataCellSize, n),
+		style: { borderBottom: `${o.dataBorder} ${a.borders.row}` },
+		...r,
 		children: /* @__PURE__ */ c(I, {
-			size: s,
-			className: a.dataTypography,
+			size: l,
+			className: o.dataTypography,
 			children: e
 		})
 	});