@knymbus/voxel-ui 1.0.8 → 1.0.10

package/dist/chunks/Button-BgQwvn3C.js

@@ -0,0 +1,65 @@
+import { t as e } from "./jsx-runtime-Boo2vksn.js";
+import { forwardRef as t } from "react";
+//#region src/components/button/Button.tsx
+var n = e(), r = {
+	xs: "w-3 h-3",
+	sm: "w-3.5 h-3.5",
+	md: "w-4 h-4",
+	lg: "w-5 h-5"
+}, i = ({ icon: e, size: t = "sm", className: i = "", ...a }) => {
+	let o = r[t];
+	return /* @__PURE__ */ (0, n.jsx)(e, {
+		className: `${o} ${i}`.trim(),
+		...a
+	});
+}, a = t((e, t) => {
+	let { size: r = "sm", color: a = "vsc", iconOnly: o = !1, startIcon: s, endIcon: c, className: l = "", disabled: u, ...d } = e, f = {
+		primary: "bg-vsc-accent text-vsc-button-text hover:bg-vsc-accent-hover border border-transparent focus:border-vsc-accent/50",
+		secondary: "bg-vsc-bg border border-vsc-border text-vsc-text hover:bg-vsc-hover focus:border-vsc-accent",
+		ghost: "bg-transparent border border-transparent text-vsc-muted hover:bg-vsc-hover/40 hover:text-vsc-text focus:border-vsc-border",
+		danger: "bg-rose-500/10 border border-rose-500/20 text-rose-500 hover:bg-rose-500/20 focus:border-rose-500/50",
+		vsc: "bg-transparent text-vsc-text border border-transparent opacity-55 hover:opacity-100 hover:bg-vsc-hover focus:border-vsc-hover/50"
+	}, p = {
+		xs: o ? "p-1 rounded-sm h-5 w-5" : "px-2 py-0.5 text-[10px] rounded-sm gap-1 h-5.5",
+		sm: o ? "p-1.5 rounded-md h-7 w-7" : "px-3 py-1.5 text-xs rounded-md gap-1.5 h-7.5",
+		md: o ? "p-2 rounded-md h-9 w-9" : "px-4 py-2 text-sm rounded-md gap-2 h-9",
+		lg: o ? "p-3 rounded-lg h-11 w-11" : "px-5 py-2.5 text-base rounded-lg gap-2.5 h-11"
+	}, m = `inline-flex items-center justify-center font-sans font-medium select-none 
+    outline-none focus:ring-0 cursor-pointer 
+    disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none disabled:active:scale-100 disabled:pointer-events-none
+    transition-all duration-150 cubic-bezier(0.34, 1.56, 0.64, 1)
+    active:scale-95 active:duration-75 ${f[a]} ${p[r]} ${l}`;
+	if (o) {
+		let a = e.icon;
+		return /* @__PURE__ */ (0, n.jsx)("button", {
+			ref: t,
+			disabled: u,
+			className: m,
+			...d,
+			children: /* @__PURE__ */ (0, n.jsx)(i, {
+				icon: a,
+				size: r
+			})
+		});
+	}
+	return /* @__PURE__ */ (0, n.jsxs)("button", {
+		ref: t,
+		disabled: u,
+		className: m,
+		...d,
+		children: [
+			s && /* @__PURE__ */ (0, n.jsx)(i, {
+				icon: s,
+				size: r
+			}),
+			/* @__PURE__ */ (0, n.jsx)("span", { children: e.children }),
+			c && /* @__PURE__ */ (0, n.jsx)(i, {
+				icon: c,
+				size: r
+			})
+		]
+	});
+});
+a.displayName = "Button";
+//#endregion
+export { i as n, a as t };

package/dist/chunks/button-dHcpTNIG.js

