rangeflow 1.0.14 → 1.0.16

package/README.md

@@ -4,6 +4,13 @@ A fancy date range picker built with React and Tailwind.
 
 RangeFlow gives you a date range picker with a smooth slider, quick range tabs, and a popover calendar. It is built for React 18 and 19, ships with a tiny CSS theming layer, and does not touch your app's global styles.
 
+<a href="https://rangeflow.raminmousavi.dev" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raminmousavi.dev/blog-assets/post-006/rangeflow-hero-dark.png?v=1.0">
+    <img alt="RangeFlow Hero" src="https://raminmousavi.dev/blog-assets/post-006/rangeflow-hero.png?v=1.0">
+  </picture>
+</a>
+
 ## Features
 
 - Drag based range slider that feels natural on mouse and touch.

package/dist/index.js

@@ -8,13 +8,13 @@ import y, { clsx as b } from "clsx";
 import { useStore as x } from "zustand";
 import { KeyboardSensor as ne, PointerSensor as re } from "@dnd-kit/dom";
 import { Group as ie, Panel as S, Separator as C } from "react-resizable-panels";
-import { Modifier as ae, configurator as w } from "@dnd-kit/abstract";
-import { Rectangle as T } from "@dnd-kit/geometry";
-import { effect as E, signal as D } from "@dnd-kit/state";
-import { DayPicker as oe } from "react-day-picker";
-import * as O from "@radix-ui/react-popover";
+import { Modifier as ae, configurator as oe } from "@dnd-kit/abstract";
+import { Rectangle as w } from "@dnd-kit/geometry";
+import { effect as T, signal as E } from "@dnd-kit/state";
+import { DayPicker as se } from "react-day-picker";
+import * as D from "@radix-ui/react-popover";
 //#region src/package/rangeflow/constants/date-ranges.ts
