rangeflow 1.0.0

package/dist/index.js

@@ -0,0 +1,852 @@
+import { createContext as e, createElement as t, memo as n, startTransition as r, useCallback as i, useContext as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import u from "dayjs";
+import { immer as d } from "zustand/middleware/immer";
+import { createStore as f } from "zustand/vanilla";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { RestrictToHorizontalAxis as h, restrictShapeToBoundingRectangle as g } from "@dnd-kit/abstract/modifiers";
+import { DragDropProvider as _, DragOverlay as v, useDragDropMonitor as ee, useDraggable as te } from "@dnd-kit/react";
+import y, { clsx as b } from "clsx";
+import { AnimatePresence as ne, motion as x } from "motion/react";
+import { useStore as re } from "zustand";
+import { KeyboardSensor as ie, PointerSensor as ae } from "@dnd-kit/dom";
+import { Group as oe, Panel as S, Separator as C } from "react-resizable-panels";
+import { Modifier as w, configurator as T } from "@dnd-kit/abstract";
+import { Rectangle as E } from "@dnd-kit/geometry";
+import { effect as se, signal as D } from "@dnd-kit/state";
+import { DayPicker as ce } from "react-day-picker";
+import * as O from "@radix-ui/react-popover";
+//#region src/package/rangeflow/constants/date-ranges.ts
+var le = [
+	{
+		label: "2 Weeks",
+		from: u().subtract(1, "weeks").toDate(),
+		to: u().add(1, "weeks").toDate()
+	},
+	{
+		label: "30 Days",
+		from: u().subtract(15, "day").toDate(),
+		to: u().add(15, "day").toDate()
+	},
+	{
+		label: "90 Days",
+		from: u().subtract(45, "day").toDate(),
+		to: u().add(45, "day").toDate()
+	},
+	{
+		label: "6 Months",
+		from: u().subtract(3, "months").toDate(),
+		to: u().add(3, "months").toDate()
+	},
+	{
+		label: "1 Year",
+		from: u().subtract(6, "months").toDate(),
+		to: u().add(6, "months").toDate()
+	}
+], k = "left-spacer", A = "right-spacer", j = "slider-track-thumb";
+//#endregion
+//#region src/package/rangeflow/utils/clamp.ts
+function M(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+//#endregion
+//#region src/package/rangeflow/utils/interpolate.ts
+function N(e, t) {
+	return (n) => {
+		let [r, i] = e, [a, o] = t;
+		return a + (n - r) / (i - r) * (o - a);
+	};
+}
+//#endregion
+//#region src/package/rangeflow/utils/create-slider-values.ts
+var P = N([1, 100], [5, 100]);
+function F(e, t) {
+	let n = u(e.from).startOf("day"), r = u(e.to).startOf("day").diff(n, "day"), i = u(t.from).startOf("day"), a = u(t.to).startOf("day"), o = Math.max(i.diff(n, "day"), 0), s = Math.max(a.diff(i, "day"), 0) * 100 / r, c = o * 100 / r, l = Math.max(P(s), 5), d = M(c - (l - s), 0, Math.max(100 - l, 0));
+	return {
+		size: l,
+		left: d,
+		right: Math.max(100 - d - l, 0)
+	};
+}
+//#endregion
+//#region src/package/rangeflow/context/hooks/use-context-api.ts
+function I(e, t, n) {
+	o(() => {
+		if (!n) return;
+		let r = n.__internal.store, i = n.__internal.refs;
+		return r.current = e, i.current = t, () => {
+			r.current = null, i.current = null;
+		};
+	}, [
+		n,
+		e,
+		t
+	]);
+}
+//#endregion
+//#region src/package/rangeflow/context/hooks/use-context-events.ts
+function L({ onChange: e }) {
+	let t = c({ onChange: e });
+	return o(() => {
+		t.current.onChange = e;
+	}), s(() => ({ onChange: (e) => t.current.onChange?.(e) }), []);
+}
+//#endregion
+//#region src/package/rangeflow/context/hooks/use-context-refs.ts
+function R() {
+	let e = c(null);
+	return s(() => ({ slider: { root: e } }), []);
+}
+//#endregion
+//#region src/package/rangeflow/context/hooks/use-context-slots.ts
+function z(e) {
+	return s(() => ({ ...e }), [e]);
+}
+//#endregion
+//#region src/package/rangeflow/context/root.ts
+var B = (e) => f()(d((t) => ({
+	...e,
+	update: (e) => t(e),
+	reset: () => t(() => structuredClone(e))
+}))), V = e(null);
+//#endregion
+//#region src/package/rangeflow/context/ContextProvider.tsx
+function H({ children: e, defaultRange: t, defaultSelected: n, disabled: r, duration: i, calendar: a = !0, ranges: o = le, CalendarProps: c, Slots: u, api: d, onChange: f }) {
+	let m = R(), h = L({ onChange: f }), g = z(u), [_] = l(() => B({
+		ranges: o,
+		disabled: r,
+		duration: i,
+		calendar: a,
+		range: t,
+		default_range: t,
+		selected_date: n,
+		slider: F(t, n),
+		CalendarProps: c
+	}));
+	I(_, m, d);
+	let v = s(() => ({
+		store: _,
+		events: h,
+		refs: m,
+		slots: g
+	}), [
+		_,
+		h,
+		m,
+		g
+	]);
+	return /* @__PURE__ */ p(V.Provider, {
+		value: v,
+		children: e
+	});
+}
+//#endregion
+//#region src/package/rangeflow/animations/OdometerText.tsx
+var U = n(({ children: e, className: t }) => /* @__PURE__ */ p("span", {
+	className: y("inline-flex tabular-nums", t),
+	children: [...e].map((e, t) => {
+		let n = e === " " ? "\xA0" : e;
+		return /* @__PURE__ */ m("span", {
+			className: "relative inline-block overflow-hidden leading-none",
+			children: [/* @__PURE__ */ p("span", {
+				className: "invisible",
+				children: n
+			}), /* @__PURE__ */ p(ne, {
+				initial: !1,
+				mode: "popLayout",
+				children: /* @__PURE__ */ p(x.span, {
+					animate: {
+						y: 0,
+						filter: "blur(0px)",
+						opacity: 1
+					},
+					className: "absolute inset-0",
+					exit: {
+						y: "-110%",
+						filter: "blur(6px)",
+						opacity: 0
+					},
+					initial: {
+						y: "110%",
+						filter: "blur(6px)",
+						opacity: 0
+					},
+					transition: {
+						duration: .45,
+						ease: [
+							.32,
+							.72,
+							0,
+							1
+						],
+						delay: t * .035
+					},
+					children: n
+				}, e)
+			})]
+		}, t);
+	})
+}));
+//#endregion
+//#region src/package/rangeflow/hooks/use-days-in-range.ts
+function W(e) {
+	return s(() => u(e.to).diff(u(e.from), "day"), [e.from, e.to]);
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-rangeflow-slots.ts
+function G() {
+	return a(V).slots;
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-rangeflow-store.ts
+function K(e) {
+	return re(a(V).store, e);
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/DateLabelsTrack.tsx
+function ue(e) {
+	return e > 120 ? "MMM YYYY" : e > 7 ? "MMM DD" : "ddd DD";
+}
+function de(e) {
+	return e > 120 ? 8 : e > 30 ? 10 : e > 7 ? 8 : Math.min(e + 1, 8);
+}
+var fe = n(() => {
+	let e = K((e) => e.range), n = W(e), { DateLabelsTrack: r } = G(), i = s(() => {
+		let t = ue(n), r = de(n), i = u(e.from), a = u(e.to).diff(i);
+		return Array.from({ length: r }, (e, n) => {
+			let o = n / (r - 1);
+			return i.add(a * o, "ms").format(t);
+		});
+	}, [
+		e.from,
+		e.to,
+		n
+	]);
+	return r ? t(r) : /* @__PURE__ */ p("div", {
+		className: y("rangeflow-labels flex w-full items-center justify-between select-none", "absolute top-10 left-0 px-2", "text-xs tracking-tighter text-(--rangeflow-text-faint) uppercase"),
+		children: i.map((e, t) => /* @__PURE__ */ p(U, {
+			className: y("rangeflow-label", { "font-medium text-(--rangeflow-text-muted)": t === 0 || t === i.length - 1 }),
+			children: e
+		}, t))
+	});
+});
+//#endregion
+//#region src/package/rangeflow/icons/DoubleChevronLeftIcon.tsx
+function pe() {
+	return /* @__PURE__ */ p("svg", {
+		fill: "none",
+		height: "15",
+		viewBox: "0 0 15 15",
+		width: "15",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ p("path", {
+			clipRule: "evenodd",
+			d: "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/icons/DoubleChevronRightIcon.tsx
+function me() {
+	return /* @__PURE__ */ p("svg", {
+		fill: "none",
+		height: "15",
+		viewBox: "0 0 15 15",
+		width: "15",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ p("path", {
+			clipRule: "evenodd",
+			d: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/DateTickers.tsx
+var he = n(() => {
+	let { DateTickers: e } = G(), n = Math.min(Math.max(70, W(K((e) => e.range))), 100);
+	return e ? t(e) : /* @__PURE__ */ p("div", {
+		className: "rangeflow-tickers flex items-center gap-2",
+		children: /* @__PURE__ */ p("div", {
+			className: "flex w-full justify-between",
+			children: Array.from({ length: n }).map((e, t) => /* @__PURE__ */ p("div", { className: "rangeflow-ticker h-3 w-0.5 rounded-xs bg-(--rangeflow-ticker)" }, t))
+		})
+	});
+});
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/RangeStepButton.tsx
+function q({ children: e, onClick: t }) {
+	return /* @__PURE__ */ p(x.span, {
+		className: "rangeflow-step-button shrink-0 cursor-pointer text-(--rangeflow-text) select-none hover:text-(--rangeflow-text-muted)",
+		whileHover: { scale: 1.1 },
+		onClick: t,
+		children: e
+	});
+}
+//#endregion
+//#region src/package/rangeflow/utils/derive-selection-from-layout.ts
+var ge = N([5, 100], [1, 100]);
+function _e(e, t) {
+	let n = e[j], r = e[k], i = e[A], a = u(t.from).startOf("day"), o = u(t.to).startOf("day").diff(a, "day"), s = ge(n), c = r + (n - s), l = Math.round(n) <= 5 ? 1 : Math.max(Math.round(s * o / 100), 1), d = M(Math.round(c * o / 100), 0, Math.max(o - l, 0));
+	return {
+		size: n,
+		left: r,
+		right: i,
+		from: a.add(d, "day").toDate(),
+		to: a.add(d + l, "day").toDate()
+	};
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-rangeflow-store-api.ts
+function J() {
+	return a(V).store;
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-update-selected-date.ts
+function Y() {
+	let e = J();
+	return i((t) => {
+		let { range: n, update: r } = e.getState(), { size: i, left: a, right: o, from: s, to: c } = _e(t, n);
+		r((e) => {
+			e.slider.size = i, e.slider.left = a, e.slider.right = o, e.selected_date = {
+				from: s,
+				to: c
+			};
+		});
+	}, [e]);
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-rangeflow-refs.ts
+function X() {
+	return a(V).refs;
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/Slider/SliderLeftSpacer.tsx
+function ve() {
+	let e = K((e) => e.slider.left), [t] = l(() => e);
+	return /* @__PURE__ */ p(S, {
+		defaultSize: `${t}%`,
+		id: k,
+		minSize: 0,
+		children: "\xA0"
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/Slider/SliderRightSpacer.tsx
+function ye() {
+	let e = K((e) => e.slider.right), [t] = l(() => e);
+	return /* @__PURE__ */ p(S, {
+		defaultSize: `${t}%`,
+		id: A,
+		minSize: 0,
+		children: "\xA0"
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/SliderValue.tsx
+var be = n(() => {
+	let { SliderValueLabel: e } = G(), n = K((e) => e.slider.size), r = K((e) => e.selected_date), i = s(() => {
+		let e = Math.max(u(r.to).diff(r.from, "day"), 1);
+		return n < 10 ? `${e}D` : e === 1 ? "1 Day" : `${e} Days`;
+	}, [
+		r.from,
+		r.to,
+		n
+	]);
+	return /* @__PURE__ */ p("div", {
+		"data-track-handle": "true",
+		className: y("rangeflow-thumb-label flex h-full w-full items-center justify-center", "mx-[clamp(0.5rem,5vw,5%)] cursor-grab", "text-xs font-medium text-nowrap text-(--rangeflow-text)"),
+		children: e ? t(e, { label: i }) : i
+	});
+}), Z = N([1, 100], [5, 100]);
+function xe({ onHandleRef: e }) {
+	let t = K((e) => e.slider.size), n = K((e) => e.duration), r = W(K((e) => e.range)), [i] = l(() => t), a = n?.min ? Math.min(Z(n.min * 100 / r), 100) : 5, o = n?.max ? Math.min(Z(n.max * 100 / r), 100) : 100;
+	return /* @__PURE__ */ p(S, {
+		defaultSize: `${i}%`,
+		elementRef: e,
+		id: j,
+		maxSize: `${o}%`,
+		minSize: `${a}%`,
+		children: /* @__PURE__ */ p("div", {
+			"data-track-handle-container": "",
+			className: y("rangeflow-thumb flex items-center justify-center", "h-full rounded-sm border border-(--rangeflow-border-strong) inset-shadow-sm shadow-(color:--rangeflow-shadow-color)", "backdrop-blur-[2.5px]", "cursor-default select-none"),
+			children: /* @__PURE__ */ p(be, {})
+		})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/Slider/index.tsx
+var Se = (e, t, n) => !!e?.querySelector("[data-separator=\"active\"]") && t["slider-track-thumb"] === n["slider-track-thumb"];
+function Ce({ onHandleRef: e }) {
+	let t = Y(), { slider: { root: n } } = X(), i = c(null), a = c(null), o = c(null), s = b("rangeflow-separator h-3/4 w-0.75 self-center rounded-full transition-[background-color,opacity] duration-150", "bg-(--rangeflow-separator) hover:bg-(--rangeflow-separator-active) focus:outline-none", "data-[separator=active]:bg-(--rangeflow-separator-active)", "opacity-0 group-has-[[data-track-handle-container]:hover]:opacity-100", "hover:opacity-100 data-[separator=active]:opacity-100 data-[separator=focus]:opacity-100"), { ref: l } = te({
+		id: "track-handle-draggable",
+		sensors: [ae.configure({ preventActivation: (e) => !(e.target instanceof HTMLDivElement) || !e.target.dataset.trackHandle }), ie]
+	});
+	return ee({
+		onDragStart: () => {
+			a.current = n.current?.getLayout() ?? null;
+		},
+		onDragMove: (e) => {
+			if (!n.current || !a.current || !i.current || !i.current.clientWidth) return;
+			let t = e.operation.transform.x / i.current.clientWidth * 100, r = a.current, o = r[k] + r[A], s = Math.min(Math.max(r[k] + t, 0), o);
+			n.current.setLayout({
+				...r,
+				[k]: s,
+				[A]: o - s
+			});
+		},
+		onDragEnd: () => {
+			a.current = null;
+		}
+	}), /* @__PURE__ */ p("div", {
+		ref: l,
+		className: b("absolute top-[50%] left-0 z-1 -translate-y-[50%]", "h-7 w-full"),
+		children: /* @__PURE__ */ m(oe, {
+			className: "group h-full w-full",
+			elementRef: i,
+			groupRef: n,
+			onLayoutChange: (e) => {
+				let a = o.current;
+				if (a && Se(i.current, a, e)) {
+					n.current?.setLayout(a);
+					return;
+				}
+				o.current = e, r(() => {
+					t(e);
+				});
+			},
+			children: [
+				/* @__PURE__ */ p(ve, {}),
+				/* @__PURE__ */ p(C, { className: s }),
+				/* @__PURE__ */ p(xe, { onHandleRef: e }),
+				/* @__PURE__ */ p(C, { className: s }),
+				/* @__PURE__ */ p(ye, {})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/SliderTrack.tsx
+function we({ onHandleRef: e }) {
+	let t = K((e) => e.update), n = K((e) => e.range), r = W(n), i = K((e) => e.disabled?.before), a = K((e) => e.disabled?.after), o = s(() => !i || u(n.from).isAfter(i), [n.from, i]), c = s(() => !a || u(n.to).isBefore(a), [n.to, a]);
+	return /* @__PURE__ */ m("div", {
+		className: "flex items-center select-none",
+		children: [
+			o ? /* @__PURE__ */ p(q, {
+				onClick: () => {
+					t((e) => {
+						let t = u(e.range.from).subtract(r / 2, "day");
+						e.range.from = i && t.isBefore(i) ? u(i).toDate() : t.toDate();
+					});
+				},
+				children: /* @__PURE__ */ p(pe, {})
+			}) : null,
+			/* @__PURE__ */ m("div", {
+				className: "relative flex-1 px-2",
+				children: [/* @__PURE__ */ p(Ce, { onHandleRef: e }), /* @__PURE__ */ p(he, {})]
+			}),
+			c ? /* @__PURE__ */ p(q, {
+				onClick: () => {
+					t((e) => {
+						let t = u(e.range.to).add(r / 2, "day");
+						e.range.to = a && t.isAfter(a) ? u(a).toDate() : t.toDate();
+					});
+				},
+				children: /* @__PURE__ */ p(me, {})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/utils/restrict-inner-to-element.ts
+var Te = class e extends w {
+	innerRect = D(null);
+	containerRect = D(null);
+	constructor(e, t) {
+		super(e, t), this.destroy = se(() => {
+			if (!this.options) return;
+			let { dragOperation: t } = e;
+			if (!t.status.initialized) return;
+			let { inner: n, container: r } = this.options, i = typeof n == "function" ? n(t) : n, a = typeof r == "function" ? r(t) : r;
+			if (!(!i || !a)) return this.innerRect.value = i.getBoundingClientRect(), this.containerRect.value = a.getBoundingClientRect(), () => {
+				this.innerRect.value = null, this.containerRect.value = null;
+			};
+		});
+	}
+	apply({ transform: e }) {
+		let t = this.innerRect.value, n = this.containerRect.value;
+		return !t || !n ? e : g(new E(t.left, t.top, t.width, t.height), e, n);
+	}
+	static configure = T(e);
+};
+//#endregion
+//#region src/package/rangeflow/components/DateSlider/index.tsx
+function Ee() {
+	let [e, t] = l(null), [n, r] = l(null);
+	return /* @__PURE__ */ p("div", {
+		ref: t,
+		className: "rangeflow-slider relative my-8 h-3 w-full px-2",
+		children: /* @__PURE__ */ m(_, {
+			modifiers: [Te.configure({
+				inner: n,
+				container: e
+			}), h],
+			children: [
+				/* @__PURE__ */ p(we, { onHandleRef: r }),
+				/* @__PURE__ */ p(fe, {}),
+				/* @__PURE__ */ p(v, { children: null })
+			]
+		})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/RangeTabs/hooks/use-apply-slider-layout.ts
+function De() {
+	let e = Y(), t = K((e) => e.range.from.getTime()), n = K((e) => e.range.to.getTime()), { slider: { root: i } } = X();
+	o(() => {
+		r(() => {
+			e(i.current.getLayout());
+		});
+	}, [
+		e,
+		i,
+		t,
+		n
+	]);
+}
+//#endregion
+//#region src/package/rangeflow/components/RangeTabs/index.tsx
+function Oe() {
+	De();
+	let e = K((e) => e.ranges), t = K((e) => e.update), n = K((e) => e.range.from), r = K((e) => e.range.to), i = K((e) => e.disabled?.before), a = K((e) => e.disabled?.after), o = s(() => e.filter((e) => !(i && u(e.from).isBefore(i, "day") || a && u(e.to).isAfter(a, "day"))), [
+		e,
+		i,
+		a
+	]), c = s(() => o.findIndex((e) => u(e.from).isSame(n, "day") && u(e.to).isSame(r, "day")), [
+		o,
+		n,
+		r
+	]);
+	return /* @__PURE__ */ p("div", {
+		className: "rangeflow-tabs flex items-center justify-center select-none",
+		children: /* @__PURE__ */ p("div", {
+			className: "flex items-center",
+			children: o.map((e, n) => /* @__PURE__ */ m("button", {
+				"data-active": c === n || void 0,
+				className: y("rangeflow-tab relative z-1 flex items-center px-1.5 py-1"),
+				onClick: () => {
+					t((t) => {
+						t.range.from = e.from, t.range.to = e.to;
+					});
+				},
+				children: [/* @__PURE__ */ p("span", {
+					className: y("relative z-1 text-xs tracking-tight text-(--rangeflow-text-muted)", { "font-medium text-(--rangeflow-text)": c === n }),
+					children: e.label
+				}), c === n && /* @__PURE__ */ p(x.div, {
+					className: "rangeflow-tab-indicator absolute inset-0 rounded-sm bg-(--rangeflow-active-bg)",
+					layoutId: "tab-indicator",
+					transition: {
+						type: "spring",
+						stiffness: 200,
+						damping: 25
+					}
+				})]
+			}, `${e.from.getDate()}_${e.to.getDate()}`))
+		})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/Calendar/CalendarDayButton.tsx
+function ke({ className: e, day: t, modifiers: n, ...r }) {
+	let i = c(null);
+	o(() => {
+		n.focused && i.current?.focus();
+	}, [n.focused]);
+	let a = n.selected && !n.range_start && !n.range_middle && !n.range_end;
+	return /* @__PURE__ */ p("button", {
+		ref: i,
+		"data-range-end": n.range_end || void 0,
+		"data-range-middle": n.range_middle || void 0,
+		"data-range-start": n.range_start || void 0,
+		"data-selected": a || void 0,
+		"data-today": n.today || void 0,
+		className: y("rangeflow-day flex h-9 w-9 items-center justify-center rounded-sm leading-none", "text-xs text-(--rangeflow-text-muted) transition-colors", "hover:bg-(--rangeflow-hover-bg)", "focus-visible:ring-1 focus-visible:ring-(--rangeflow-ring) focus-visible:outline-none", "data-[today=true]:font-bold data-[today=true]:text-(--rangeflow-today)", "data-[selected=true]:bg-(--rangeflow-accent-solid) data-[selected=true]:text-(--rangeflow-accent-contrast) data-[selected=true]:hover:bg-(--rangeflow-accent-solid-hover)", "data-[range-start=true]:bg-(--rangeflow-accent-solid) data-[range-start=true]:text-(--rangeflow-accent-contrast)", "data-[range-end=true]:bg-(--rangeflow-accent-solid) data-[range-end=true]:text-(--rangeflow-accent-contrast)", e),
+		...r
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/Calendar/Chevron.tsx
+var Ae = {
+	up: "rotate-180",
+	down: "",
+	left: "rotate-90",
+	right: "-rotate-90"
+};
+function je({ className: e, orientation: t = "down", size: n = 16 }) {
+	return /* @__PURE__ */ p("svg", {
+		"aria-hidden": "true",
+		className: y("shrink-0", Ae[t], e),
+		fill: "none",
+		height: n,
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		viewBox: "0 0 24 24",
+		width: n,
+		children: /* @__PURE__ */ p("path", { d: "m6 9 6 6 6-6" })
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/Calendar/index.tsx
+function Me({ captionLayout: e = "label", className: t, classNames: n, components: r, showOutsideDays: i = !0, ...a }) {
+	return /* @__PURE__ */ p(ce, {
+		captionLayout: e,
+		className: y("rangeflow-calendar w-fit p-3 select-none", t),
+		showOutsideDays: i,
+		classNames: {
+			months: "relative flex flex-col gap-4 md:flex-row",
+			month: "flex w-full flex-col gap-4",
+			nav: "absolute inset-x-0 top-0 flex h-7 items-center justify-between",
+			button_previous: y("inline-flex h-7 w-7 items-center justify-center rounded-sm", "text-(--rangeflow-text-subtle) transition-colors hover:bg-(--rangeflow-hover-bg) hover:text-(--rangeflow-text-muted)", "aria-disabled:pointer-events-none aria-disabled:opacity-40"),
+			button_next: y("inline-flex h-7 w-7 items-center justify-center rounded-sm", "text-(--rangeflow-text-subtle) transition-colors hover:bg-(--rangeflow-hover-bg) hover:text-(--rangeflow-text-muted)", "aria-disabled:pointer-events-none aria-disabled:opacity-40"),
+			month_caption: "flex h-7 items-center justify-center text-xs font-medium text-(--rangeflow-text-muted)",
+			caption_label: "text-xs font-medium",
+			dropdowns: "flex items-center gap-1 text-xs font-medium text-(--rangeflow-text-muted)",
+			dropdown_root: y("relative flex items-center gap-1 rounded-sm border border-(--rangeflow-border) px-1.5 py-0.5", "has-[:focus]:ring-1 has-[:focus]:ring-(--rangeflow-ring)"),
+			dropdown: "absolute inset-0 cursor-pointer opacity-0",
+			month_grid: "mt-2 w-full border-collapse",
+			weekdays: "flex",
+			weekday: "flex-1 text-[0.7rem] font-normal text-(--rangeflow-text-faint)",
+			week: "mt-1 flex w-full",
+			week_number_header: "w-9",
+			week_number: "w-9 text-[0.7rem] text-(--rangeflow-text-faint)",
+			day: "relative flex-1 p-0 text-center",
+			range_start: "rounded-l-sm bg-(--rangeflow-range-bg)",
+			range_middle: "bg-(--rangeflow-range-bg)",
+			range_end: "rounded-r-sm bg-(--rangeflow-range-bg)",
+			outside: "text-(--rangeflow-text-disabled)",
+			disabled: "text-(--rangeflow-text-disabled) opacity-50",
+			hidden: "invisible",
+			...n
+		},
+		components: {
+			DayButton: ke,
+			Chevron: je,
+			...r
+		},
+		...a
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/Popover/index.tsx
+var Ne = n(({ align: e = "center", className: t, sideOffset: n = 6, children: r, ...i }) => /* @__PURE__ */ p(O.Portal, { children: /* @__PURE__ */ p(O.Content, {
+	asChild: !0,
+	align: e,
+	sideOffset: n,
+	...i,
+	children: /* @__PURE__ */ p(x.div, {
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		initial: {
+			opacity: 0,
+			scale: .96,
+			y: -4
+		},
+		style: { transformOrigin: "var(--radix-popover-content-transform-origin)" },
+		transition: {
+			type: "spring",
+			stiffness: 420,
+			damping: 32,
+			mass: .8
+		},
+		className: y("rangeflow-date-picker-portal rangeflow-popover z-50 rounded-lg border border-(--rangeflow-border) bg-(--rangeflow-bg) p-2 text-(--rangeflow-text) shadow-md shadow-(color:--rangeflow-shadow-color) backdrop-blur-[10px] outline-none", t),
+		children: r
+	})
+}) })), Pe = O.Root, Fe = O.Trigger;
+O.Anchor;
+//#endregion
+//#region src/package/rangeflow/components/PickerBar/CalendarPopover.tsx
+function Q({ children: e }) {
+	let t = K((e) => e.update), n = K((e) => e.range), r = K((e) => e.selected_date), i = K((e) => e.disabled), a = K((e) => e.duration), o = K((e) => e.CalendarProps), { slider: { root: s } } = X(), c = () => {
+		let e = u(n.from), t = u(n.to);
+		return u(r.from).isBefore(e) && (e = u(r.from).subtract(10, "day")), u(r.to).isAfter(t) && (t = u(r.to).add(10, "day")), {
+			from: e.toDate(),
+			to: t.toDate()
+		};
+	}, l = () => {
+		let e = c(), { size: n, left: i, right: a } = F(e, r);
+		s.current?.setLayout({
+			[k]: i,
+			[j]: n,
+			[A]: a
+		}), t((t) => {
+			t.range = e;
+		});
+	};
+	return /* @__PURE__ */ m(Pe, {
+		modal: !0,
+		onOpenChange: (e) => {
+			e === !1 && l();
+		},
+		children: [/* @__PURE__ */ p(Fe, {
+			className: "cursor-pointer",
+			children: e
+		}), /* @__PURE__ */ p(Ne, {
+			align: "start",
+			sideOffset: 10,
+			children: /* @__PURE__ */ p(Me, {
+				defaultMonth: r.from,
+				numberOfMonths: 2,
+				showOutsideDays: !1,
+				...o,
+				disabled: i,
+				max: a?.max,
+				min: a?.min,
+				mode: "range",
+				selected: r,
+				onSelect: (e) => {
+					if (!e?.from || !e?.to) return;
+					let n = u(e.from).startOf("day"), r = u(e.to).startOf("day"), i = {
+						from: n.toDate(),
+						to: r.toDate()
+					};
+					t((e) => {
+						e.selected_date = i;
+					});
+				}
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/package/rangeflow/icons/CalendarIcon.tsx
+function Ie() {
+	return /* @__PURE__ */ p("svg", {
+		fill: "none",
+		height: "15",
+		viewBox: "0 0 15 15",
+		width: "15",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ p("path", {
+			clipRule: "evenodd",
+			d: "M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/PickerBar/SelectedDate.tsx
+function $() {
+	let e = K((e) => e.selected_date), { SelectedDate: n } = G(), { from: r, to: i } = s(() => {
+		let t = u(), n = u(e.from), r = u(e.to), i = n.isSame(r, "year") ? "DD MMM" : "DD MMM YYYY", a = {
+			from: n.format(i),
+			to: r.format(i)
+		};
+		return t.isSame(n, "day") && (a.from = "Today"), t.isSame(r, "day") && (a.to = "Today"), a;
+	}, [e.from, e.to]);
+	return n ? t(n, {
+		from: r,
+		to: i
+	}) : /* @__PURE__ */ m("div", {
+		className: "rangeflow-selected-date flex items-center gap-2 text-xs font-medium text-(--rangeflow-accent-text) select-none hover:opacity-90",
+		children: [
+			/* @__PURE__ */ p(Ie, {}),
+			r,
+			/* @__PURE__ */ p("span", {
+				className: "text-(--rangeflow-text-faint)",
+				children: "—"
+			}),
+			i
+		]
+	});
+}
+//#endregion
+//#region src/package/rangeflow/components/PickerBar/index.tsx
+function Le() {
+	let e = K((e) => e.calendar), { RangeTabs: n } = G();
+	return /* @__PURE__ */ m("div", {
+		className: "flex h-full items-center justify-between px-2",
+		children: [e ? /* @__PURE__ */ p(Q, { children: /* @__PURE__ */ p($, {}) }) : /* @__PURE__ */ p($, {}), n ? t(n) : /* @__PURE__ */ p(Oe, {})]
+	});
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-rangeflow-events.ts
+function Re() {
+	return a(V).events;
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-emit-date-change.ts
+function ze() {
+	let e = J(), { onChange: t } = Re();
+	o(() => e.subscribe((e, n) => {
+		e.selected_date !== n.selected_date && t(e.selected_date);
+	}), [e, t]);
+}
+//#endregion
+//#region src/package/rangeflow/Root.tsx
+function Be() {
+	return ze(), /* @__PURE__ */ m("div", {
+		className: "rangeflow-date-picker rangeflow-root h-35 w-140 rounded-lg border border-(--rangeflow-border) bg-(--rangeflow-bg) text-(--rangeflow-text) shadow-md shadow-(color:--rangeflow-shadow-color)",
+		children: [/* @__PURE__ */ p("div", {
+			className: "rangeflow-header h-10 border-b border-(--rangeflow-border) p-2",
+			children: /* @__PURE__ */ p(Le, {})
+		}), /* @__PURE__ */ p("div", {
+			className: "rangeflow-body mx-2",
+			children: /* @__PURE__ */ p(Ee, {})
+		})]
+	});
+}
+//#endregion
+//#region src/package/rangeflow/index.tsx
+function Ve(e) {
+	return /* @__PURE__ */ p(H, {
+		...e,
+		children: /* @__PURE__ */ p(Be, {})
+	});
+}
+//#endregion
+//#region src/package/rangeflow/hooks/use-rangeflow.ts
+function He() {
+	let e = c(null), t = c(null), n = i((n) => {
+		let r = e.current;
+		if (!r) return;
+		let { selected_date: i, update: a } = r.getState(), { size: o, left: s, right: c } = F(n, i);
+		a((e) => {
+			e.range.from = n.from, e.range.to = n.to, e.slider = {
+				size: o,
+				left: s,
+				right: c
+			};
+		}), t.current?.slider.root.current?.setLayout({
+			[k]: s,
+			[j]: o,
+			[A]: c
+		});
+	}, []), r = i((n) => {
+		let r = e.current;
+		if (!r) return;
+		let { range: i } = r.getState(), { size: a, left: o, right: s } = F(i, n);
+		t.current?.slider.root.current?.setLayout({
+			[k]: o,
+			[j]: a,
+			[A]: s
+		});
+	}, []);
+	return {
+		__internal: {
+			store: e,
+			refs: t
+		},
+		updateRange: n,
+		updateSelectedDates: r
+	};
+}
+//#endregion
+export { Ve as RangeFlow, He as useRangeflow };