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

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { useEffect as n, useEffectEvent as r, useState as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/components/ui/segmented-control.tsx
var o = t("inline-flex rounded-base bg-surface", {
	variants: {
		variant: {
			normal: "border-2 border-foreground bg-background",
			light: "border-0"
		},
		size: {
			sm: "",
			base: ""
		},
		rounded: {
			base: "rounded-base",
			sm: "rounded-sm",
			md: "rounded-md",
			lg: "rounded-lg",
			xl: "rounded-xl",
			"2xl": "rounded-2xl",
			full: "rounded-full"
		}
	},
	compoundVariants: [
		{
			variant: "normal",
			size: "sm",
			class: "p-0"
		},
		{
			variant: "normal",
			size: "base",
			class: "p-0"
		},
		{
			variant: "light",
			size: "sm",
			class: "p-[3px]"
		},
		{
			variant: "light",
			size: "base",
			class: "p-[5px]"
		}
	],
	defaultVariants: {
		size: "base",
		variant: "normal",
		rounded: "base"
	}
}), s = t("disabled:opacity-disabled disabled:cursor-not-allowed", {
	variants: {
		variant: {
			normal: "",
			light: ""
		},
		color: {
			primary: "",
			secondary: "",
			tertiary: "",
			quaternary: "",
			foreground: ""
		},
		rounded: {
			base: "rounded-base",
			sm: "rounded-sm",
			md: "rounded-md",
			lg: "rounded-lg",
			xl: "rounded-xl",
			"2xl": "rounded-2xl",
			full: "rounded-full"
		}
	},
	compoundVariants: [
		{
			variant: "normal",
			color: "primary",
			class: "bg-primary text-content-reverse"
		},
		{
			variant: "normal",
			color: "secondary",
			class: "bg-secondary text-content-reverse"
		},
		{
			variant: "normal",
			color: "tertiary",
			class: "bg-tertiary text-content-reverse"
		},
		{
			variant: "normal",
			color: "quaternary",
			class: "bg-quaternary text-content-primary"
		},
		{
			variant: "normal",
			color: "foreground",
			class: "font-bold bg-foreground text-content-reverse"
		},
		{
			variant: "light",
			color: "primary",
			class: "font-bold bg-background text-primary"
		},
		{
			variant: "light",
			color: "secondary",
			class: "font-bold bg-background text-secondary"
		},
		{
			variant: "light",
			color: "tertiary",
			class: "font-bold bg-background text-tertiary"
		},
		{
			variant: "light",
			color: "quaternary",
			class: "font-bold bg-background text-quaternary"
		},
		{
			variant: "light",
			color: "foreground",
			class: "font-bold bg-background text-foreground"
		}
	],
	defaultVariants: {
		color: "primary",
		rounded: "base",
		variant: "normal"
	}
}), c = t("text-content-primary hover:bg-surface-hover disabled:hover:bg-transparent disabled:hover:text-inherit disabled:cursor-not-allowed disabled:opacity-25", {
	variants: {
		variant: {
			normal: "",
			light: ""
		},
		color: {
			primary: "",
			secondary: "",
			tertiary: "",
			quaternary: "",
			foreground: ""
		},
		rounded: {
			base: "rounded-base",
			sm: "rounded-sm",
			md: "rounded-md",
			lg: "rounded-lg",
			xl: "rounded-xl",
			"2xl": "rounded-2xl",
			full: "rounded-full"
		}
	},
	compoundVariants: [
		{
			variant: "normal",
			color: "primary",
			class: "hover:bg-primary-light"
		},
		{
			variant: "normal",
			color: "secondary",
			class: "hover:bg-secondary-light"
		},
		{
			variant: "normal",
			color: "tertiary",
			class: "hover:bg-tertiary-light"
		},
		{
			variant: "normal",
			color: "quaternary",
			class: "hover:bg-quaternary-hover"
		},
		{
			variant: "normal",
			color: "foreground",
			class: "hover:bg-surface-hover"
		},
		{
			variant: "light",
			color: "primary",
			class: "hover:text-primary disabled:hover:text-inherit"
		},
		{
			variant: "light",
			color: "secondary",
			class: "hover:text-secondary disabled:hover:text-inherit"
		},
		{
			variant: "light",
			color: "tertiary",
			class: "hover:text-tertiary disabled:hover:text-inherit"
		},
		{
			variant: "light",
			color: "quaternary",
			class: "hover:text-quaternary disabled:hover:text-inherit"
		},
		{
			variant: "light",
			color: "foreground",
			class: "hover:text-foreground disabled:hover:text-inherit"
		}
	],
	defaultVariants: {
		color: "primary",
		rounded: "base",
		variant: "normal"
	}
});
function l(t) {
	let { options: l, defaultValue: u, onValueChange: d, className: f, size: p, variant: m, color: h, value: g, disabled: _, rounded: v, buttonStyle: y, classNames: b } = t, [x, S] = i(g || u || l[0].value), C = (e) => {
		S(e), d?.(e);
	}, w = r((e) => {
		S(e || u || l[0].value);
	});
	return n(() => {
		w(g);
	}, [g]), /* @__PURE__ */ a("div", {
		className: e(o({
			size: p,
			variant: m,
			rounded: v
		}), f, b?.control),
		children: l.map((t) => /* @__PURE__ */ a("button", {
			disabled: _ || t.disabled,
			type: "button",
			onClick: () => C(t.value),
			className: e("rounded-sm px-4 py-2 text-sm transition-all duration-200", x === t.value ? s({
				color: h,
				rounded: v,
				variant: m
			}) : c({
				color: h,
				rounded: v,
				variant: m
			}), b?.items, x === t.value && b?.active),
			style: y?.items || x === t.value && y?.active ? {
				...y?.items || {},
				...x === t.value ? y?.active : {}
			} : void 0,
			children: t.label
		}, t.value))
	});
}
//#endregion
export { l as SegmentedControl };

//# sourceMappingURL=SegmentedControl.js.map