@usace/groundwork 4.3.2 → 5.0.0

package/dist/es/components/button.js

@@ -0,0 +1,125 @@
+import e from "../gw-merge.js";
+import t from "./navigation/link.js";
+import n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Button as o } from "@headlessui/react";
+//#region lib/components/button.jsx
+var s = ["gw:hover:cursor-pointer gw:relative gw:isolate gw:inline-flex gw:items-center gw:justify-center gw:gap-x-2 gw:font-semibold", "gw:data-disabled:cursor-not-allowed gw:data-disabled:opacity-50"], c = {
+	xs: "gw:px-2 gw:py-1 gw:text-xs",
+	sm: "gw:px-3 gw:py-1.5 gw:text-sm",
+	md: "gw:px-4 gw:py-2 gw:text-sm",
+	lg: "gw:px-5 gw:py-3 gw:text-base",
+	xl: "gw:px-6 gw:py-4 gw:text-lg"
+}, l = {
+	none: "gw:rounded-none",
+	xs: "gw:rounded-xs",
+	sm: "gw:rounded-sm",
+	md: "gw:rounded-md",
+	lg: "gw:rounded-lg",
+	xl: "gw:rounded-xl"
+}, u = {
+	light: "gw:bg-white gw:text-usace-black gw:border gw:border-gray-300/60 gw:hover:bg-gray-100/80 gw:active:bg-gray-200/70",
+	dark: "gw:bg-gray-900 gw:text-white gw:border gw:border-gray-900/90 gw:hover:bg-gray-900/90 gw:active:bg-gray-900/80",
+	primary: "gw:bg-blue-600 gw:text-white gw:border gw:border-blue-700/90 gw:hover:bg-blue-600/90 gw:active:bg-blue-600/80",
+	secondary: "gw:bg-gray-600 gw:text-white gw:border gw:border-gray-700/90 gw:hover:bg-gray-600/90 gw:active:bg-gray-600/80",
+	success: "gw:bg-green-600 gw:text-white gw:border gw:border-green-600/90 gw:hover:bg-green-600/90 gw:active:bg-green-600/80",
+	warning: "gw:bg-orange-600 gw:text-white gw:border gw:border-orange-700/90 gw:hover:bg-orange-600/90 gw:active:bg-orange-600/80",
+	danger: "gw:bg-red-600 gw:text-white gw:border gw:border-red-700/90 gw:hover:bg-red-600/90 gw:active:bg-red-600/80",
+	info: "gw:bg-cyan-400 gw:text-cyan-950 gw:border gw:border-cyan-500/90 gw:hover:bg-cyan-400/80 gw:active:bg-cyan-400/70",
+	white: "gw:bg-white gw:text-usace-black gw:border gw:border-usace-black/60 gw:hover:bg-gray-100/80 gw:active:bg-gray-200/70",
+	zinc: "gw:bg-zinc-800 gw:text-white gw:border gw:border-zinc-800/90 gw:hover:bg-zinc-800/90 gw:active:bg-zinc-800/80",
+	indigo: "gw:bg-indigo-600 gw:text-white gw:border gw:border-indigo-700/90 gw:hover:bg-indigo-600/90 gw:active:bg-indigo-600/80",
+	cyan: "gw:bg-cyan-400 gw:text-cyan-950 gw:border gw:border-cyan-500/90 gw:hover:bg-cyan-400/80 gw:active:bg-cyan-400/70",
+	red: "gw:bg-red-600 gw:text-white gw:border gw:border-red-700/90 gw:hover:bg-red-600/90 gw:active:bg-red-600/80",
+	orange: "gw:bg-orange-600 gw:text-white gw:border gw:border-orange-700/90 gw:hover:bg-orange-600/90 gw:active:bg-orange-600/80",
+	amber: "gw:bg-amber-600 gw:text-white gw:border gw:border-amber-700/90 gw:hover:bg-amber-600/90 gw:active:bg-amber-600/80",
+	yellow: "gw:bg-yellow-600 gw:text-white gw:border gw:border-yellow-700/90 gw:hover:bg-yellow-600/90 gw:active:bg-yellow-600/80",
+	lime: "gw:bg-lime-600 gw:text-white gw:border gw:border-lime-700/90 gw:hover:bg-lime-600/90 gw:active:bg-lime-600/80",
+	green: "gw:bg-green-600 gw:text-white gw:border gw:border-green-700/90 gw:hover:bg-green-600/90 gw:active:bg-green-600/80",
+	emerald: "gw:bg-emerald-600 gw:text-white gw:border gw:border-emerald-700/90 gw:hover:bg-emerald-600/90 gw:active:bg-emerald-600/80",
+	teal: "gw:bg-teal-600 gw:text-white gw:border gw:border-teal-700/90 gw:hover:bg-teal-600/90 gw:active:bg-teal-600/80",
+	sky: "gw:bg-sky-600 gw:text-white gw:border gw:border-sky-700/90 gw:hover:bg-sky-600/90 gw:active:bg-sky-600/80",
+	blue: "gw:bg-blue-600 gw:text-white gw:border gw:border-blue-700/90 gw:hover:bg-blue-600/90 gw:active:bg-blue-600/80",
+	violet: "gw:bg-violet-600 gw:text-white gw:border gw:border-violet-700/90 gw:hover:bg-violet-600/90 gw:active:bg-violet-600/80",
+	purple: "gw:bg-purple-600 gw:text-white gw:border gw:border-purple-700/90 gw:hover:bg-purple-600/90 gw:active:bg-purple-600/80",
+	fuchsia: "gw:bg-fuchsia-600 gw:text-white gw:border gw:border-fuchsia-700/90 gw:hover:bg-fuchsia-600/90 gw:active:bg-fuchsia-600/80",
+	pink: "gw:bg-pink-600 gw:text-white gw:border gw:border-pink-700/90 gw:hover:bg-pink-600/90 gw:active:bg-pink-600/80",
+	rose: "gw:bg-rose-600 gw:text-white gw:border gw:border-rose-700/90 gw:hover:bg-rose-600/90 gw:active:bg-rose-600/80"
+}, d = {
+	light: "gw:bg-transparent gw:text-usace-black gw:border gw:border-gray-300/60 gw:hover:bg-gray-100/80 gw:active:bg-gray-200/70",
+	dark: "gw:bg-transparent gw:text-usace-black gw:border gw:border-gray-900/90 gw:hover:bg-gray-900 gw:hover:text-white gw:active:bg-gray-200/70",
+	primary: "gw:bg-transparent gw:text-blue-600 gw:border gw:border-blue-700/90 gw:border gw:border-blue-700/90 gw:hover:bg-blue-600/90 gw:hover:text-white gw:active:bg-blue-600/80",
+	secondary: "gw:bg-transparent gw:text-gray-700 gw:border gw:border-gray-700/90 gw:hover:bg-gray-600/90 gw:hover:text-white gw:active:bg-gray-600/80",
+	success: "gw:bg-transparent gw:text-green-600 gw:border gw:border-green-600/90 gw:hover:bg-green-600/90 gw:hover:text-white gw:active:bg-green-600/80",
+	warning: "gw:bg-transparent gw:text-orange-600 gw:border gw:border-orange-700/90 gw:hover:bg-orange-600/90 gw:hover:text-white gw:active:bg-orange-600/80",
+	danger: "gw:bg-transparent gw:text-red-600 gw:border gw:border-red-700/90 gw:hover:bg-red-600/90 gw:hover:text-white gw:active:bg-red-600/80",
+	info: "gw:bg-transparent gw:text-cyan-400 gw:text-cyan-950 gw:border gw:border-cyan-500/90 gw:hover:bg-cyan-400/80 gw:hover:text-white gw:active:bg-cyan-400/70",
+	white: "gw:bg-transparent gw:text-white gw:border gw:border-white gw:hover:bg-gray-100/80  gw:active:bg-gray-200/70",
+	zinc: "gw:bg-transparent gw:text-zinc-800 gw:border gw:border-zinc-800/90 gw:hover:bg-zinc-800/90 gw:hover:text-white gw:active:bg-zinc-800/80",
+	indigo: "gw:bg-transparent gw:text-indigo-600 gw:border gw:border-indigo-700/90 gw:hover:bg-indigo-600/90 gw:hover:text-white gw:active:bg-indigo-600/80",
+	cyan: "gw:bg-transparent gw:text-cyan-400 gw:text-cyan-950 gw:border gw:border-cyan-500/90 gw:hover:bg-cyan-400/80 gw:hover:text-white gw:active:bg-cyan-400/70",
+	red: "gw:bg-transparent gw:text-red-600 gw:border gw:border-red-700/90 gw:hover:bg-red-600/90 gw:hover:text-white gw:active:bg-red-600/80",
+	orange: "gw:bg-transparent gw:text-orange-600 gw:border gw:border-orange-700/90 gw:hover:bg-orange-600/90 gw:hover:text-white gw:active:bg-orange-600/80",
+	amber: "gw:bg-transparent gw:text-amber-600 gw:border gw:border-amber-700/90 gw:hover:bg-amber-600/90 gw:hover:text-white gw:active:bg-amber-600/80",
+	yellow: "gw:bg-transparent gw:text-yellow-600 gw:border gw:border-yellow-700/90 gw:hover:bg-yellow-600/90 gw:hover:text-white gw:active:bg-yellow-600/80",
+	lime: "gw:bg-transparent gw:text-lime-600 gw:border gw:border-lime-700/90 gw:hover:bg-lime-600/90 gw:hover:text-white gw:active:bg-lime-600/80",
+	green: "gw:bg-transparent gw:text-green-600 gw:border gw:border-green-700/90 gw:hover:bg-green-600/90 gw:hover:text-white gw:active:bg-green-600/80",
+	emerald: "gw:bg-transparent gw:text-emerald-600 gw:border gw:border-emerald-700/90 gw:hover:bg-emerald-600/90 gw:hover:text-white gw:active:bg-emerald-600/80",
+	teal: "gw:bg-transparent gw:text-teal-600 gw:border gw:border-teal-700/90 gw:hover:bg-teal-600/90 gw:hover:text-white gw:active:bg-teal-600/80",
+	sky: "gw:bg-transparent gw:text-sky-600 gw:border gw:border-sky-700/90 gw:hover:bg-sky-600/90 gw:hover:text-white gw:active:bg-sky-600/80",
+	blue: "gw:bg-transparent gw:text-blue-600 gw:border gw:border-blue-700/90 gw:hover:bg-blue-600/90 gw:hover:text-white gw:active:bg-blue-600/80",
+	violet: "gw:bg-transparent gw:text-violet-600 gw:border gw:border-violet-700/90 gw:hover:bg-violet-600/90 gw:hover:text-white gw:active:bg-violet-600/80",
+	purple: "gw:bg-transparent gw:text-purple-600 gw:border gw:border-purple-700/90 gw:hover:bg-purple-600/90 gw:hover:text-white gw:active:bg-purple-600/80",
+	fuchsia: "gw:bg-transparent gw:text-fuchsia-600 gw:border gw:border-fuchsia-700/90 gw:hover:bg-fuchsia-600/90 gw:hover:text-white gw:active:bg-fuchsia-600/80",
+	pink: "gw:bg-transparent gw:text-pink-600 gw:border gw:border-pink-700/90 gw:hover:bg-pink-600/90 gw:hover:text-white gw:active:bg-pink-600/80",
+	rose: "gw:bg-transparent gw:text-rose-600 gw:border gw:border-rose-700/90 gw:hover:bg-rose-600/90 gw:hover:text-white gw:active:bg-rose-600/80"
+}, f = {
+	light: "gw:bg-transparent gw:text-gray-600",
+	dark: "gw:bg-transparent gw:text-usace-black",
+	primary: "gw:bg-transparent gw:text-blue-600",
+	secondary: "gw:bg-transparent gw:text-gray-700",
+	success: "gw:bg-transparent gw:text-green-600",
+	warning: "gw:bg-transparent gw:text-orange-600",
+	danger: "gw:bg-transparent gw:text-red-600",
+	info: "gw:bg-transparent gw:text-cyan-400",
+	white: "gw:bg-transparent gw:text-white",
+	zinc: "gw:bg-transparent gw:text-zinc-800",
+	indigo: "gw:bg-transparent gw:text-indigo-600",
+	cyan: "gw:bg-transparent gw:text-cyan-400",
+	red: "gw:bg-transparent gw:text-red-600",
+	orange: "gw:bg-transparent gw:text-orange-600",
+	amber: "gw:bg-transparent gw:text-amber-600",
+	yellow: "gw:bg-transparent gw:text-yellow-600",
+	lime: "gw:bg-transparent gw:text-lime-600",
+	green: "gw:bg-transparent gw:text-green-600",
+	emerald: "gw:bg-transparent gw:text-emerald-600",
+	teal: "gw:bg-transparent gw:text-teal-600",
+	sky: "gw:bg-transparent gw:text-sky-600",
+	blue: "gw:bg-transparent gw:text-blue-600",
+	violet: "gw:bg-transparent gw:text-violet-600",
+	purple: "gw:bg-transparent gw:text-purple-600",
+	fuchsia: "gw:bg-transparent gw:text-fuchsia-600",
+	pink: "gw:bg-transparent gw:text-pink-600",
+	rose: "gw:bg-transparent gw:text-rose-600"
+}, p = n.forwardRef(function({ style: n = "filled", color: r = "primary", size: a = "md", radius: p = "xs", outline: h, plain: g, className: _, children: v, ...y }, b) {
+	let x = h ? "outline" : g ? "plain" : n, S = e(s, l[p], c[a], x === "filled" ? u[r] : "", x === "outline" ? d[r] : "", x === "plain" ? f[r] : "", _);
+	return "href" in y ? /* @__PURE__ */ i(t, {
+		...y,
+		className: S,
+		ref: b,
+		children: /* @__PURE__ */ i(m, { children: v })
+	}) : /* @__PURE__ */ i(o, {
+		...y,
+		className: e(S, "cursor-pointer"),
+		ref: b,
+		children: /* @__PURE__ */ i(m, { children: v })
+	});
+});
+function m({ children: e }) {
+	return /* @__PURE__ */ a(r, { children: [e, /* @__PURE__ */ i("span", {
+		className: "gw:absolute gw:left-1/2 gw:top-1/2 gw:size-[max(100%,2.75rem)] gw:-translate-x-1/2 gw:-translate-y-1/2 gw:pointer-fine:hidden",
+		"aria-hidden": "true"
+	})] });
+}
+//#endregion
+export { p as Button, m as TouchTarget };

