rangeflow 1.0.5 → 1.0.6

package/dist/index.js

@@ -4,15 +4,15 @@ import { immer as f } from "zustand/middleware/immer";
 import { createStore as p } from "zustand/vanilla";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { RestrictToHorizontalAxis as g, restrictShapeToBoundingRectangle as _ } from "@dnd-kit/abstract/modifiers";
-import { DragDropProvider as v, DragOverlay as y, useDragDropMonitor as ee, useDraggable as te } from "@dnd-kit/react";
-import b, { clsx as x } from "clsx";
-import { AnimatePresence as ne, motion as S } 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 C, Separator as w } from "react-resizable-panels";
-import { Modifier as se, configurator as ce } from "@dnd-kit/abstract";
-import { Rectangle as T } from "@dnd-kit/geometry";
-import { effect as E, signal as D } from "@dnd-kit/state";
+import { DragDropProvider as v, DragOverlay as y, useDragDropMonitor as b, useDraggable as ee } from "@dnd-kit/react";
+import x, { clsx as S } from "clsx";
+import { AnimatePresence as te, motion as C } from "motion/react";
+import { useStore as ne } from "zustand";
+import { KeyboardSensor as re, PointerSensor as ie } from "@dnd-kit/dom";
+import { Group as ae, Panel as w, Separator as T } from "react-resizable-panels";
+import { Modifier as oe, configurator as se } from "@dnd-kit/abstract";
+import { Rectangle as E } from "@dnd-kit/geometry";
+import { effect as ce, signal as D } from "@dnd-kit/state";
 import { DayPicker as le } from "react-day-picker";
 import * as O from "@radix-ui/react-popover";
 //#region src/package/rangeflow/constants/date-ranges.ts
