@undp/design-system-react/dist/tabs-DMEfy4J0.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { t as n } from "./dist-jqIPNHDe.js";
import { n as r } from "./dist-BKfyhBSH.js";
import { n as i, t as a } from "./dist-CwCVtfik.js";
import { t as o } from "./dist-CnnnGPaT.js";
import { t as s } from "./dist-DfB3OR9K.js";
import { t as c } from "./dist-pXPIaj85.js";
import { n as l, r as u, t as d } from "./dist-CNDtQX6n.js";
import * as f from "react";
import p from "react";
import { jsx as m } from "react/jsx-runtime";
//#region node_modules/@radix-ui/react-tabs/dist/index.mjs
var h = Object.defineProperty, g = (e, t) => h(e, "name", {
	value: t,
	configurable: !0
}), _ = "Tabs", [v, y] = r(_, [u]), b = u(), [x, S] = v(_), C = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ g(function(e, t) {
	let { __scopeTabs: r, value: i, onValueChange: o, defaultValue: l, orientation: u = "horizontal", dir: d, activationMode: f = "automatic", ...p } = e, h = c(d), [g, v] = a({
		prop: i,
		onChange: o,
		defaultProp: l ?? "",
		caller: _
	});
	return /* @__PURE__ */ m(x, {
		scope: r,
		baseId: s(),
		value: g,
		onValueChange: v,
		orientation: u,
		dir: h,
		activationMode: f,
		children: /* @__PURE__ */ m(n.div, {
			dir: h,
			"data-orientation": u,
			...p,
			ref: t
		})
	});
}, "Tabs")), w = "TabsList", T = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ g(function(e, t) {
	let { __scopeTabs: r, loop: i = !0, ...a } = e, o = S(w, r);
	return /* @__PURE__ */ m(l, {
		asChild: !0,
		...b(r),
		orientation: o.orientation,
		dir: o.dir,
		loop: i,
		children: /* @__PURE__ */ m(n.div, {
			role: "tablist",
			"aria-orientation": o.orientation,
			...a,
			ref: t
		})
	});
}, "TabsList")), E = "TabsTrigger", D = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ g(function(e, t) {
	let { __scopeTabs: r, value: a, disabled: o = !1, ...s } = e, c = S(E, r), l = b(r), u = A(c.baseId, a), f = j(c.baseId, a), p = a === c.value;
	return /* @__PURE__ */ m(d, {
		asChild: !0,
		...l,
		focusable: !o,
		active: p,
		children: /* @__PURE__ */ m(n.button, {
			type: "button",
			role: "tab",
			"aria-selected": p,
			"aria-controls": f,
			"data-state": p ? "active" : "inactive",
			"data-disabled": o ? "" : void 0,
			disabled: o,
			id: u,
			...s,
			ref: t,
			onMouseDown: i(e.onMouseDown, (e) => {
				!o && e.button === 0 && e.ctrlKey === !1 ? c.onValueChange(a) : e.preventDefault();
			}),
			onKeyDown: i(e.onKeyDown, (e) => {
				o || e.target !== e.currentTarget || [" ", "Enter"].includes(e.key) && c.onValueChange(a);
			}),
			onFocus: i(e.onFocus, () => {
				let e = c.activationMode !== "manual";
				!p && !o && e && c.onValueChange(a);
			})
		})
	});
}, "TabsTrigger")), O = "TabsContent", k = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ g(function(e, t) {
	let { __scopeTabs: r, value: i, forceMount: a, children: s, ...c } = e, l = S(O, r), u = A(l.baseId, i), d = j(l.baseId, i), p = i === l.value, h = f.useRef(p);
	return f.useEffect(() => {
		let e = requestAnimationFrame(() => h.current = !1);
		return () => cancelAnimationFrame(e);
	}, []), /* @__PURE__ */ m(o, {
		present: a || p,
		children: ({ present: r }) => /* @__PURE__ */ m(n.div, {
			"data-state": p ? "active" : "inactive",
			"data-orientation": l.orientation,
			role: "tabpanel",
			"aria-labelledby": u,
			hidden: !r,
			id: d,
			tabIndex: 0,
			...c,
			ref: t,
			style: {
				...e.style,
				animationDuration: h.current ? "0s" : void 0
			},
			children: r && s
		})
	});
}, "TabsContent"));
function A(e, t) {
	return `${e}-trigger-${t}`;
}
g(A, "makeTriggerId");
function j(e, t) {
	return `${e}-content-${t}`;
}
g(j, "makeContentId");
var M = C, N = T, P = D, F = k, I = t("inline-flex text-base rtl:[direction:rtl] uppercase font-bold justify-center whitespace-nowrap border-b-2 border-stroke-sm p-0 pb-2 mt-3 mr-6 -mb-0.5 transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-ring disabled:pointer-events-none disabled:opacity-disabled", {
	variants: { color: {
		primary: "data-[state=active]:border-primary",
		secondary: "data-[state=active]:border-secondary",
		tertiary: "data-[state=active]:border-tertiary",
		quaternary: "data-[state=active]:border-quaternary",
		foreground: "data-[state=active]:border-foreground"
	} },
	defaultVariants: { color: "primary" }
}), L = p.createContext({ color: void 0 }), R = p.forwardRef(({ color: t, className: n, ...r }, i) => {
	let a = p.useMemo(() => ({ color: t }), [t]);
	return /* @__PURE__ */ m(L.Provider, {
		value: a,
		children: /* @__PURE__ */ m(M, {
			className: e("rtl:[direction:rtl]", n),
			...r,
			ref: i
		})
	});
});
R.displayName = M.displayName;
var z = p.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ m(N, {
	...n,
	ref: r,
	className: e("mb-10 inline-flex w-full items-center border-stroke-sm border-b-2 pl-12 rtl:[direction:rtl]", t)
}));
z.displayName = N.displayName;
var B = p.forwardRef(({ className: t, ...n }, r) => {
	let { color: i } = p.useContext(L);
	return /* @__PURE__ */ m(P, {
		...n,
		ref: r,
		className: e(I({ color: i }), t)
	});
});
B.displayName = P.displayName;
var V = p.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ m(F, {
	...n,
	ref: r,
	className: e("mt-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1", t)
}));
V.displayName = F.displayName;
//#endregion
export { B as i, V as n, z as r, R as t };

//# sourceMappingURL=tabs-DMEfy4J0.js.map