package/dist/es/components/buttons/popover.js

@@ -0,0 +1,51 @@
+import e from "../../gw-merge.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Popover as i, PopoverButton as a, PopoverPanel as o } from "@headlessui/react";
+import { VscChevronDown as s, VscChevronLeft as c, VscChevronRight as l, VscChevronUp as u } from "react-icons/vsc";
+//#region lib/components/buttons/popover.jsx
+var d = [
+	"right",
+	"left",
+	"top",
+	"bottom"
+];
+function f({ title: f, children: p, level: m = 0, className: h = "", direction: g = "right" }) {
+	if (g = g.toLowerCase(), !d.includes(g)) throw Error(`Invalid direction in component <Popover direction="${g}". Valid directions are: ${d.join(", ")}`);
+	let _ = {
+		right: "gw:left-full gw:transform gw:-translate-y-1/2 gw:translate-x-2",
+		left: "gw:right-full gw:transform gw:-translate-y-1/2 gw:-translate-x-2",
+		top: "gw:bottom-full gw:transform gw:-translate-x-1/2 gw:-translate-y-2",
+		bottom: "gw:top-full gw:transform gw:-translate-x-1/2 gw:translate-y-2"
+	}, v = {
+		right: l,
+		left: c,
+		top: u,
+		bottom: s
+	}[g];
+	return /* @__PURE__ */ n(i, {
+		name: "gw:popout-menu",
+		style: { zIndex: m * 10 + 100 },
+		className: e("gw:relative gw:cursor-not-allowed gw:select-none", h),
+		children: ({ open: e }) => /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r(a, {
+			style: { zIndex: m * 10 + 110 },
+			className: "gw:inline-flex gw:w-full gw:items-center gw:justify-between gw:leading-6 gw:ps-1 gw:focus:outline-hidden gw:hover:cursor-pointer",
+			children: [/* @__PURE__ */ n("span", { children: f }), /* @__PURE__ */ n(v, {
+				"aria-hidden": "true",
+				className: "gw:h-5 gw:w-5",
+				size: 12
+			})]
+		}), e && /* @__PURE__ */ n(o, {
+			transition: "true",
+			className: `${m ? "gw:fixed" : "gw:absolute"} gw:max-w-[50vw] gw:mt-2 gw:w-56 gw:shrink gw:rounded-xl gw:bg-white gw:text-sm gw:leading-6 gw:text-gray-900 gw:shadow-lg gw:ring-1 gw:ring-gray-900/5 ${_[g]}`,
+			style: { zIndex: m * 30 + 120 },
+			children: ({ close: e }) => /* @__PURE__ */ n("div", {
+				onClick: () => {
+					e();
+				},
+				children: p
+			})
+		})] })
+	});
+}
+//#endregion
+export { f as PopoutMenu, f as default };

