@undp/design-system-react/dist/Sidebar.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import n, { useEffect as r, useEffectEvent as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/components/ui/sidebar-nav.tsx
var o = t("w-full @2xl:w-1/2 @3xl:w-1/3 @7xl:w-1/4 @8xl:w-1/5", {
	variants: { variant: {
		noEffect: "",
		background: "bg-surface",
		border: "border-r border-r-stroke"
	} },
	defaultVariants: { variant: "background" }
}), s = n.createContext({
	selectedValue: void 0,
	classNames: void 0,
	activeValue: void 0,
	onValueChange: () => {}
}), c = n.forwardRef(({ className: t, children: c, variant: l, defaultValue: u, activeValue: d, activeItemClass: f, hoverItemClass: p, onValueChange: m, ...h }, g) => {
	let [_, v] = n.useState(d || u || ""), y = n.useCallback((e) => {
		v(d || e), m?.(e);
	}, [m, d]), b = i((e) => {
		v(e || u || "");
	});
	r(() => {
		b(d);
	}, [d]);
	let x = n.useMemo(() => ({
		activeItemClass: f,
		activeValue: d,
		selectedValue: _,
		hoverItemClass: p,
		onValueChange: y
	}), [
		f,
		d,
		_,
		p,
		y
	]);
	return /* @__PURE__ */ a(s.Provider, {
		value: x,
		children: /* @__PURE__ */ a("div", {
			className: "@container w-full",
			children: /* @__PURE__ */ a("div", {
				className: e(o({ variant: l }), t),
				ref: g,
				...h,
				children: c
			})
		})
	});
});
c.displayName = "Sidebar";
var l = n.forwardRef(({ className: t, children: r, value: i, ...o }, c) => {
	let { selectedValue: l, classNames: u, onValueChange: d } = n.useContext(s);
	return /* @__PURE__ */ a("button", {
		...o,
		ref: c,
		className: e("flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent p-4 text-base text-content-primary hover:bg-surface-hover", t, u?.controls, l === i && u?.active),
		onClick: () => {
			i && d(i);
		},
		children: r
	});
});
l.displayName = "SidebarItem";
//#endregion
export { c as Sidebar, l as SidebarItem };

//# sourceMappingURL=Sidebar.js.map