-var se = [
+var ce = [
 	{
 		label: "2 Weeks",
 		from: d().subtract(1, "weeks").toDate(),
@@ -40,29 +40,40 @@ var se = [
 		from: d().subtract(6, "months").toDate(),
 		to: d().add(6, "months").toDate()
 	}
-], k = "left-spacer", A = "right-spacer", j = "slider-track-thumb";
+], O = "left-spacer", k = "right-spacer", A = "slider-track-thumb";
 //#endregion
 //#region src/package/rangeflow/utils/clamp.ts
-function M(e, t, n) {
+function j(e, t, n) {
 	return Math.min(Math.max(e, t), n);
 }
 //#endregion
 //#region src/package/rangeflow/utils/interpolate.ts
-function N(e, t) {
+function M(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/normalize-date-range.ts
+function N(e) {
+	let t = d().startOf("day"), n = d(e.from), r = d(e.to), i = n.isValid() ? n.startOf("day") : t, a = r.isValid() ? r.startOf("day") : i;
+	return a.isBefore(i) && (a = i), {
+		start: i,
+		end: a
+	};
+}
+//#endregion
 //#region src/package/rangeflow/utils/create-slider-values.ts
-var ce = N([1, 100], [5, 100]);
+var le = M([1, 100], [5, 100]);
 function P(e, t) {
-	let n = d(e.from).startOf("day"), r = d(e.to).startOf("day").diff(n, "day"), i = d(t.from).startOf("day"), a = d(t.to).startOf("day"), o = Math.max(i.diff(n, "day"), 0), s = (a.diff(i, "day") + 1) * 100 / r, c = o * 100 / r, l = Math.max(ce(s), 5), u = M(c - (l - s), 0, Math.max(100 - l, 0));
+	let { start: n, end: r } = N(e), i = Math.max(r.diff(n, "day") + 1, 1), a = d(t.from), o = d(t.to), s = a.isValid() ? a.startOf("day") : n, c = o.isValid() ? o.startOf("day") : s;
+	c.isBefore(s) && (c = s);
+	let l = Math.max(Math.min(s.diff(n, "day"), i - 1), 0), u = Math.max(Math.min(c.diff(s, "day") + 1, i), 1) * 100 / i, f = l * 100 / i, p = Math.max(le(u), 5), m = j(f - (p - u), 0, Math.max(100 - p, 0));
 	return {
-		size: l,
-		left: u,
-		right: Math.max(100 - u - l, 0)
+		size: p,
+		left: m,
+		right: Math.max(100 - m - p, 0)
 	};
 }
 //#endregion
@@ -108,7 +119,7 @@ var z = (e) => f()((t) => ({
 })), B = e(null);
 //#endregion
 //#region src/package/rangeflow/context/ContextProvider.tsx
-function V({ children: e, defaultRange: t, defaultSelected: n, disabled: r, duration: i, calendar: a = !0, ranges: o = se, CalendarProps: s, Slots: l, api: d, onChange: f }) {
+function V({ children: e, defaultRange: t, defaultSelected: n, disabled: r, duration: i, calendar: a = !0, ranges: o = ce, CalendarProps: s, Slots: l, api: d, onChange: f }) {
 	let m = L(), h = I({ onChange: f }), g = R(l), [_] = u(() => z({
 		ranges: o,
 		disabled: r,
@@ -187,7 +198,10 @@ var H = n(({ value: e, delay: t }) => {
 //#endregion
 //#region src/package/rangeflow/hooks/use-days-in-range.ts
 function W(e) {
-	return c(() => d(e.to).diff(d(e.from), "day"), [e.from, e.to]);
+	return c(() => {
+		let { start: t, end: n } = N(e);
+		return Math.max(n.diff(t, "day") + 1, 1);
+	}, [e.from, e.to]);
 }
 //#endregion
 //#region src/package/rangeflow/hooks/use-rangeflow-slots.ts
@@ -201,18 +215,18 @@ function K(e) {
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/DateLabelsTrack.tsx
-function le(e) {
+function ue(e) {
 	return e > 120 ? "MMM YYYY" : e > 7 ? "MMM DD" : "ddd DD";
 }
-function ue(e) {
+function de(e) {
 	return e > 120 ? 8 : e > 30 ? 10 : e > 7 ? 8 : Math.min(e + 1, 8);
 }
-var de = n(() => {
+var fe = n(() => {
 	let e = K((e) => e.range), n = W(e), { DateLabelsTrack: r } = G(), i = c(() => {
-		let t = le(n), r = ue(n), i = d(e.from), a = d(e.to).diff(i);
+		let t = ue(n), r = Math.max(de(n), 1), { start: i, end: a } = N(e), o = a.diff(i), s = Math.max(r - 1, 1);
 		return Array.from({ length: r }, (e, n) => {
-			let o = n / (r - 1);
-			return i.add(a * o, "ms").format(t);
+			let r = n / s;
+			return i.add(o * r, "ms").format(t);
 		});
 	}, [
 		e.from,
@@ -234,7 +248,7 @@ function q() {
 }
 //#endregion
 //#region src/package/rangeflow/icons/DoubleChevronLeftIcon.tsx
-function fe() {
+function pe() {
 	return /* @__PURE__ */ p("svg", {
 		fill: "none",
 		height: "15",
@@ -251,7 +265,7 @@ function fe() {
 }
 //#endregion
 //#region src/package/rangeflow/icons/DoubleChevronRightIcon.tsx
-function pe() {
+function me() {
 	return /* @__PURE__ */ p("svg", {
 		fill: "none",
 		height: "15",
@@ -268,7 +282,7 @@ function pe() {
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/DateTickers.tsx
-var me = n(() => {
+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",
@@ -289,15 +303,15 @@ function J({ children: e, onClick: t }) {
 }
 //#endregion
 //#region src/package/rangeflow/utils/derive-selection-from-layout.ts
-var he = N([5, 100], [1, 100]);
-function ge(e, t) {
-	let n = e[j], r = e[k], i = e[A], a = d(t.from).startOf("day"), o = d(t.to).startOf("day").diff(a, "day"), s = he(n), c = r + (n - s), l = Math.round(n) <= 5 ? 1 : Math.max(Math.round(s * o / 100), 1), u = M(Math.round(c * o / 100), 0, Math.max(o - l, 0));
+var ge = M([5, 100], [1, 100]);
+function _e(e, t) {
+	let n = e[A], r = e[O], i = e[k], { start: a, end: o } = N(t), s = Math.max(o.diff(a, "day") + 1, 1), c = Number.isFinite(n) ? n : 5, l = Number.isFinite(r) ? r : 0, u = ge(c), d = l + (c - u), f = Math.round(c) <= 5 ? 1 : Math.max(Math.round(u * s / 100), 1), p = j(Math.round(d * s / 100), 0, Math.max(s - f, 0));
 	return {
 		size: n,
 		left: r,
 		right: i,
-		from: a.add(u, "day").toDate(),
-		to: a.add(u + l - 1, "day").toDate()
+		from: a.add(p, "day").toDate(),
+		to: a.add(p + f - 1, "day").toDate()
 	};
 }
 //#endregion
@@ -310,7 +324,7 @@ function Y() {
 function X() {
 	let e = Y();
 	return i((t) => {
-		let { range: n, update: r } = e.getState(), { size: i, left: a, right: o, from: s, to: c } = ge(t, n);
+		let { range: n, update: r } = e.getState(), { size: i, left: a, right: o, from: s, to: c } = _e(t, n);
 		r({
 			slider: {
 				size: i,
@@ -326,34 +340,34 @@ function X() {
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/Slider/SliderLeftSpacer.tsx
-function _e() {
+function ve() {
 	let e = K((e) => e.slider.left), [t] = u(() => e);
 	return /* @__PURE__ */ p(S, {
 		className: "focus:outline-none",
 		defaultSize: `${t}%`,
-		id: k,
+		id: O,
 		minSize: 0,
 		children: "\xA0"
 	});
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/Slider/SliderRightSpacer.tsx
-function ve() {
+function ye() {
 	let e = K((e) => e.slider.right), [t] = u(() => e);
 	return /* @__PURE__ */ p(S, {
 		className: "focus:outline-none",
 		defaultSize: `${t}%`,
-		id: A,
+		id: k,
 		minSize: 0,
 		children: "\xA0"
 	});
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/SliderValue.tsx
-var ye = n(() => {
+var be = n(() => {
 	let { SliderValueLabel: e } = G(), n = K((e) => e.slider.size), r = K((e) => e.selected_date), i = c(() => {
-		let e = d(r.to).diff(r.from, "day") + 1;
-		return n < 10 ? `${e}D` : e === 1 ? "1 Day" : `${e} Days`;
+		let e = d(r.from), t = d(r.to), i = e.isValid() ? e : t, a = t.isValid() ? t : e, o = a.isValid() && i.isValid() ? a.diff(i, "day") + 1 : 1, s = Number.isFinite(o) ? Math.max(o, 1) : 1;
+		return n < 10 ? `${s}D` : s === 1 ? "1 Day" : `${s} Days`;
 	}, [
 		r.from,
 		r.to,
@@ -364,26 +378,26 @@ var ye = n(() => {
 		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 be({ onHandleRef: e }) {
+}), Z = M([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] = u(() => 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,
+		id: A,
 		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(ye, {})
+			children: /* @__PURE__ */ p(be, {})
 		})
 	});
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/Slider/index.tsx
-var xe = (e, t, n) => !!e?.querySelector("[data-separator=\"active\"]") && t["slider-track-thumb"] === n["slider-track-thumb"];
-function Se({ onHandleRef: e }) {
+var Se = (e, t, n) => !!e?.querySelector("[data-separator=\"active\"]") && t["slider-track-thumb"] === n["slider-track-thumb"];
+function Ce({ onHandleRef: e }) {
 	let t = X(), { slider: { root: n } } = q(), i = l(null), a = l(null), o = l(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: c } = te({
 		id: "track-handle-draggable",
 		sensors: [re.configure({ preventActivation: (e) => !(e.target instanceof HTMLDivElement) || !e.target.dataset.trackHandle }), ne]
@@ -394,11 +408,11 @@ function Se({ onHandleRef: e }) {
 		},
 		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);
+			let t = e.operation.transform.x / i.current.clientWidth * 100, r = a.current, o = r[O] + r[k], s = Math.min(Math.max(r[O] + t, 0), o);
 			n.current.setLayout({
 				...r,
-				[k]: s,
-				[A]: o - s
+				[O]: s,
+				[k]: o - s
 			});
 		},
 		onDragEnd: () => {
@@ -413,7 +427,7 @@ function Se({ onHandleRef: e }) {
 			groupRef: n,
 			onLayoutChange: (e) => {
 				let a = o.current;
-				if (a && xe(i.current, a, e)) {
+				if (a && Se(i.current, a, e)) {
 					n.current?.setLayout(a);
 					return;
 				}
@@ -422,23 +436,23 @@ function Se({ onHandleRef: e }) {
 				});
 			},
 			children: [
-				/* @__PURE__ */ p(_e, {}),
+				/* @__PURE__ */ p(ve, {}),
 				/* @__PURE__ */ p(C, { className: s }),
-				/* @__PURE__ */ p(be, { onHandleRef: e }),
+				/* @__PURE__ */ p(xe, { onHandleRef: e }),
 				/* @__PURE__ */ p(C, { className: s }),
-				/* @__PURE__ */ p(ve, {})
+				/* @__PURE__ */ p(ye, {})
 			]
 		})
 	});
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/SliderTrack.tsx
-function Ce({ onHandleRef: e }) {
+function we({ onHandleRef: e }) {
 	let t = K((e) => e.update), n = K((e) => e.range), r = W(n), { slider: { root: i } } = q(), a = K((e) => e.disabled?.before), o = K((e) => e.disabled?.after), s = c(() => !a || d(n.from).isAfter(a), [n.from, a]), l = c(() => !o || d(n.to).isBefore(o), [n.to, o]), u = ({ left: e, right: t, size: n }) => {
 		i.current?.setLayout({
-			[k]: e,
-			[j]: n,
-			[A]: t
+			[O]: e,
+			[A]: n,
+			[k]: t
 		});
 	};
 	return /* @__PURE__ */ m("div", {
@@ -457,11 +471,11 @@ function Ce({ onHandleRef: e }) {
 						};
 					});
 				},
-				children: /* @__PURE__ */ p(fe, {})
+				children: /* @__PURE__ */ p(pe, {})
 			}) : null,
 			/* @__PURE__ */ m("div", {
 				className: "relative flex-1 px-2",
-				children: [/* @__PURE__ */ p(Se, { onHandleRef: e }), /* @__PURE__ */ p(me, {})]
+				children: [/* @__PURE__ */ p(Ce, { onHandleRef: e }), /* @__PURE__ */ p(he, {})]
 			}),
 			l ? /* @__PURE__ */ p(J, {
 				onClick: () => {
@@ -476,18 +490,18 @@ function Ce({ onHandleRef: e }) {
 						};
 					});
 				},
-				children: /* @__PURE__ */ p(pe, {})
+				children: /* @__PURE__ */ p(me, {})
 			}) : null
 		]
 	});
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/utils/restrict-inner-to-element.ts
-var we = class e extends ae {
-	innerRect = D(null);
-	containerRect = D(null);
+var Te = class e extends ae {
+	innerRect = E(null);
+	containerRect = E(null);
 	constructor(e, t) {
-		super(e, t), this.destroy = E(() => {
+		super(e, t), this.destroy = T(() => {
 			if (!this.options) return;
 			let { dragOperation: t } = e;
 			if (!t.status.initialized) return;
@@ -499,25 +513,25 @@ var we = class e extends ae {
 	}
 	apply({ transform: e }) {
 		let t = this.innerRect.value, n = this.containerRect.value;
-		return !t || !n ? e : g(new T(t.left, t.top, t.width, t.height), e, n);
+		return !t || !n ? e : g(new w(t.left, t.top, t.width, t.height), e, n);
 	}
-	static configure = w(e);
+	static configure = oe(e);
 };
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/index.tsx
-function Te() {
+function Ee() {
 	let [e, t] = u(null), [n, r] = u(null);
 	return /* @__PURE__ */ p("div", {
 		ref: t,
 		className: "rangeflow-slider relative my-8 h-3 w-full px-2",
 		children: /* @__PURE__ */ m(_, {
-			modifiers: [we.configure({
+			modifiers: [Te.configure({
 				inner: n,
 				container: e
 			}), h],
 			children: [
-				/* @__PURE__ */ p(Ce, { onHandleRef: r }),
-				/* @__PURE__ */ p(de, {}),
+				/* @__PURE__ */ p(we, { onHandleRef: r }),
+				/* @__PURE__ */ p(fe, {}),
 				/* @__PURE__ */ p(v, { children: null })
 			]
 		})
@@ -525,7 +539,7 @@ function Te() {
 }
 //#endregion
 //#region src/package/rangeflow/components/RangeTabs/hooks/use-apply-slider-layout.ts
-function Ee() {
+function De() {
 	let e = X(), t = K((e) => e.range.from.getTime()), n = K((e) => e.range.to.getTime()), { slider: { root: i } } = q();
 	o(() => {
 		r(() => {
@@ -540,7 +554,7 @@ function Ee() {
 }
 //#endregion
 //#region src/package/rangeflow/components/RangeTabs/hooks/use-tab-indicator.ts
-function De(e, t) {
+function Oe(e, t) {
 	let n = l([]), r = l(null), i = l(!1);
 	return s(() => {
 		let t = r.current;
@@ -566,15 +580,15 @@ function De(e, t) {
 }
 //#endregion
 //#region src/package/rangeflow/components/RangeTabs/index.tsx
-function Oe() {
-	Ee();
+function ke() {
+	De();
 	let { slider: { root: e } } = q(), t = K((e) => e.ranges), n = K((e) => e.update), r = K((e) => e.range.from), i = K((e) => e.range.to), a = K((e) => e.disabled?.before), o = K((e) => e.disabled?.after), s = (t) => {
 		n((n) => {
 			let r = P(t, n.selected_date);
 			return e.current?.setLayout({
-				[k]: r.left,
-				[j]: r.size,
-				[A]: r.right
+				[O]: r.left,
+				[A]: r.size,
+				[k]: r.right
 			}), { range: {
 				from: t.from,
 				to: t.to
@@ -588,7 +602,7 @@ function Oe() {
 		l,
 		r,
 		i
-	]), { indicatorRef: f, registerButton: h } = De(u, l);
+	]), { indicatorRef: f, registerButton: h } = Oe(u, l);
 	return /* @__PURE__ */ p("div", {
 		className: "rangeflow-tabs flex items-center justify-center select-none",
 		children: /* @__PURE__ */ m("div", {
@@ -613,7 +627,7 @@ function Oe() {
 }
 //#endregion
 //#region src/package/rangeflow/components/Calendar/CalendarDayButton.tsx
-function ke({ className: e, day: t, modifiers: n, ...r }) {
+function Ae({ className: e, day: t, modifiers: n, ...r }) {
 	let i = l(null);
 	o(() => {
 		n.focused && i.current?.focus();
@@ -632,16 +646,16 @@ function ke({ className: e, day: t, modifiers: n, ...r }) {
 }
 //#endregion
 //#region src/package/rangeflow/components/Calendar/Chevron.tsx
-var Ae = {
+var je = {
 	up: "rotate-180",
 	down: "",
 	left: "rotate-90",
 	right: "-rotate-90"
 };
-function je({ className: e, orientation: t = "down", size: n = 16 }) {
+function Me({ className: e, orientation: t = "down", size: n = 16 }) {
 	return /* @__PURE__ */ p("svg", {
 		"aria-hidden": "true",
-		className: y("shrink-0", Ae[t], e),
+		className: y("shrink-0", je[t], e),
 		fill: "none",
 		height: n,
 		stroke: "currentColor",
@@ -655,8 +669,8 @@ function je({ className: e, orientation: t = "down", size: n = 16 }) {
 }
 //#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(oe, {
+function Ne({ captionLayout: e = "label", className: t, classNames: n, components: r, showOutsideDays: i = !0, ...a }) {
+	return /* @__PURE__ */ p(se, {
 		captionLayout: e,
 		className: y("rangeflow-calendar w-fit p-3 select-none", t),
 		showOutsideDays: i,
@@ -687,8 +701,8 @@ function Me({ captionLayout: e = "label", className: t, classNames: n, component
 			...n
 		},
 		components: {
-			DayButton: ke,
-			Chevron: je,
+			DayButton: Ae,
+			Chevron: Me,
 			...r
 		},
 		...a
@@ -696,42 +710,42 @@ function Me({ captionLayout: e = "label", className: t, classNames: n, component
 }
 //#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, {
+var Pe = n(({ align: e = "center", className: t, sideOffset: n = 6, children: r, ...i }) => /* @__PURE__ */ p(D.Portal, { children: /* @__PURE__ */ p(D.Content, {
 	align: e,
 	sideOffset: n,
 	...i,
 	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;
+}) })), Fe = D.Root, Q = D.Trigger;
 //#endregion
 //#region src/package/rangeflow/components/PickerBar/CalendarPopover.tsx
-function Q({ children: e }) {
+function Ie({ 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 } } = q(), c = () => {
-		let e = d(n.from), t = d(n.to);
-		return d(r.from).isBefore(e) && (e = d(r.from).subtract(10, "day")), d(r.to).isAfter(t) && (t = d(r.to).add(10, "day")), {
-			from: e.toDate(),
-			to: t.toDate()
+		let e = d(n.from), t = d(n.to), i = d(r.from), a = d(r.to), o = e.isValid() ? e : d(), s = t.isValid() ? t : o;
+		return s.isBefore(o) && (s = o), i.isValid() && i.isBefore(o) && (o = i.subtract(10, "day")), a.isValid() && a.isAfter(s) && (s = a.add(10, "day")), s.isBefore(o) && (s = o.add(1, "day")), {
+			from: o.toDate(),
+			to: s.toDate()
 		};
 	}, l = () => {
 		let e = c(), { size: n, left: i, right: a } = P(e, r);
 		s.current?.setLayout({
-			[k]: i,
-			[j]: n,
-			[A]: a
+			[O]: i,
+			[A]: n,
+			[k]: a
 		}), t({ range: e });
 	};
-	return /* @__PURE__ */ m(Pe, {
+	return /* @__PURE__ */ m(Fe, {
 		onOpenChange: (e) => {
 			e === !1 && l();
 		},
-		children: [/* @__PURE__ */ p(Fe, {
+		children: [/* @__PURE__ */ p(Q, {
 			className: "cursor-pointer",
 			children: e
-		}), /* @__PURE__ */ p(Ne, {
+		}), /* @__PURE__ */ p(Pe, {
 			align: "start",
 			sideOffset: 10,
-			children: /* @__PURE__ */ p(Me, {
-				defaultMonth: r.from,
+			children: /* @__PURE__ */ p(Ne, {
+				defaultMonth: d(r.from).isValid() ? r.from : void 0,
 				numberOfMonths: 2,
 				showOutsideDays: !1,
 				...o,
@@ -741,9 +755,11 @@ function Q({ children: e }) {
 				mode: "range",
 				selected: r,
 				onSelect: (e) => {
-					!e?.from || !e?.to || t({ selected_date: {
-						from: d(e.from).startOf("day").toDate(),
-						to: d(e.to).startOf("day").toDate()
+					if (!e?.from || !e?.to) return;
+					let n = d(e.from).startOf("day"), r = d(e.to).startOf("day");
+					!n.isValid() || !r.isValid() || t({ selected_date: {
+						from: n.toDate(),
+						to: r.toDate()
 					} });
 				}
 			})
@@ -752,7 +768,7 @@ function Q({ children: e }) {
 }
 //#endregion
 //#region src/package/rangeflow/icons/CalendarIcon.tsx
-function Ie() {
+function Le() {
 	return /* @__PURE__ */ p("svg", {
 		fill: "none",
 		height: "15",
@@ -772,10 +788,10 @@ function Ie() {
 function $() {
 	let e = K((e) => e.selected_date), { SelectedDate: n } = G(), { from: r, to: i } = c(() => {
 		let t = d(), n = d(e.from), r = d(e.to), i = n.isSame(r, "year") ? "DD MMM" : "DD MMM YYYY", a = {
-			from: n.format(i),
-			to: r.format(i)
+			from: n.isValid() ? n.format(i) : "Invalid Date",
+			to: r.isValid() ? r.format(i) : "Invalid Date"
 		};
-		return t.isSame(n, "day") && (a.from = "Today"), t.isSame(r, "day") && (a.to = "Today"), a;
+		return n.isValid() && t.isSame(n, "day") && (a.from = "Today"), r.isValid() && t.isSame(r, "day") && (a.to = "Today"), a;
 	}, [e.from, e.to]);
 	return n ? t(n, {
 		from: r,
@@ -783,7 +799,7 @@ function $() {
 	}) : /* @__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, {}),
+			/* @__PURE__ */ p(Le, {}),
 			r,
 			/* @__PURE__ */ p("span", {
 				className: "text-(--rangeflow-text-faint)",
@@ -795,51 +811,51 @@ function $() {
 }
 //#endregion
 //#region src/package/rangeflow/components/PickerBar/index.tsx
-function Le() {
+function Re() {
 	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, {})]
+		children: [e ? /* @__PURE__ */ p(Ie, { children: /* @__PURE__ */ p($, {}) }) : /* @__PURE__ */ p($, {}), n ? t(n) : /* @__PURE__ */ p(ke, {})]
 	});
 }
 //#endregion
 //#region src/package/rangeflow/hooks/use-rangeflow-events.ts
-function Re() {
+function ze() {
 	return a(B).events;
 }
 //#endregion
 //#region src/package/rangeflow/hooks/use-emit-date-change.ts
-function ze() {
-	let e = Y(), { onChange: t } = Re();
+function Be() {
+	let e = Y(), { onChange: t } = ze();
 	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", {
+function Ve() {
+	return Be(), /* @__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, {})
+			children: /* @__PURE__ */ p(Re, {})
 		}), /* @__PURE__ */ p("div", {
 			className: "rangeflow-body mx-2",
-			children: /* @__PURE__ */ p(Te, {})
+			children: /* @__PURE__ */ p(Ee, {})
 		})]
 	});
 }
 //#endregion
 //#region src/package/rangeflow/RangeFlow.tsx
-function Ve(e) {
+function He(e) {
 	return /* @__PURE__ */ p(V, {
 		...e,
-		children: /* @__PURE__ */ p(Be, {})
+		children: /* @__PURE__ */ p(Ve, {})
 	});
 }
 //#endregion
 //#region src/package/rangeflow/hooks/use-rangeflow.ts
-function He() {
+function Ue() {
 	let e = l(null), t = l(null), n = i((n) => {
 		let r = e.current;
 		if (!r) return;
@@ -855,18 +871,18 @@ function He() {
 				right: c
 			}
 		}), t.current?.slider.root.current?.setLayout({
-			[k]: s,
-			[j]: o,
-			[A]: c
+			[O]: s,
+			[A]: o,
+			[k]: c
 		});
 	}, []), r = i((n) => {
 		let r = e.current;
 		if (!r) return;
 		let { range: i } = r.getState(), { size: a, left: o, right: s } = P(i, n);
 		t.current?.slider.root.current?.setLayout({
-			[k]: o,
-			[j]: a,
-			[A]: s
+			[O]: o,
+			[A]: a,
+			[k]: s
 		});
 	}, []);
 	return {
@@ -879,4 +895,4 @@ function He() {
 	};
 }
 //#endregion
-export { Ve as RangeFlow, He as useRangeFlow };
+export { He as RangeFlow, Ue as useRangeFlow };

package/dist/utils/normalize-date-range.d.ts

@@ -0,0 +1,6 @@
+import { default as dayjs } from 'dayjs';
+import { DateRange } from '../types';
+export declare function normalizeDateRange(range: DateRange): {
+    start: dayjs.Dayjs;
+    end: dayjs.Dayjs;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rangeflow",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "type": "module",
   "description": "A fancy date range picker built with React and Tailwind.",
   "license": "MIT",