package/dist/es/components/buttons/standard-buttons.js

@@ -0,0 +1,54 @@
+import { Button as e } from "../button.js";
+import { useState as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/components/buttons/standard-buttons.jsx
+function a({ onClick: t }) {
+	return /* @__PURE__ */ r(e, {
+		color: "white",
+		style: "plain",
+		className: "gw:font-normal",
+		onClick: t,
+		children: "Login"
+	});
+}
+function o({ onOk: t, onCancel: n }) {
+	return /* @__PURE__ */ i("div", {
+		className: "gw:flex gw:gap-2",
+		children: [/* @__PURE__ */ r(e, {
+			color: "emerald",
+			onClick: t,
+			children: "Ok"
+		}), /* @__PURE__ */ r(e, {
+			color: "white",
+			onClick: n,
+			children: "Cancel"
+		})]
+	});
+}
+function s({ onDelete: i, alignConfirm: a = "right" }) {
+	let [o, s] = t(!1), c = () => {
+		s(!0);
+	}, l = [/* @__PURE__ */ r(e, {
+		color: "white",
+		onClick: () => {
+			s(!1);
+		},
+		children: "Cancel"
+	}, "cancel"), /* @__PURE__ */ r(e, {
+		color: "red",
+		onClick: () => {
+			i && typeof i == "function" && i(), s(!1);
+		},
+		children: "Confirm"
+	}, "confirm")];
+	return /* @__PURE__ */ r("div", {
+		className: "gw:flex gw:gap-2",
+		children: o ? /* @__PURE__ */ r(n, { children: a === "right" ? l : l.reverse() }) : /* @__PURE__ */ r(e, {
+			color: "red",
+			onClick: c,
+			children: "Delete"
+		})
+	});
+}
+//#endregion
+export { s as DeleteConfirm, a as LoginButton, o as OkCancel };

package/dist/es/components/data-grid/data-grid-header.js

@@ -0,0 +1,54 @@
+import e from "../../gw-merge.js";
+import t from "./data-grid-selector.js";
+import { memo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { BsSortDown as a, BsSortDownAlt as o } from "react-icons/bs";
+//#region lib/components/data-grid/data-grid-header.jsx
+var s = n(function({ col: e, sortedBy: t, sortedDir: n, ...s }) {
+	return /* @__PURE__ */ i("div", {
+		"data-sorted-by": e.field === t,
+		className: "gw:pl-1 gw:pr-1 gw:flex gw:justify-between gw:items-center gw:data-[sorted-by=true]:font-bold gw:data-[sorted-by=true]:text-gray-800",
+		...s,
+		children: [
+			e.header || "\xA0",
+			e.field === t && n === "asc" ? /* @__PURE__ */ r(o, {}) : null,
+			e.field === t && n === "desc" ? /* @__PURE__ */ r(a, {}) : null
+		]
+	}, e.field);
+});
+function c({ sortedBy: a, sortedDir: o, columns: c, columnWidths: l, enableSelect: u, enableToggle: d, selected: f, onSelectAll: p, onSort: m }) {
+	return /* @__PURE__ */ i("div", {
+		className: "gw:sticky gw:top-0 gw:z-10 gw:flex gw:flex-row gw:items-center gw:text-sm gw:shadow-md",
+		children: [
+			u ? /* @__PURE__ */ r(t, {
+				selected: f,
+				onSelect: p
+			}) : null,
+			d ? /* @__PURE__ */ r(t, {
+				selected: f,
+				onSelect: p,
+				toggle: !0
+			}) : null,
+			c.map((t, i) => {
+				let c = typeof t.header == "function" ? n(t.header) : s, u = {
+					display: "flex",
+					width: l[i] - 1
+				};
+				return /* @__PURE__ */ r("div", {
+					className: e("gw:box-border gw:border-r gw:border-r-gray-300 gw:last:border-r-0", t?.sortable ? "gw:cursor-pointer" : ""),
+					children: /* @__PURE__ */ r(c, {
+						style: u,
+						col: t,
+						sortedBy: a,
+						sortedDir: o,
+						onClick: () => {
+							m && t?.field && t?.sortable && m(t.field);
+						}
+					})
+				}, `${t.field}-${i}`);
+			})
+		]
+	});
+}
+//#endregion
+export { c as default };

package/dist/es/components/data-grid/data-grid-row.js

@@ -0,0 +1,44 @@
+import e from "../../gw-merge.js";
+import t from "./data-grid-selector.js";
+import { memo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/components/data-grid/data-grid-row.jsx
+var a = n(function({ val: t, className: n, style: i = {} }) {
+	return /* @__PURE__ */ r("div", {
+		className: e("gw:truncate", n),
+		style: i,
+		children: t
+	});
+}), o = n(function({ row: e, columns: o, columnWidths: s, enableSelect: c, enableToggle: l, selected: u, onSelect: d }) {
+	return /* @__PURE__ */ i("div", {
+		className: "gw:flex gw:flex-row gw:items-center gw:text-sm gw:even:bg-gray-50",
+		children: [
+			c ? /* @__PURE__ */ r(t, {
+				selected: u,
+				onSelect: d,
+				row: e
+			}) : null,
+			l ? /* @__PURE__ */ r(t, {
+				selected: u,
+				onSelect: d,
+				row: e,
+				toggle: !0
+			}) : null,
+			o.map((t, i) => {
+				let o = t?.component ? n(t.component) : a, c = {
+					display: "flex",
+					width: s[i]
+				};
+				return /* @__PURE__ */ r(o, {
+					row: e,
+					field: t.field,
+					val: e[t.field]?.toString() || "",
+					className: "gw:p-1 gw:truncate",
+					style: c
+				}, `${t.field}-${i}`);
+			})
+		]
+	});
+});
+//#endregion
+export { o as default };

package/dist/es/components/data-grid/data-grid-selector.js

@@ -0,0 +1,65 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region lib/components/data-grid/data-grid-selector.jsx
+function n({ checked: n = !1, onChange: r }) {
+	return /* @__PURE__ */ e("div", {
+		className: "gw:flex gw:h-6 gw:shrink-0 gw:items-center",
+		children: /* @__PURE__ */ t("div", {
+			className: "gw:group gw:grid gw:size-4 gw:grid-cols-1",
+			children: [/* @__PURE__ */ e("input", {
+				id: "rowselect",
+				name: "selected",
+				type: "checkbox",
+				checked: n,
+				onChange: r,
+				"aria-describedby": "select a row",
+				className: "gw:col-start-1 gw:row-start-1 gw:appearance-none gw:rounded-sm gw:border gw:border-gray-300 gw:bg-white gw:checked:border-indigo-600 gw:checked:bg-indigo-600 gw:indeterminate:border-indigo-600 gw:indeterminate:bg-indigo-600 gw:focus-visible:outline-2 gw:focus-visible:outline-offset-2 gw:focus-visible:outline-indigo-600 gw:disabled:border-gray-300 gw:disabled:bg-gray-100 gw:disabled:checked:bg-gray-100 gw:forced-colors:appearance-auto"
+			}), /* @__PURE__ */ t("svg", {
+				fill: "none",
+				viewBox: "0 0 14 14",
+				className: "gw:pointer-events-none gw:col-start-1 gw:row-start-1 gw:size-3.5 gw:self-center gw:justify-self-center gw:stroke-white gw:group-has-disabled:stroke-gray-950/25",
+				children: [/* @__PURE__ */ e("path", {
+					d: "M3 8L6 11L11 3.5",
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: "gw:opacity-0 gw:group-has-checked:opacity-100"
+				}), /* @__PURE__ */ e("path", {
+					d: "M3 7H11",
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: "gw:opacity-0 gw:group-has-indeterminate:opacity-100"
+				})]
+			})]
+		})
+	});
+}
+function r({ checked: n, onChange: r }) {
+	return /* @__PURE__ */ t("div", {
+		className: "gw:group gw:relative gw:inline-flex gw:h-5 gw:w-10 gw:shrink-0 gw:items-center gw:justify-center gw:rounded-full gw:outline-offset-2 gw:outline-indigo-600 gw:has-focus-visible:outline-2",
+		children: [
+			/* @__PURE__ */ e("span", { className: "gw:absolute gw:mx-auto gw:h-4 gw:w-9 gw:rounded-full gw:bg-gray-200 gw:inset-ring gw:inset-ring-gray-900/5 gw:transition-colors gw:duration-200 gw:ease-in-out gw:group-has-checked:bg-indigo-600" }),
+			/* @__PURE__ */ e("span", { className: "gw:absolute gw:left-0 gw:size-5 gw:rounded-full gw:border gw:border-gray-300 gw:bg-white gw:shadow-xs gw:transition-transform gw:duration-200 gw:ease-in-out gw:group-has-checked:translate-x-5" }),
+			/* @__PURE__ */ e("input", {
+				name: "toggle-select",
+				type: "checkbox",
+				"aria-label": "toggle selected",
+				checked: n,
+				onChange: r,
+				className: "gw:absolute gw:inset-0 gw:appearance-none gw:focus:outline-hidden"
+			})
+		]
+	});
+}
+function i({ selected: t, onSelect: i, row: a, toggle: o = !1 }) {
+	return /* @__PURE__ */ e("div", {
+		className: "gw:p-1 gw:flex gw:items-center",
+		children: e(o ? r : n, {
+			checked: t,
+			onChange: i,
+			row: a
+		})
+	});
+}
+//#endregion
+export { i as default };

package/dist/es/components/data-grid/data-grid.js

@@ -0,0 +1,89 @@
+import { Loader as e } from "../display/loader.js";
+import t from "./data-grid-row.js";
+import n from "./data-grid-header.js";
+import { useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region lib/components/data-grid/data-grid.jsx
+function u(e, { box: t = "content-box" } = {}) {
+	let [n, i] = o({
+		width: 0,
+		height: 0
+	}), s = a(null);
+	return r(() => {
+		if (!e.current) return;
+		let n = new ResizeObserver(([n]) => {
+			let r = n.contentRect, a = n.borderBoxSize?.[0], o = n.contentBoxSize?.[0], c = t === "border-box" ? a?.inlineSize ?? e.current.offsetWidth : o?.inlineSize ?? r.width, l = t === "border-box" ? a?.blockSize ?? e.current.offsetHeight : o?.blockSize ?? r.height;
+			s.current && cancelAnimationFrame(s.current), s.current = requestAnimationFrame(() => i({
+				width: c,
+				height: l
+			}));
+		});
+		return n.observe(e.current, { box: t }), () => {
+			s.current && cancelAnimationFrame(s.current), n.disconnect();
+		};
+	}, [e, t]), n;
+}
+function d({ columns: e, parentWidth: t, enableSelect: n, enableToggle: r }) {
+	let i = 0, a = 0;
+	n && (a += 32), r && (a += 48), e.forEach((e) => {
+		if (e?.width && e?.flex) throw Error("A column cannot have both width and flex attributes");
+		a += e?.width || 0, i += e?.flex || 0;
+	});
+	let o = t - a, s = Math.floor(o / i), c = t - a - i * s, l = e.map((e) => e.width || e.flex * s);
+	return l[l.length - 1] = l[l.length - 1] + c, l;
+}
+function f({ data: r, columns: f, sortedBy: p = null, sortedDir: m = null, selectByField: h = "id", selectedIds: g = /* @__PURE__ */ new Set(), onSelect: _ = null, onSelectAll: v = null, onSort: y = null, showHeader: b = !0, enableSelect: x = !1, enableToggle: S = !1, isLoading: C = !1 }) {
+	let w = a(), { width: T } = u(w, { box: "border-box" }), [E, D] = o(null);
+	if (x && S) throw Error("Data-grid error: Cannot enable select and toggle at the same time.");
+	return i(() => {
+		T && D(d({
+			columns: f,
+			parentWidth: T,
+			enableSelect: x,
+			enableToggle: S
+		}));
+	}, [
+		T,
+		f,
+		x,
+		S
+	]), /* @__PURE__ */ c("div", {
+		ref: w,
+		className: "gw:h-full gw:overflow-auto",
+		children: T && E ? /* @__PURE__ */ l(s, { children: [b ? /* @__PURE__ */ c(n, {
+			sortedBy: p,
+			sortedDir: m,
+			selected: r.length === g.size,
+			onSelectAll: v,
+			onSort: y,
+			columns: f,
+			columnWidths: E,
+			enableSelect: x,
+			enableToggle: S
+		}) : null, C ? /* @__PURE__ */ c(e, {}) : /* @__PURE__ */ c("div", {
+			className: "gw:h-full gw:flex gw:flex-col gw:overflow-y-scroll",
+			children: r.map((e, n) => {
+				let r = e?.id === void 0 ? n : e.id;
+				return /* @__PURE__ */ c(t, {
+					id: r,
+					selected: g.has(e[h]),
+					onSelect: (t) => {
+						_ && _({
+							id: e[h],
+							idx: n,
+							shiftKey: t.nativeEvent.shiftKey,
+							row: e
+						});
+					},
+					row: e,
+					columns: f,
+					columnWidths: E,
+					enableSelect: x,
+					enableToggle: S
+				}, r);
+			})
+		})] }) : null
+	});
+}
+//#endregion
+export { f as DataGrid, f as default };

package/dist/es/components/display/accordion.js

@@ -0,0 +1,24 @@
+import e from "../../gw-merge.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Disclosure as i, DisclosureButton as a, DisclosurePanel as o } from "@headlessui/react";
+import { VscChevronDown as s, VscChevronRight as c } from "react-icons/vsc";
+//#region lib/components/display/accordion.jsx
+function l({ heading: l, defaultOpen: u = !1, unmountOnClose: d = !1, className: f, isOpen: p, onToggle: m, children: h, ...g }) {
+	return /* @__PURE__ */ n(i, {
+		defaultOpen: u,
+		children: ({ open: i }) => /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r(a, {
+			"aria-expanded": p ?? i,
+			"aria-controls": "accordion-panel",
+			onClick: m,
+			className: e("gw:flex gw:justify-between gw:items-center gw:w-full gw:shadow gw:px-3 gw:py-2 gw:text-sm gw:font-semibold gw:text-gray-500 gw:bg-gray-50 gw:hover:bg-gray-100", i ? "gw:rounded-t" : "gw:rounded", f),
+			...g,
+			children: [l, n(i ? s : c, {})]
+		}), /* @__PURE__ */ n(o, {
+			className: "gw:shadow",
+			unmount: d,
+			children: h
+		})] })
+	});
+}
+//#endregion
+export { l as Accordion, l as default };

package/dist/es/components/display/badge.js

@@ -0,0 +1,56 @@
+import e from "../../gw-merge.js";
+import t from "../navigation/link.js";
+import { TouchTarget as n } from "../button.js";
+import r, { useMemo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { Button as o } from "@headlessui/react";
+//#region lib/components/display/badge.jsx
+var s = {
+	red: "gw:bg-red-500/15 gw:text-red-700 gw:group-data-hover:bg-red-500/25 gw:dark:bg-red-500/10 gw:dark:text-red-400 gw:dark:group-data-hover:bg-red-500/20",
+	orange: "gw:bg-orange-500/15 gw:text-orange-700 gw:group-data-hover:bg-orange-500/25 gw:dark:bg-orange-500/10 gw:dark:text-orange-400 gw:dark:group-data-hover:bg-orange-500/20",
+	amber: "gw:bg-amber-400/20 gw:text-amber-700 gw:group-data-hover:bg-amber-400/30 gw:dark:bg-amber-400/10 gw:dark:text-amber-400 gw:dark:group-data-hover:bg-amber-400/15",
+	yellow: "gw:bg-yellow-400/20 gw:text-yellow-700 gw:group-data-hover:bg-yellow-400/30 gw:dark:bg-yellow-400/10 gw:dark:text-yellow-300 gw:dark:group-data-hover:bg-yellow-400/15",
+	lime: "gw:bg-lime-400/20 gw:text-lime-700 gw:group-data-hover:bg-lime-400/30 gw:dark:bg-lime-400/10 gw:dark:text-lime-300 gw:dark:group-data-hover:bg-lime-400/15",
+	green: "gw:bg-green-500/15 gw:text-green-700 gw:group-data-hover:bg-green-500/25 gw:dark:bg-green-500/10 gw:dark:text-green-400 gw:dark:group-data-hover:bg-green-500/20",
+	emerald: "gw:bg-emerald-500/15 gw:text-emerald-700 gw:group-data-hover:bg-emerald-500/25 gw:dark:bg-emerald-500/10 gw:dark:text-emerald-400 gw:dark:group-data-hover:bg-emerald-500/20",
+	teal: "gw:bg-teal-500/15 gw:text-teal-700 gw:group-data-hover:bg-teal-500/25 gw:dark:bg-teal-500/10 gw:dark:text-teal-300 gw:dark:group-data-hover:bg-teal-500/20",
+	cyan: "gw:bg-cyan-400/20 gw:text-cyan-700 gw:group-data-hover:bg-cyan-400/30 gw:dark:bg-cyan-400/10 gw:dark:text-cyan-300 gw:dark:group-data-hover:bg-cyan-400/15",
+	sky: "gw:bg-sky-500/15 gw:text-sky-700 gw:group-data-hover:bg-sky-500/25 gw:dark:bg-sky-500/10 gw:dark:text-sky-300 gw:dark:group-data-hover:bg-sky-500/20",
+	blue: "gw:bg-blue-500/15 gw:text-blue-700 gw:group-data-hover:bg-blue-500/25 gw:dark:text-blue-400 gw:dark:group-data-hover:bg-blue-500/25",
+	indigo: "gw:bg-indigo-500/15 gw:text-indigo-700 gw:group-data-hover:bg-indigo-500/25 gw:dark:text-indigo-400 gw:dark:group-data-hover:bg-indigo-500/20",
+	violet: "gw:bg-violet-500/15 gw:text-violet-700 gw:group-data-hover:bg-violet-500/25 gw:dark:text-violet-400 gw:dark:group-data-hover:bg-violet-500/20",
+	purple: "gw:bg-purple-500/15 gw:text-purple-700 gw:group-data-hover:bg-purple-500/25 gw:dark:text-purple-400 gw:dark:group-data-hover:bg-purple-500/20",
+	fuchsia: "gw:bg-fuchsia-400/15 gw:text-fuchsia-700 gw:group-data-hover:bg-fuchsia-400/25 gw:dark:bg-fuchsia-400/10 gw:dark:text-fuchsia-400 gw:dark:group-data-hover:bg-fuchsia-400/20",
+	pink: "gw:bg-pink-400/15 gw:text-pink-700 gw:group-data-hover:bg-pink-400/25 gw:dark:bg-pink-400/10 gw:dark:text-pink-400 gw:dark:group-data-hover:bg-pink-400/20",
+	rose: "gw:bg-rose-400/15 gw:text-rose-700 gw:group-data-hover:bg-rose-400/25 gw:dark:bg-rose-400/10 gw:dark:text-rose-400 gw:dark:group-data-hover:bg-rose-400/20",
+	zinc: "gw:bg-zinc-600/10 gw:text-zinc-700 gw:group-data-hover:bg-zinc-600/20 gw:dark:bg-white/5 gw:dark:text-zinc-400 gw:dark:group-data-hover:bg-white/10"
+};
+function c({ color: t = "zinc", className: n, ...r }) {
+	let o = i(() => e("gw:inline-flex gw:items-center gw:gap-x-1.5 gw:rounded-md gw:px-1.5 gw:py-0.5 gw:text-sm/5 gw:font-medium gw:sm:text-xs/5 gw:forced-colors:outline", s[t], n), [n, t]);
+	return /* @__PURE__ */ a("span", {
+		...r,
+		className: o
+	});
+}
+var l = r.forwardRef(function({ color: r = "zinc", className: s, children: l, ...u }, d) {
+	let f = i(() => e("gw:group gw:relative gw:inline-flex gw:rounded-md gw:focus:outline-hidden gw:data-focus:outline gw:data-focus:outline-2 gw:data-focus:outline-offset-2 gw:data-focus:outline-blue-500 gw:hover:cursor-pointer", s), [s]);
+	return "href" in u ? /* @__PURE__ */ a(t, {
+		...u,
+		className: f,
+		ref: d,
+		children: /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(c, {
+			color: r,
+			children: l
+		}) })
+	}) : /* @__PURE__ */ a(o, {
+		...u,
+		className: f,
+		ref: d,
+		children: /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(c, {
+			color: r,
+			children: l
+		}) })
+	});
+});
+//#endregion
+export { c as Badge, l as BadgeButton };

