@undp/design-system-react/dist/date-range-picker-D3YOSjDh.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 "./arrow-right-DmXsnaI4.js";
import { t as r } from "./calendar-DozgSes3.js";
import { i, r as a, t as o } from "./popover-CJlFZacQ.js";
import { i as s, r as c, t as l } from "./calendar-card-Dj80RXdf.js";
import { useEffect as u, useState as d } from "react";
import { jsx as f, jsxs as p } from "react/jsx-runtime";
//#region node_modules/date-fns/subDays.js
function m(e, t, n) {
	return s(e, -t, n);
}
//#endregion
//#region src/components/ui/date-range-picker.tsx
var h = t("w-full h-auto bg-background rounded-base text-content-primary text-base transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-disabled placeholder:text-content-placeholder", {
	variants: {
		variant: {
			light: "border border-stroke",
			normal: "border-2 border-foreground"
		},
		rounded: {
			base: "rounded",
			sm: "rounded-sm",
			md: "rounded-md",
			lg: "rounded-lg",
			xl: "rounded-xl",
			"2xl": "rounded-2xl",
			full: "rounded-full"
		},
		inputSize: {
			sm: "px-2.5 py-1",
			base: "p-2.5"
		}
	},
	defaultVariants: {
		inputSize: "base",
		variant: "normal",
		rounded: "base"
	}
});
function g({ onValueChange: t, value: s, defaultValue: g, disablePopover: _, classNames: v, variant: y, inputSize: b, numberOfMonths: x = 2, ...S }) {
	let [C, w] = d({
		from: s?.from || g?.from || void 0,
		to: s?.to || g?.to || void 0
	}), [T, E] = d(!0), [D, O] = d(!1), k = (e) => {
		e && (T ? (w({
			from: e,
			to: void 0
		}), E(!1)) : (C.from && e < C.from ? w({
			from: e,
			to: C.from
		}) : w((t) => ({
			...t,
			to: e
		})), E(!0), O(!1)));
	};
	return u(() => {
		t?.({
			from: C.from,
			to: C.to
		});
	}, [
		C.from,
		C.to,
		t
	]), /* @__PURE__ */ p(o, {
		open: D,
		onOpenChange: O,
		children: [/* @__PURE__ */ p(i, {
			className: e(h({
				inputSize: b,
				variant: y
			}), v?.popOverTrigger),
			children: [/* @__PURE__ */ f(r, { className: e("size-4 text-content-placeholder", v?.popOverTriggerIcon) }), C.from ? /* @__PURE__ */ p("div", {
				className: "flex grow items-center gap-4",
				children: [
					/* @__PURE__ */ f("p", {
						className: "mt-1 grow p-0 text-left font-body text-content-primary",
						children: c(C.from, "MMM d, yyyy")
					}),
					/* @__PURE__ */ f(n, {
						size: 14,
						className: "text-content-primary"
					}),
					C.to ? /* @__PURE__ */ f("p", {
						className: "mt-1 grow p-0 text-left font-body text-content-primary",
						children: c(C.to, "MMM d, yyyy")
					}) : /* @__PURE__ */ f("div", {
						className: "grow text-left text-content-placeholder",
						children: T ? "Start date" : "End date"
					})
				]
			}) : /* @__PURE__ */ p("div", {
				className: "flex grow items-center gap-4",
				children: [
					/* @__PURE__ */ f("p", {
						className: "mt-1 grow p-0 text-left font-body text-content-placeholder",
						children: "Start date"
					}),
					/* @__PURE__ */ f(n, {
						size: 14,
						className: "text-content-primary"
					}),
					/* @__PURE__ */ f("p", {
						className: "mt-1 grow p-0 text-left font-body text-content-placeholder",
						children: "End date"
					})
				]
			})]
		}), /* @__PURE__ */ f(a, {
			className: e("w-auto p-0", v?.popOverContent),
			align: "start",
			children: /* @__PURE__ */ f(l, {
				mode: "single",
				numberOfMonths: x,
				selected: T ? C.from : C.to,
				modifiers: {
					range_start: C.from ? [C.from] : [],
					range_middle: C.from && C.to ? {
						from: C.from,
						to: m(C.to, 1)
					} : void 0,
					range_end: C.to ? [C.to] : []
				},
				onSelect: (e) => {
					k(e);
				},
				...S
			})
		})]
	});
}
//#endregion
export { g as t };

//# sourceMappingURL=date-range-picker-D3YOSjDh.js.map