@undp/design-system-react/dist/DateTimePicker.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 "./calendar-DozgSes3.js";
import { i as r, r as i, t as a } from "./popover-CJlFZacQ.js";
import { t as o } from "./separator-B3USgYl6.js";
import { r as s, t as c } from "./calendar-card-Dj80RXdf.js";
import { useEffect as l, useState as u } from "react";
import { jsx as d, jsxs as f } from "react/jsx-runtime";
//#region src/components/ui/date-time-picker.tsx
var p = 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 m({ selected: t, onSelect: m, disablePopover: h, disabled: g, classNames: _, variant: v, inputSize: y, onValueChange: b, disabledHours: x = [], disabledMinutes: S = [], placeHolder: C = "Pick a date and time", ...w }) {
	let [T, E] = u(), [D, O] = u(0), [k, A] = u(0);
	return l(() => {
		b?.(T);
	}, [T, b]), /* @__PURE__ */ f(a, { children: [/* @__PURE__ */ f(r, {
		className: e(p({
			inputSize: y,
			variant: v
		}), _?.popOverTrigger),
		children: [/* @__PURE__ */ d(n, { className: e("size-4 text-content-placeholder", _?.popOverTriggerIcon) }), T ? /* @__PURE__ */ d("p", {
			className: "mt-1 p-0 font-body text-content-primary",
			children: s(T, "MMM d, yyyy HH:mm")
		}) : /* @__PURE__ */ d("p", {
			className: "mt-1 p-0 font-body text-content-placeholder",
			children: C
		})]
	}), /* @__PURE__ */ d(i, {
		className: e("w-auto p-0", _?.popOverContent),
		align: "start",
		children: /* @__PURE__ */ f("div", {
			className: "flex items-start gap-0",
			children: [
				/* @__PURE__ */ d(c, {
					mode: "single",
					selected: t || T,
					onSelect: (e, t, n, r) => {
						if (!e) return;
						let i = new Date(e), a = T?.getHours() ?? D, o = T?.getMinutes() ?? k;
						i.setHours(a, o), O(a), A(o), E(i), m?.(e, t, n, r);
					},
					disabled: g,
					...w
				}),
				/* @__PURE__ */ d(o, {
					orientation: "vertical",
					color: "surface-lg"
				}),
				/* @__PURE__ */ f("div", {
					className: "flex flex-col gap-4 px-2 pt-2",
					children: [/* @__PURE__ */ f("p", {
						className: "mb-0 flex h-7 items-center justify-center text-content-primary text-sm",
						children: [
							String(D).padStart(2, "0"),
							":",
							String(k).padStart(2, "0")
						]
					}), /* @__PURE__ */ f("div", {
						className: "flex max-h-[204px]",
						children: [
							/* @__PURE__ */ f("div", {
								className: "undp-scrollbar flex flex-col items-center gap-1.5 overflow-y-auto overflow-x-hidden px-4",
								children: [/* @__PURE__ */ d("p", {
									className: "sticky top-0 mb-0 bg-surface font-bold text-[14px] text-content-primary",
									children: "HH"
								}), Array.from({ length: 24 }, (t, n) => /* @__PURE__ */ d("button", {
									type: "button",
									className: e("mb-0 cursor-pointer rounded-sm p-1 text-content-primary text-sm hover:bg-surface hover:text-content-primary disabled:pointer-events-none disabled:opacity-disabled", n === D && "bg-surface-hard font-bold text-content-primary hover:bg-surface-hard-hover"),
									onClick: () => {
										O(n), E((e) => {
											let t = new Date(e ?? /* @__PURE__ */ new Date());
											return t.setHours(n), t;
										});
									},
									disabled: x.includes(n),
									children: String(n).padStart(2, "0")
								}, n))]
							}),
							/* @__PURE__ */ d(o, { orientation: "vertical" }),
							/* @__PURE__ */ f("div", {
								className: "overflow-x-hidden! undp-scrollbar flex flex-col items-center gap-1.5 overflow-y-auto px-4",
								children: [/* @__PURE__ */ d("p", {
									className: "sticky top-0 mb-0 bg-surface font-bold text-[14px] text-content-primary",
									children: "MM"
								}), Array.from({ length: 60 }, (t, n) => /* @__PURE__ */ d("button", {
									type: "button",
									className: e("mb-0 cursor-pointer rounded-sm p-1 text-content-primary text-sm hover:bg-surface hover:text-content-primary disabled:pointer-events-none disabled:opacity-disabled", n === k && "bg-surface-hard font-bold text-content-primary hover:bg-surface-hard-hover"),
									onClick: () => {
										A(n), E((e) => {
											let t = new Date(e ?? /* @__PURE__ */ new Date());
											return t.setMinutes(n), t;
										});
									},
									disabled: S.includes(n),
									children: String(n).padStart(2, "0")
								}, n))]
							})
						]
					})]
				})
			]
		})
	})] });
}
//#endregion
export { m as DateTimePicker };

//# sourceMappingURL=DateTimePicker.js.map