package/dist/es/components/display/card.js

@@ -0,0 +1,13 @@
+import e from "../../gw-merge.js";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region lib/components/display/card.jsx
+function r({ className: r, children: i, stretch: a = !1, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(() => e("gw:w-full gw:p-3 gw:shadow gw:bg-white gw:rounded-md gw:border gw:border-gray-200", a ? "gw:self-stretch" : "", r), [r, a]),
+		...o,
+		children: i
+	});
+}
+//#endregion
+export { r as Card, r as default };

package/dist/es/components/display/divider.js

@@ -0,0 +1,25 @@
+import e from "../../gw-merge.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/components/display/divider.jsx
+function r({ text: r, className: i = null, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("gw:py-3", i),
+		...a,
+		children: /* @__PURE__ */ n("div", {
+			className: "gw:relative",
+			children: [/* @__PURE__ */ t("div", {
+				"aria-hidden": "true",
+				className: "gw:absolute gw:inset-0 gw:flex gw:items-center",
+				children: /* @__PURE__ */ t("div", { className: "gw:w-full gw:border-t gw:border-gray-300" })
+			}), /* @__PURE__ */ t("div", {
+				className: "gw:relative gw:flex gw:justify-center",
+				children: /* @__PURE__ */ t("span", {
+					className: "gw:bg-white gw:px-3 gw:text-base gw:font-semibold gw:leading-6 gw:text-gray-900",
+					children: r
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { r as Divider, r as default };

package/dist/es/components/display/headings.js

@@ -0,0 +1,34 @@
+import e from "../../gw-merge.js";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region lib/components/display/headings.jsx
+function r({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ n("h1", {
+		className: t(() => e("gw:text-3xl gw:font-bold", r), [r]),
+		...a,
+		children: i
+	});
+}
+function i({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ n("h2", {
+		className: t(() => e("gw:text-2xl gw:font-bold", r), [r]),
+		...a,
+		children: i
+	});
+}
+function a({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ n("h3", {
+		className: t(() => e("gw:text-xl gw:font-bold", r), [r]),
+		...a,
+		children: i
+	});
+}
+function o({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ n("h4", {
+		className: t(() => e("gw:text-lg gw:font-bold", r), [r]),
+		...a,
+		children: i
+	});
+}
+//#endregion
+export { r as H1, i as H2, a as H3, o as H4 };