@undp/design-system-react/dist/visualization-widget-vNZMgnZZ.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./createLucideIcon-JAvQ_M0R.js";
import { Button as n } from "./Button.js";
import r from "react";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
var o = t("chevrons-left", [["path", {
	d: "m11 17-5-5 5-5",
	key: "13zhaf"
}], ["path", {
	d: "m18 17-5-5 5-5",
	key: "h8a8et"
}]]), s = t("chevrons-right", [["path", {
	d: "m6 17 5-5-5-5",
	key: "xnjwq"
}], ["path", {
	d: "m13 17 5-5-5-5",
	key: "17xmmf"
}]]), c = r.forwardRef(({ className: t, children: n, ...r }, a) => /* @__PURE__ */ i("div", {
	className: e("@container w-full border border-stroke", t),
	ref: a,
	...r,
	children: n
}));
c.displayName = "VisualizationWidget";
var l = r.createContext({
	selectedValue: void 0,
	hoverItemClass: void 0,
	activeItemClass: void 0,
	onValueChange: () => {}
}), u = r.forwardRef(({ className: t, children: n, defaultValue: a, activeItemClass: o, hoverItemClass: s, onChange: c, ...u }, d) => {
	let [f, p] = r.useState(a || ""), m = r.useCallback((e) => {
		p(e), c?.(e);
	}, [c]), h = r.useMemo(() => ({
		activeItemClass: o,
		selectedValue: f,
		hoverItemClass: s,
		onValueChange: m
	}), [
		f,
		o,
		s,
		m
	]);
	return /* @__PURE__ */ i(l.Provider, {
		value: h,
		children: /* @__PURE__ */ i("div", {
			className: e("flex w-full gap-0 bg-surface-sm", t),
			ref: d,
			...u,
			children: n
		})
	});
});
u.displayName = "VisualizationWidgetHeader";
var d = r.forwardRef(({ className: t, children: n, value: a, ...o }, s) => {
	let { selectedValue: c, activeItemClass: u, hoverItemClass: d, onValueChange: f } = r.useContext(l);
	return /* @__PURE__ */ i("button", {
		ref: s,
		type: "button",
		...o,
		onClick: () => f(a),
		className: e("flex grow cursor-pointer flex-col items-center justify-center gap-1 border-0 border-r border-r-stroke bg-surface-2xs p-3 font-medium text-content-secondary text-sm last:border-r-0", c === a ? u || "bg-background text-primary" : "", d ? `hover:${d}` : "hover:bg-background", t),
		children: n
	});
});
d.displayName = "VisualizationWidgetHeaderItem";
var f = r.forwardRef(({ className: t, children: n, ...r }, a) => /* @__PURE__ */ i("div", {
	className: e("flex @3xl:max-h-[80vh] max-h-none @3xl:flex-row flex-col flex-wrap items-stretch gap-0", t),
	ref: a,
	...r,
	children: n
}));
f.displayName = "VisualizationWidgetBody";
var p = r.forwardRef(({ className: t, children: c, collapsible: l, ...u }, d) => {
	let [f, p] = r.useState(l?.defaultCollapsed || !1);
	return /* @__PURE__ */ a("div", {
		className: e("undp-scrollbar @3xl:max-h-[80vh] max-h-none @3xl:border-r @3xl:border-r-stroke border-r-0 bg-surface", f ? "@3xl:w-10 w-full px-2 py-4" : "@3xl:w-1/3 @7xl:w-1/4 @8xl:w-1/5 w-full p-4", t),
		ref: d,
		...u,
		children: [/* @__PURE__ */ i("div", {
			className: "relative @3xl:block hidden w-full",
			children: l?.enabled === !1 ? null : /* @__PURE__ */ i(n, {
				type: "button",
				variant: "surface-hard",
				size: "sm",
				padding: "none",
				onClick: () => p(!f),
				className: e("absolute top-0 right-0 flex h-6 w-6 rounded-full p-0 text-content-primary normal-case", l?.triggerButtonClassName),
				style: l?.triggerButtonStyles,
				arrow: !1,
				children: l?.triggerButtonChildren || i(f ? s : o, {})
			})
		}), l?.enabled !== !1 && f ? null : c]
	});
});
p.displayName = "VisualizationWidgetBodySidebar";
var m = r.forwardRef(({ className: t, children: n, ...r }, a) => /* @__PURE__ */ i("div", {
	className: e("undp-scrollbar flex @3xl:max-h-[80vh] max-h-none w-full flex-1 flex-wrap bg-background", t),
	ref: a,
	...r,
	children: n
}));
m.displayName = "VisualizationWidgetBodyContent";
//#endregion
export { u as a, p as i, f as n, d as o, m as r, c as t };

//# sourceMappingURL=visualization-widget-vNZMgnZZ.js.map