@@ -0,0 +1,97 @@
+import { t as e } from "./jsx-runtime-Boo2vksn.js";
+import { n as t, t as n } from "./Button-BgQwvn3C.js";
+import r, { useEffect as i, useRef as a, useState as o } from "react";
+//#region src/components/button/ButtonGroup.tsx
+var s = e();
+function c({ children: e, orientation: t = "horizontal", variant: n = "default", gap: i = 0, className: a = "" }) {
+	let o = t === "horizontal", c = i > 0, l = o ? "flex-row" : "flex-col", u = "";
+	!c && n === "default" ? u = o ? "[&>button:not(:first-child)]:-ml-[1px] [&>button:first-child]:rounded-l-sm [&>button:last-child]:rounded-r-sm [&>button:not(:first-child):not(:last-child)]:rounded-none" : "[&>button:not(:first-child)]:-mt-[1px] [&>button:first-child]:rounded-t-sm [&>button:last-child]:rounded-b-sm [&>button:not(:first-child):not(:last-child)]:rounded-none" : c && (u = "[&>button]:rounded-sm");
+	let d = r.Children.map(e, (e) => r.isValidElement(e) && n === "ghost" ? r.cloneElement(e, { color: "ghost" }) : e), f = c ? { gap: `${i}px` } : {};
+	return /* @__PURE__ */ (0, s.jsx)("div", {
+		className: `inline-flex bg-transparent rounded-sm select-none isolation-auto ${l} ${u} ${a}`.trim(),
+		style: f,
+		children: d
+	});
+}
+//#endregion
+//#region src/components/button/SplitActionButton.tsx
+var l = (e) => /* @__PURE__ */ (0, s.jsx)("svg", {
+	className: e.className,
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2.5",
+	viewBox: "0 0 24 24",
+	children: /* @__PURE__ */ (0, s.jsx)("path", {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M19 9l-7 7-7-7"
+	})
+});
+function u({ children: e, color: r = "primary", size: c = "sm", startIcon: u, onMainActionClick: d, menuItems: f, className: p = "" }) {
+	let [m, h] = o(!1), g = a(null);
+	i(() => {
+		let e = (e) => {
+			g.current && !g.current.contains(e.target) && h(!1);
+		};
+		return m && window.addEventListener("mousedown", e), () => window.removeEventListener("mousedown", e);
+	}, [m]);
+	let _ = {
+		xs: {
+			height: "22px",
+			menuTop: "26px"
+		},
+		sm: {
+			height: "30px",
+			menuTop: "34px"
+		},
+		md: {
+			height: "36px",
+			menuTop: "40px"
+		},
+		lg: {
+			height: "44px",
+			menuTop: "48px"
+		}
+	}[c], v = r === "primary" ? "bg-vsc-accent-hover/60" : "bg-vsc-border";
+	return /* @__PURE__ */ (0, s.jsxs)("div", {
+		ref: g,
+		className: `relative inline-flex items-center rounded-sm select-none isolation-auto ${p}`.trim(),
+		style: { height: _.height },
+		children: [
+			/* @__PURE__ */ (0, s.jsx)(n, {
+				color: r,
+				size: c,
+				startIcon: u,
+				onClick: d,
+				className: "rounded-r-none! h-full border-r-0",
+				children: e
+			}),
+			/* @__PURE__ */ (0, s.jsx)("div", { className: `w-px h-3/5 pointer-events-none z-20 ${v}` }),
+			/* @__PURE__ */ (0, s.jsx)("button", {
+				onClick: () => h(!m),
+				className: `h-full flex items-center justify-center transition-all duration-150 focus:outline-none border-none outline-none rounded-l-none! cursor-pointer ${r === "primary" ? "bg-vsc-accent text-vsc-button-text hover:bg-vsc-accent-hover" : r === "secondary" ? "bg-vsc-bg border border-vsc-sidebar border-l-0 text-vsc-text hover:bg-vsc-hover" : "bg-transparent text-vsc-muted hover:bg-vsc-hover/40 hover:text-vsc-text"} ${c === "xs" ? "w-5 rounded-r-sm" : c === "sm" ? "w-7 rounded-r-md" : c === "md" ? "w-9 rounded-r-md" : "w-11 rounded-r-lg"}`,
+				children: /* @__PURE__ */ (0, s.jsx)(l, { className: `w-3.5 h-3.5 transition-transform duration-200 ${m ? "rotate-180" : ""}` })
+			}),
+			m && /* @__PURE__ */ (0, s.jsx)("div", {
+				className: "absolute left-0 w-48 bg-vsc-sidebar border border-vsc-border rounded shadow-xl z-50 p-1 flex flex-col font-sans text-xs text-vsc-text animate-in fade-in slide-in-from-top-2 duration-150",
+				style: { top: _.menuTop },
+				children: f.map((e) => /* @__PURE__ */ (0, s.jsxs)("button", {
+					onClick: () => {
+						e.onClick(), h(!1);
+					},
+					className: "w-full flex items-center gap-2 p-2 hover:bg-vsc-hover text-left rounded-sm border-none bg-transparent text-vsc-text hover:text-white cursor-pointer",
+					children: [e.startIcon && /* @__PURE__ */ (0, s.jsx)(t, {
+						icon: e.startIcon,
+						size: "xs",
+						className: "opacity-70"
+					}), /* @__PURE__ */ (0, s.jsx)("span", {
+						className: "truncate",
+						children: e.label
+					})]
+				}, e.id))
+			})
+		]
+	});
+}
+//#endregion
+export { c as n, u as t };