@@ -142,7 +142,7 @@ function H({ children: e, defaultRange: t, defaultSelected: n, disabled: r, dura
 //#endregion
 //#region src/package/rangeflow/animations/OdometerText.tsx
 var U = n(({ children: e, className: t }) => /* @__PURE__ */ m("span", {
-	className: b("inline-flex tabular-nums", t),
+	className: x("inline-flex tabular-nums", t),
 	children: [...e].map((e, t) => {
 		let n = e === " " ? "\xA0" : e;
 		return /* @__PURE__ */ h("span", {
@@ -150,10 +150,10 @@ var U = n(({ children: e, className: t }) => /* @__PURE__ */ m("span", {
 			children: [/* @__PURE__ */ m("span", {
 				className: "invisible",
 				children: n
-			}), /* @__PURE__ */ m(ne, {
+			}), /* @__PURE__ */ m(te, {
 				initial: !1,
 				mode: "popLayout",
-				children: /* @__PURE__ */ m(S.span, {
+				children: /* @__PURE__ */ m(C.span, {
 					animate: {
 						y: 0,
 						filter: "blur(0px)",
@@ -199,7 +199,7 @@ function G() {
 //#endregion
 //#region src/package/rangeflow/hooks/use-rangeflow-store.ts
 function K(e) {
-	return re(a(V).store, e);
+	return ne(a(V).store, e);
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/DateLabelsTrack.tsx
@@ -222,14 +222,19 @@ var pe = n(() => {
 		n
 	]);
 	return r ? t(r) : /* @__PURE__ */ m("div", {
-		className: b("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"),
+		className: x("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__ */ m(U, {
-			className: b("rangeflow-label", { "font-medium text-(--rangeflow-text-muted)": t === 0 || t === i.length - 1 }),
+			className: x("rangeflow-label", { "font-medium text-(--rangeflow-text-muted)": t === 0 || t === i.length - 1 }),
 			children: e
 		}, t))
 	});
 });
 //#endregion
+//#region src/package/rangeflow/hooks/use-rangeflow-refs.ts
+function q() {
+	return a(V).refs;
+}
+//#endregion
 //#region src/package/rangeflow/icons/DoubleChevronLeftIcon.tsx
 function me() {
 	return /* @__PURE__ */ m("svg", {
@@ -265,7 +270,7 @@ function he() {
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/DateTickers.tsx
-var ge = n(() => {
+var J = n(() => {
 	let { DateTickers: e } = G(), n = Math.min(Math.max(70, W(K((e) => e.range))), 100);
 	return e ? t(e) : /* @__PURE__ */ m("div", {
 		className: "rangeflow-tickers flex items-center gap-2",
@@ -277,8 +282,8 @@ var ge = n(() => {
 });
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/RangeStepButton.tsx
-function q({ children: e, onClick: t }) {
-	return /* @__PURE__ */ m(S.span, {
+function Y({ children: e, onClick: t }) {
+	return /* @__PURE__ */ m(C.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,
@@ -287,9 +292,9 @@ function q({ children: e, onClick: t }) {
 }
 //#endregion
 //#region src/package/rangeflow/utils/derive-selection-from-layout.ts
-var _e = N([5, 100], [1, 100]);
-function ve(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 = _e(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 = N([5, 100], [1, 100]);
+function _e(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 = ge(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));
 	return {
 		size: n,
 		left: r,
@@ -300,15 +305,15 @@ function ve(e, t) {
 }
 //#endregion
 //#region src/package/rangeflow/hooks/use-rangeflow-store-api.ts
-function J() {
+function X() {
 	return a(V).store;
 }
 //#endregion
 //#region src/package/rangeflow/hooks/use-update-selected-date.ts
-function Y() {
-	let e = J();
+function Z() {
+	let e = X();
 	return i((t) => {
-		let { range: n, update: r } = e.getState(), { size: i, left: a, right: o, from: s, to: c } = ve(t, n);
+		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,
@@ -318,15 +323,10 @@ function Y() {
 	}, [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 ye() {
+function ve() {
 	let e = K((e) => e.slider.left), [t] = u(() => e);
-	return /* @__PURE__ */ m(C, {
+	return /* @__PURE__ */ m(w, {
 		className: "focus:outline-none",
 		defaultSize: `${t}%`,
 		id: k,
@@ -336,9 +336,9 @@ function ye() {
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/Slider/SliderRightSpacer.tsx
-function be() {
+function ye() {
 	let e = K((e) => e.slider.right), [t] = u(() => e);
-	return /* @__PURE__ */ m(C, {
+	return /* @__PURE__ */ m(w, {
 		className: "focus:outline-none",
 		defaultSize: `${t}%`,
 		id: A,
@@ -348,7 +348,7 @@ function be() {
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/SliderValue.tsx
-var xe = n(() => {
+var be = n(() => {
 	let { SliderValueLabel: e } = G(), n = K((e) => e.slider.size), r = K((e) => e.selected_date), i = c(() => {
 		let e = Math.max(d(r.to).diff(r.from, "day"), 1);
 		return n < 10 ? `${e}D` : e === 1 ? "1 Day" : `${e} Days`;
@@ -359,13 +359,13 @@ var xe = n(() => {
 	]);
 	return /* @__PURE__ */ m("div", {
 		"data-track-handle": "true",
-		className: b("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)"),
+		className: x("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 Se({ 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__ */ m(C, {
+}), Q = 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] = u(() => t), a = n?.min ? Math.min(Q(n.min * 100 / r), 100) : 5, o = n?.max ? Math.min(Q(n.max * 100 / r), 100) : 100;
+	return /* @__PURE__ */ m(w, {
 		defaultSize: `${i}%`,
 		elementRef: e,
 		id: j,
@@ -373,20 +373,20 @@ function Se({ onHandleRef: e }) {
 		minSize: `${a}%`,
 		children: /* @__PURE__ */ m("div", {
 			"data-track-handle-container": "",
-			className: b("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__ */ m(xe, {})
+			className: x("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__ */ m(be, {})
 		})
 	});
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/Slider/index.tsx
-var Ce = (e, t, n) => !!e?.querySelector("[data-separator=\"active\"]") && t["slider-track-thumb"] === n["slider-track-thumb"];
-function we({ onHandleRef: e }) {
-	let t = Y(), { slider: { root: n } } = X(), i = l(null), a = l(null), o = l(null), s = x("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({
+var Se = (e, t, n) => !!e?.querySelector("[data-separator=\"active\"]") && t["slider-track-thumb"] === n["slider-track-thumb"];
+function Ce({ onHandleRef: e }) {
+	let t = Z(), { slider: { root: n } } = q(), i = l(null), a = l(null), o = l(null), s = S("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 } = ee({
 		id: "track-handle-draggable",
-		sensors: [ae.configure({ preventActivation: (e) => !(e.target instanceof HTMLDivElement) || !e.target.dataset.trackHandle }), ie]
+		sensors: [ie.configure({ preventActivation: (e) => !(e.target instanceof HTMLDivElement) || !e.target.dataset.trackHandle }), re]
 	});
-	return ee({
+	return b({
 		onDragStart: () => {
 			a.current = n.current?.getLayout() ?? null;
 		},
@@ -404,14 +404,14 @@ function we({ onHandleRef: e }) {
 		}
 	}), /* @__PURE__ */ m("div", {
 		ref: c,
-		className: x("absolute top-[50%] left-0 z-1 -translate-y-[50%]", "h-7 w-full"),
-		children: /* @__PURE__ */ h(oe, {
+		className: S("absolute top-[50%] left-0 z-1 -translate-y-[50%]", "h-7 w-full"),
+		children: /* @__PURE__ */ h(ae, {
 			className: "group h-full w-full",
 			elementRef: i,
 			groupRef: n,
 			onLayoutChange: (e) => {
 				let a = o.current;
-				if (a && Ce(i.current, a, e)) {
+				if (a && Se(i.current, a, e)) {
 					n.current?.setLayout(a);
 					return;
 				}
@@ -420,40 +420,46 @@ function we({ onHandleRef: e }) {
 				});
 			},
 			children: [
-				/* @__PURE__ */ m(ye, {}),
-				/* @__PURE__ */ m(w, { className: s }),
-				/* @__PURE__ */ m(Se, { onHandleRef: e }),
-				/* @__PURE__ */ m(w, { className: s }),
-				/* @__PURE__ */ m(be, {})
+				/* @__PURE__ */ m(ve, {}),
+				/* @__PURE__ */ m(T, { className: s }),
+				/* @__PURE__ */ m(xe, { onHandleRef: e }),
+				/* @__PURE__ */ m(T, { className: s }),
+				/* @__PURE__ */ m(ye, {})
 			]
 		})
 	});
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/SliderTrack.tsx
-function Te({ 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 = c(() => !i || d(n.from).isAfter(i), [n.from, i]), s = c(() => !a || d(n.to).isBefore(a), [n.to, a]);
+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
+		});
+	};
 	return /* @__PURE__ */ h("div", {
 		className: "flex items-center select-none",
 		children: [
-			o ? /* @__PURE__ */ m(q, {
+			s ? /* @__PURE__ */ m(Y, {
 				onClick: () => {
 					t((e) => {
 						let t = d(e.range.from).subtract(r / 2, "day");
-						e.range.from = i && t.isBefore(i) ? d(i).toDate() : t.toDate();
+						e.range.from = a && t.isBefore(a) ? d(a).toDate() : t.toDate(), e.slider = F(e.range, e.selected_date), u(e.slider);
 					});
 				},
 				children: /* @__PURE__ */ m(me, {})
 			}) : null,
 			/* @__PURE__ */ h("div", {
 				className: "relative flex-1 px-2",
-				children: [/* @__PURE__ */ m(we, { onHandleRef: e }), /* @__PURE__ */ m(ge, {})]
+				children: [/* @__PURE__ */ m(Ce, { onHandleRef: e }), /* @__PURE__ */ m(J, {})]
 			}),
-			s ? /* @__PURE__ */ m(q, {
+			l ? /* @__PURE__ */ m(Y, {
 				onClick: () => {
 					t((e) => {
 						let t = d(e.range.to).add(r / 2, "day");
-						e.range.to = a && t.isAfter(a) ? d(a).toDate() : t.toDate();
+						e.range.to = o && t.isAfter(o) ? d(o).toDate() : t.toDate(), e.slider = F(e.range, e.selected_date), u(e.slider);
 					});
 				},
 				children: /* @__PURE__ */ m(he, {})
@@ -463,11 +469,11 @@ function Te({ onHandleRef: e }) {
 }
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/utils/restrict-inner-to-element.ts
-var Ee = class e extends se {
+var Te = class e extends oe {
 	innerRect = D(null);
 	containerRect = D(null);
 	constructor(e, t) {
-		super(e, t), this.destroy = E(() => {
+		super(e, t), this.destroy = ce(() => {
 			if (!this.options) return;
 			let { dragOperation: t } = e;
 			if (!t.status.initialized) return;
@@ -479,24 +485,24 @@ var Ee = class e extends se {
 	}
 	apply({ transform: e }) {
 		let t = this.innerRect.value, n = this.containerRect.value;
-		return !t || !n ? e : _(new T(t.left, t.top, t.width, t.height), e, n);
+		return !t || !n ? e : _(new E(t.left, t.top, t.width, t.height), e, n);
 	}
-	static configure = ce(e);
+	static configure = se(e);
 };
 //#endregion
 //#region src/package/rangeflow/components/DateSlider/index.tsx
-function De() {
+function Ee() {
 	let [e, t] = u(null), [n, r] = u(null);
 	return /* @__PURE__ */ m("div", {
 		ref: t,
 		className: "rangeflow-slider relative my-8 h-3 w-full px-2",
 		children: /* @__PURE__ */ h(v, {
-			modifiers: [Ee.configure({
+			modifiers: [Te.configure({
 				inner: n,
 				container: e
 			}), g],
 			children: [
-				/* @__PURE__ */ m(Te, { onHandleRef: r }),
+				/* @__PURE__ */ m(we, { onHandleRef: r }),
 				/* @__PURE__ */ m(pe, {}),
 				/* @__PURE__ */ m(y, { children: null })
 			]
@@ -505,8 +511,8 @@ function De() {
 }
 //#endregion
 //#region src/package/rangeflow/components/RangeTabs/hooks/use-apply-slider-layout.ts
-function Oe() {
-	let e = Y(), t = K((e) => e.range.from.getTime()), n = K((e) => e.range.to.getTime()), { slider: { root: i } } = X();
+function De() {
+	let e = Z(), t = K((e) => e.range.from.getTime()), n = K((e) => e.range.to.getTime()), { slider: { root: i } } = q();
 	o(() => {
 		r(() => {
 			e(i.current.getLayout());
@@ -520,8 +526,8 @@ function Oe() {
 }
 //#endregion
 //#region src/package/rangeflow/components/RangeTabs/index.tsx
-function ke() {
-	Oe();
+function Oe() {
+	De();
 	let e = s(), 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), l = c(() => t.filter((e) => !(a && d(e.from).isBefore(a, "day") || o && d(e.to).isAfter(o, "day"))), [
 		t,
 		a,
@@ -537,16 +543,16 @@ function ke() {
 			className: "relative flex items-center overflow-hidden",
 			children: l.map((t, r) => /* @__PURE__ */ h("button", {
 				"data-active": u === r || void 0,
-				className: b("rangeflow-tab relative z-1 flex items-center px-1.5 py-1 focus:outline-none"),
+				className: x("rangeflow-tab relative z-1 flex items-center px-1.5 py-1 focus:outline-none"),
 				onClick: () => {
 					n((e) => {
 						e.range.from = t.from, e.range.to = t.to;
 					});
 				},
 				children: [/* @__PURE__ */ m("span", {
-					className: b("relative z-1 text-xs tracking-tight text-(--rangeflow-text-muted)", { "font-medium text-(--rangeflow-text)": u === r }),
+					className: x("relative z-1 text-xs tracking-tight text-(--rangeflow-text-muted)", { "font-medium text-(--rangeflow-text)": u === r }),
 					children: t.label
-				}), u === r && /* @__PURE__ */ m(S.div, {
+				}), u === r && /* @__PURE__ */ m(C.div, {
 					className: "rangeflow-tab-indicator absolute inset-0 rounded-sm bg-(--rangeflow-active-bg)",
 					initial: !1,
 					layoutId: e,
@@ -562,7 +568,7 @@ function ke() {
 }
 //#endregion
 //#region src/package/rangeflow/components/Calendar/CalendarDayButton.tsx
-function Ae({ className: e, day: t, modifiers: n, ...r }) {
+function ke({ className: e, day: t, modifiers: n, ...r }) {
 	let i = l(null);
 	o(() => {
 		n.focused && i.current?.focus();
@@ -575,22 +581,22 @@ function Ae({ className: e, day: t, modifiers: n, ...r }) {
 		"data-range-start": n.range_start || void 0,
 		"data-selected": a || void 0,
 		"data-today": n.today || void 0,
-		className: b("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),
+		className: x("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 je = {
+var Ae = {
 	up: "rotate-180",
 	down: "",
 	left: "rotate-90",
 	right: "-rotate-90"
 };
-function Me({ className: e, orientation: t = "down", size: n = 16 }) {
+function je({ className: e, orientation: t = "down", size: n = 16 }) {
 	return /* @__PURE__ */ m("svg", {
 		"aria-hidden": "true",
-		className: b("shrink-0", je[t], e),
+		className: x("shrink-0", Ae[t], e),
 		fill: "none",
 		height: n,
 		stroke: "currentColor",
@@ -604,21 +610,21 @@ function Me({ className: e, orientation: t = "down", size: n = 16 }) {
 }
 //#endregion
 //#region src/package/rangeflow/components/Calendar/index.tsx
-function Ne({ captionLayout: e = "label", className: t, classNames: n, components: r, showOutsideDays: i = !0, ...a }) {
+function Me({ captionLayout: e = "label", className: t, classNames: n, components: r, showOutsideDays: i = !0, ...a }) {
 	return /* @__PURE__ */ m(le, {
 		captionLayout: e,
-		className: b("rangeflow-calendar w-fit p-3 select-none", t),
+		className: x("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: b("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: b("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_previous: x("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: x("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: b("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_root: x("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",
@@ -636,8 +642,8 @@ function Ne({ captionLayout: e = "label", className: t, classNames: n, component
 			...n
 		},
 		components: {
-			DayButton: Ae,
-			Chevron: Me,
+			DayButton: ke,
+			Chevron: je,
 			...r
 		},
 		...a
@@ -645,12 +651,12 @@ function Ne({ captionLayout: e = "label", className: t, classNames: n, component
 }
 //#endregion
 //#region src/package/rangeflow/components/Popover/index.tsx
-var Pe = n(({ align: e = "center", className: t, sideOffset: n = 6, children: r, ...i }) => /* @__PURE__ */ m(O.Portal, { children: /* @__PURE__ */ m(O.Content, {
+var Ne = n(({ align: e = "center", className: t, sideOffset: n = 6, children: r, ...i }) => /* @__PURE__ */ m(O.Portal, { children: /* @__PURE__ */ m(O.Content, {
 	asChild: !0,
 	align: e,
 	sideOffset: n,
 	...i,
-	children: /* @__PURE__ */ m(S.div, {
+	children: /* @__PURE__ */ m(C.div, {
 		animate: {
 			opacity: 1,
 			scale: 1,
@@ -668,15 +674,15 @@ var Pe = n(({ align: e = "center", className: t, sideOffset: n = 6, children: r,
 			damping: 32,
 			mass: .8
 		},
-		className: b("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),
+		className: x("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
 	})
-}) })), Fe = O.Root, Ie = O.Trigger;
+}) })), Pe = O.Root, Fe = O.Trigger;
 O.Anchor;
 //#endregion
 //#region src/package/rangeflow/components/PickerBar/CalendarPopover.tsx
-function Le({ 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 = () => {
+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(),
@@ -692,18 +698,18 @@ function Le({ children: e }) {
 			t.range = e;
 		});
 	};
-	return /* @__PURE__ */ h(Fe, {
+	return /* @__PURE__ */ h(Pe, {
 		modal: !0,
 		onOpenChange: (e) => {
 			e === !1 && l();
 		},
-		children: [/* @__PURE__ */ m(Ie, {
+		children: [/* @__PURE__ */ m(Fe, {
 			className: "cursor-pointer",
 			children: e
-		}), /* @__PURE__ */ m(Pe, {
+		}), /* @__PURE__ */ m(Ne, {
 			align: "start",
 			sideOffset: 10,
-			children: /* @__PURE__ */ m(Ne, {
+			children: /* @__PURE__ */ m(Me, {
 				defaultMonth: r.from,
 				numberOfMonths: 2,
 				showOutsideDays: !1,
@@ -729,7 +735,7 @@ function Le({ children: e }) {
 }
 //#endregion
 //#region src/package/rangeflow/icons/CalendarIcon.tsx
-function Q() {
+function Le() {
 	return /* @__PURE__ */ m("svg", {
 		fill: "none",
 		height: "15",
@@ -760,7 +766,7 @@ function $() {
 	}) : /* @__PURE__ */ h("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__ */ m(Q, {}),
+			/* @__PURE__ */ m(Le, {}),
 			r,
 			/* @__PURE__ */ m("span", {
 				className: "text-(--rangeflow-text-faint)",
@@ -776,7 +782,7 @@ function Re() {
 	let e = K((e) => e.calendar), { RangeTabs: n } = G();
 	return /* @__PURE__ */ h("div", {
 		className: "flex h-full items-center justify-between px-2",
-		children: [e ? /* @__PURE__ */ m(Le, { children: /* @__PURE__ */ m($, {}) }) : /* @__PURE__ */ m($, {}), n ? t(n) : /* @__PURE__ */ m(ke, {})]
+		children: [e ? /* @__PURE__ */ m(Ie, { children: /* @__PURE__ */ m($, {}) }) : /* @__PURE__ */ m($, {}), n ? t(n) : /* @__PURE__ */ m(Oe, {})]
 	});
 }
 //#endregion
@@ -787,7 +793,7 @@ function ze() {
 //#endregion
 //#region src/package/rangeflow/hooks/use-emit-date-change.ts
 function Be() {
-	let e = J(), { onChange: t } = ze();
+	let e = X(), { onChange: t } = ze();
 	o(() => e.subscribe((e, n) => {
 		e.selected_date !== n.selected_date && t(e.selected_date);
 	}), [e, t]);
@@ -802,7 +808,7 @@ function Ve() {
 			children: /* @__PURE__ */ m(Re, {})
 		}), /* @__PURE__ */ m("div", {
 			className: "rangeflow-body mx-2",
-			children: /* @__PURE__ */ m(De, {})
+			children: /* @__PURE__ */ m(Ee, {})
 		})]
 	});
 }

package/package.json

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