@jinmi/ui 0.0.0-stage → 6.0.2

package/es/base-ui/ContextMenu/store.mjs

@@ -0,0 +1,128 @@
+//#region src/base-ui/ContextMenu/store.ts
+const emptyState = {
+	anchor: null,
+	iconSpaceMode: "global",
+	items: [],
+	open: false,
+	triggerId: null
+};
+let contextMenuState = emptyState;
+const listeners = /* @__PURE__ */ new Set();
+const lastPointer = {
+	ready: false,
+	triggerId: null,
+	x: 0,
+	y: 0
+};
+const notify = () => {
+	listeners.forEach((listener) => listener());
+};
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+};
+const getSnapshot = () => contextMenuState;
+const getServerSnapshot = () => emptyState;
+const updateLastPointer = (event) => {
+	lastPointer.x = event.clientX;
+	lastPointer.y = event.clientY;
+	lastPointer.ready = true;
+	if (event.target instanceof Element) {
+		const trigger = event.target.closest("[data-contextmenu-trigger]");
+		lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;
+	} else lastPointer.triggerId = null;
+};
+const createVirtualElement = (point) => ({
+	contextElement: typeof document === "undefined" ? void 0 : document.body,
+	getBoundingClientRect: () => ({
+		bottom: point.y,
+		height: 0,
+		left: point.x,
+		right: point.x,
+		toJSON: () => void 0,
+		top: point.y,
+		width: 0,
+		x: point.x,
+		y: point.y
+	})
+});
+const setContextMenuState = (next) => {
+	contextMenuState = {
+		...contextMenuState,
+		...next
+	};
+	notify();
+};
+let interceptor = null;
+/**
+* Register a global interceptor for every context menu — imperative
+* `showContextMenu`/`closeContextMenu` calls and `ContextMenuTrigger` alike.
+* The interceptor may render the menu through another system (e.g. a native
+* OS menu) or invoke `fallback()` to show the default web menu. Pass `null`
+* to restore the default behavior.
+*/
+const setContextMenuInterceptor = (next) => {
+	interceptor = next;
+};
+const showWebContextMenu = (items, options) => {
+	const fallbackPoint = {
+		x: window.innerWidth / 2,
+		y: window.innerHeight / 2
+	};
+	const point = lastPointer.ready ? {
+		x: lastPointer.x,
+		y: lastPointer.y
+	} : fallbackPoint;
+	setContextMenuState({
+		anchor: createVirtualElement(point),
+		footer: options?.footer,
+		header: options?.header,
+		iconAlign: options?.iconAlign,
+		iconSpaceMode: options?.iconSpaceMode ?? "global",
+		items,
+		listItemHeight: options?.listItemHeight,
+		open: true,
+		triggerId: lastPointer.triggerId ?? null,
+		virtual: options?.virtual
+	});
+};
+const showContextMenu = (items, options) => {
+	if (typeof window === "undefined") return;
+	if (interceptor?.show) {
+		interceptor.show(items, options, () => showWebContextMenu(items, options));
+		return;
+	}
+	showWebContextMenu(items, options);
+};
+/**
+* Update menu items while keeping current anchor/position.
+* Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.
+*/
+const updateContextMenuItems = (items) => {
+	if (typeof window === "undefined") return;
+	setContextMenuState({ items });
+};
+const closeWebContextMenu = () => {
+	setContextMenuState({
+		anchor: null,
+		footer: void 0,
+		header: void 0,
+		iconSpaceMode: "global",
+		items: [],
+		listItemHeight: void 0,
+		open: false,
+		triggerId: null,
+		virtual: void 0
+	});
+};
+const closeContextMenu = () => {
+	if (interceptor?.close) {
+		interceptor.close(closeWebContextMenu);
+		return;
+	}
+	closeWebContextMenu();
+};
+//#endregion
+export { closeContextMenu, getServerSnapshot, getSnapshot, setContextMenuInterceptor, setContextMenuState, showContextMenu, subscribe, updateContextMenuItems, updateLastPointer };
+
+//# sourceMappingURL=store.mjs.map

package/es/base-ui/ContextMenu/store.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.mjs","names":[],"sources":["../../../src/base-ui/ContextMenu/store.ts"],"sourcesContent":["import type { VirtualElement } from '@floating-ui/react';\r\nimport type { ReactNode } from 'react';\r\n\r\nimport type { VirtualListProps } from '@/base-ui/virtual';\r\nimport type { IconAlign } from '@/Menu';\r\n\r\nimport type { IconSpaceMode } from './renderItems';\r\nimport type { ContextMenuItem } from './type';\r\n\r\nexport type ContextMenuState = Pick<VirtualListProps, 'virtual' | 'listItemHeight'> & {\r\n  anchor: VirtualElement | null;\r\n  footer?: ReactNode;\r\n  header?: ReactNode;\r\n  iconAlign?: IconAlign;\r\n  iconSpaceMode: IconSpaceMode;\r\n  items: ContextMenuItem[];\r\n  open: boolean;\r\n  triggerId: string | null;\r\n};\r\n\r\nconst emptyState: ContextMenuState = {\r\n  anchor: null,\r\n  iconSpaceMode: 'global',\r\n  items: [],\r\n  open: false,\r\n  triggerId: null,\r\n};\r\n\r\nlet contextMenuState: ContextMenuState = emptyState;\r\nconst listeners = new Set<() => void>();\r\nconst lastPointer = { ready: false, triggerId: null as string | null, x: 0, y: 0 };\r\n\r\nconst notify = () => {\r\n  listeners.forEach((listener) => listener());\r\n};\r\n\r\nexport const subscribe = (listener: () => void) => {\r\n  listeners.add(listener);\r\n  return () => listeners.delete(listener);\r\n};\r\n\r\nexport const getSnapshot = () => contextMenuState;\r\nexport const getServerSnapshot = () => emptyState;\r\n\r\nexport const updateLastPointer = (event: MouseEvent | PointerEvent) => {\r\n  lastPointer.x = event.clientX;\r\n  lastPointer.y = event.clientY;\r\n  lastPointer.ready = true;\r\n  if (event.target instanceof Element) {\r\n    const trigger = event.target.closest<HTMLElement>('[data-contextmenu-trigger]');\r\n    lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;\r\n  } else {\r\n    lastPointer.triggerId = null;\r\n  }\r\n};\r\n\r\nconst createVirtualElement = (point: { x: number; y: number }): VirtualElement => ({\r\n  contextElement: typeof document === 'undefined' ? undefined : document.body,\r\n  getBoundingClientRect: () =>\r\n    ({\r\n      bottom: point.y,\r\n      height: 0,\r\n      left: point.x,\r\n      right: point.x,\r\n      toJSON: () => undefined,\r\n      top: point.y,\r\n      width: 0,\r\n      x: point.x,\r\n      y: point.y,\r\n    }) as DOMRect,\r\n});\r\n\r\nexport const setContextMenuState = (next: Partial<ContextMenuState>) => {\r\n  contextMenuState = { ...contextMenuState, ...next };\r\n  notify();\r\n};\r\n\r\nexport interface ShowContextMenuOptions extends Pick<\r\n  VirtualListProps,\r\n  'virtual' | 'listItemHeight'\r\n> {\r\n  footer?: ReactNode;\r\n  header?: ReactNode;\r\n  iconAlign?: IconAlign;\r\n  iconSpaceMode?: IconSpaceMode;\r\n}\r\n\r\nexport interface ContextMenuInterceptor {\r\n  close?: (fallback: () => void) => void;\r\n  show?: (\r\n    items: ContextMenuItem[],\r\n    options: ShowContextMenuOptions | undefined,\r\n    fallback: () => void,\r\n  ) => void;\r\n}\r\n\r\nlet interceptor: ContextMenuInterceptor | null = null;\r\n\r\n/**\r\n * Register a global interceptor for every context menu — imperative\r\n * `showContextMenu`/`closeContextMenu` calls and `ContextMenuTrigger` alike.\r\n * The interceptor may render the menu through another system (e.g. a native\r\n * OS menu) or invoke `fallback()` to show the default web menu. Pass `null`\r\n * to restore the default behavior.\r\n */\r\nexport const setContextMenuInterceptor = (next: ContextMenuInterceptor | null) => {\r\n  interceptor = next;\r\n};\r\n\r\nconst showWebContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\r\n  const fallbackPoint = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\r\n  const point = lastPointer.ready ? { x: lastPointer.x, y: lastPointer.y } : fallbackPoint;\r\n\r\n  setContextMenuState({\r\n    anchor: createVirtualElement(point),\r\n    footer: options?.footer,\r\n    header: options?.header,\r\n    iconAlign: options?.iconAlign,\r\n    iconSpaceMode: options?.iconSpaceMode ?? 'global',\r\n    items,\r\n    listItemHeight: options?.listItemHeight,\r\n    open: true,\r\n    triggerId: lastPointer.triggerId ?? null,\r\n    virtual: options?.virtual,\r\n  });\r\n};\r\n\r\nexport const showContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\r\n  if (typeof window === 'undefined') return;\r\n\r\n  if (interceptor?.show) {\r\n    interceptor.show(items, options, () => showWebContextMenu(items, options));\r\n    return;\r\n  }\r\n\r\n  showWebContextMenu(items, options);\r\n};\r\n\r\n/**\r\n * Update menu items while keeping current anchor/position.\r\n * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.\r\n */\r\nexport const updateContextMenuItems = (items: ContextMenuItem[]) => {\r\n  if (typeof window === 'undefined') return;\r\n  setContextMenuState({ items });\r\n};\r\n\r\nconst closeWebContextMenu = () => {\r\n  setContextMenuState({\r\n    anchor: null,\r\n    footer: undefined,\r\n    header: undefined,\r\n    iconSpaceMode: 'global',\r\n    items: [],\r\n    listItemHeight: undefined,\r\n    open: false,\r\n    triggerId: null,\r\n    virtual: undefined,\r\n  });\r\n};\r\n\r\nexport const closeContextMenu = () => {\r\n  if (interceptor?.close) {\r\n    interceptor.close(closeWebContextMenu);\r\n    return;\r\n  }\r\n\r\n  closeWebContextMenu();\r\n};\r\n"],"mappings":";AAoBA,MAAM,aAA+B;CACnC,QAAQ;CACR,eAAe;CACf,OAAO,CAAC;CACR,MAAM;CACN,WAAW;AACb;AAEA,IAAI,mBAAqC;AACzC,MAAM,4BAAY,IAAI,IAAgB;AACtC,MAAM,cAAc;CAAE,OAAO;CAAO,WAAW;CAAuB,GAAG;CAAG,GAAG;AAAE;AAEjF,MAAM,eAAe;CACnB,UAAU,SAAS,aAAa,SAAS,CAAC;AAC5C;AAEA,MAAa,aAAa,aAAyB;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa,UAAU,OAAO,QAAQ;AACxC;AAEA,MAAa,oBAAoB;AACjC,MAAa,0BAA0B;AAEvC,MAAa,qBAAqB,UAAqC;CACrE,YAAY,IAAI,MAAM;CACtB,YAAY,IAAI,MAAM;CACtB,YAAY,QAAQ;CACpB,IAAI,MAAM,kBAAkB,SAAS;EACnC,MAAM,UAAU,MAAM,OAAO,QAAqB,4BAA4B;EAC9E,YAAY,YAAY,SAAS,QAAQ,sBAAsB;CACjE,OACE,YAAY,YAAY;AAE5B;AAEA,MAAM,wBAAwB,WAAqD;CACjF,gBAAgB,OAAO,aAAa,cAAc,KAAA,IAAY,SAAS;CACvE,8BACG;EACC,QAAQ,MAAM;EACd,QAAQ;EACR,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,KAAA;EACd,KAAK,MAAM;EACX,OAAO;EACP,GAAG,MAAM;EACT,GAAG,MAAM;CACX;AACJ;AAEA,MAAa,uBAAuB,SAAoC;CACtE,mBAAmB;EAAE,GAAG;EAAkB,GAAG;CAAK;CAClD,OAAO;AACT;AAqBA,IAAI,cAA6C;;;;;;;;AASjD,MAAa,6BAA6B,SAAwC;CAChF,cAAc;AAChB;AAEA,MAAM,sBAAsB,OAA0B,YAAqC;CACzF,MAAM,gBAAgB;EAAE,GAAG,OAAO,aAAa;EAAG,GAAG,OAAO,cAAc;CAAE;CAC5E,MAAM,QAAQ,YAAY,QAAQ;EAAE,GAAG,YAAY;EAAG,GAAG,YAAY;CAAE,IAAI;CAE3E,oBAAoB;EAClB,QAAQ,qBAAqB,KAAK;EAClC,QAAQ,SAAS;EACjB,QAAQ,SAAS;EACjB,WAAW,SAAS;EACpB,eAAe,SAAS,iBAAiB;EACzC;EACA,gBAAgB,SAAS;EACzB,MAAM;EACN,WAAW,YAAY,aAAa;EACpC,SAAS,SAAS;CACpB,CAAC;AACH;AAEA,MAAa,mBAAmB,OAA0B,YAAqC;CAC7F,IAAI,OAAO,WAAW,aAAa;CAEnC,IAAI,aAAa,MAAM;EACrB,YAAY,KAAK,OAAO,eAAe,mBAAmB,OAAO,OAAO,CAAC;EACzE;CACF;CAEA,mBAAmB,OAAO,OAAO;AACnC;;;;;AAMA,MAAa,0BAA0B,UAA6B;CAClE,IAAI,OAAO,WAAW,aAAa;CACnC,oBAAoB,EAAE,MAAM,CAAC;AAC/B;AAEA,MAAM,4BAA4B;CAChC,oBAAoB;EAClB,QAAQ;EACR,QAAQ,KAAA;EACR,QAAQ,KAAA;EACR,eAAe;EACf,OAAO,CAAC;EACR,gBAAgB,KAAA;EAChB,MAAM;EACN,WAAW;EACX,SAAS,KAAA;CACX,CAAC;AACH;AAEA,MAAa,yBAAyB;CACpC,IAAI,aAAa,OAAO;EACtB,YAAY,MAAM,mBAAmB;EACrC;CACF;CAEA,oBAAoB;AACtB"}

package/es/base-ui/ContextMenu/type.d.mts

@@ -0,0 +1,11 @@
+import { MenuCheckboxItemType } from "../../Menu/checkboxItem.mjs";
+import { MenuSwitchItemType } from "../../Menu/switchItem.mjs";
+import { BaseMenuItemType } from "../../Menu/baseItem.mjs";
+import "../../Menu/index.mjs";
+//#region src/base-ui/ContextMenu/type.d.ts
+type ContextMenuCheckboxItem = MenuCheckboxItemType;
+type ContextMenuSwitchItem = MenuSwitchItemType;
+type ContextMenuItem = BaseMenuItemType;
+//#endregion
+export { ContextMenuCheckboxItem, ContextMenuItem, ContextMenuSwitchItem };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/DatePicker/CalendarPanel.mjs

@@ -0,0 +1,188 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { panelStyles } from "../panelStyles.mjs";
+import datePicker_default from "../../i18n/resources/en/datePicker.mjs";
+import { buildMonthGrid, getWeekStart, getWeekdayLabels, isDayDisabled, isMonthDisabled, isSameDay, isYearDisabled, moveDayFocus, orderRange } from "./calendar.mjs";
+import { styles } from "./style.mjs";
+import { memo, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import dayjs from "dayjs";
+//#region src/base-ui/DatePicker/CalendarPanel.tsx
+const MONTHS = Array.from({ length: 12 }, (_, index) => index);
+const CalendarPanel = memo(({ bounds, hovered, mode, month, onHover, onMonthChange, onSelect, range, selected, showNav = true }) => {
+	const { t } = useTranslation(datePicker_default);
+	const [view, setView] = useState(mode);
+	const [focused, setFocused] = useState(selected ?? month);
+	const gridRef = useRef(null);
+	const weekStart = getWeekStart();
+	const today = /* @__PURE__ */ new Date();
+	const current = dayjs(month);
+	const decadeStart = Math.floor(current.year() / 12) * 12;
+	const days = buildMonthGrid(month, weekStart);
+	const focusDay = dayjs(focused).isSame(month, "month") && !isDayDisabled(focused, bounds) ? focused : days.find((day) => dayjs(day).isSame(month, "month") && !isDayDisabled(day, bounds)) ?? current.startOf("month").toDate();
+	const keyboardMoveRef = useRef(false);
+	useEffect(() => {
+		if (!keyboardMoveRef.current) return;
+		keyboardMoveRef.current = false;
+		gridRef.current?.querySelector("[data-focus-target]")?.focus();
+	}, [focused, month]);
+	const step = (direction) => {
+		const unit = view === "date" ? "month" : "year";
+		const amount = view === "year" ? 12 * direction : direction;
+		onMonthChange(current.add(amount, unit).toDate());
+	};
+	const drillUp = () => setView(view === "date" ? "month" : "year");
+	const handleDayKey = (event) => {
+		let next = moveDayFocus(focusDay, event.key, weekStart);
+		if (!next) return;
+		event.preventDefault();
+		for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) next = moveDayFocus(next, event.key, weekStart);
+		if (!next || isDayDisabled(next, bounds)) return;
+		keyboardMoveRef.current = true;
+		setFocused(next);
+		if (!dayjs(next).isSame(month, "month")) onMonthChange(next);
+	};
+	const band = (() => {
+		if (!range?.[0]) return null;
+		const end = range[1] ?? hovered;
+		return end ? orderRange(range[0], end) : null;
+	})();
+	const renderDays = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			"aria-label": current.format("MMMM YYYY"),
+			className: styles.grid,
+			ref: gridRef,
+			role: "grid",
+			onMouseLeave: () => onHover?.(null),
+			children: [getWeekdayLabels(weekStart).map((label) => /* @__PURE__ */ jsx("span", {
+				className: cx(styles.weekday, panelStyles.label),
+				role: "columnheader",
+				children: label
+			}, label)), days.map((date) => {
+				const outside = !dayjs(date).isSame(month, "month");
+				const isStart = !outside && !!band && isSameDay(date, band[0]);
+				const isEnd = !outside && !!band && isSameDay(date, band[1]);
+				const inBand = !outside && !!band && dayjs(date).isAfter(band[0], "day") && dayjs(date).isBefore(band[1], "day");
+				const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);
+				const focusTarget = isSameDay(date, focusDay) && !outside;
+				return /* @__PURE__ */ jsx("span", {
+					"aria-selected": pressed,
+					role: "gridcell",
+					className: cx(styles.cell, inBand && styles.band, isStart && !isEnd && styles.bandStart, isEnd && !isStart && styles.bandEnd),
+					children: /* @__PURE__ */ jsx("button", {
+						"aria-label": dayjs(date).format("MMMM D, YYYY"),
+						"aria-pressed": pressed,
+						className: styles.day,
+						"data-focus-target": focusTarget ? "" : void 0,
+						"data-outside": outside ? "" : void 0,
+						"data-today": isSameDay(date, today) ? "" : void 0,
+						disabled: isDayDisabled(date, bounds),
+						tabIndex: focusTarget ? 0 : -1,
+						type: "button",
+						onClick: () => onSelect(dayjs(date).startOf("day").toDate()),
+						onKeyDown: handleDayKey,
+						onMouseEnter: () => onHover?.(date),
+						children: date.getDate()
+					})
+				}, date.toISOString());
+			})]
+		});
+	};
+	const renderMonths = () => /* @__PURE__ */ jsx("div", {
+		className: styles.tiles,
+		children: MONTHS.map((index) => {
+			const date = current.month(index).startOf("month").toDate();
+			return /* @__PURE__ */ jsx("button", {
+				"aria-pressed": !!selected && dayjs(selected).isSame(date, "month"),
+				className: styles.tile,
+				"data-today": dayjs(today).isSame(date, "month") ? "" : void 0,
+				disabled: isMonthDisabled(date, bounds),
+				type: "button",
+				onClick: () => {
+					if (mode === "month") return onSelect(date);
+					onMonthChange(date);
+					setView("date");
+				},
+				children: dayjs(date).format("MMM")
+			}, index);
+		})
+	});
+	const renderYears = () => /* @__PURE__ */ jsx("div", {
+		className: styles.tiles,
+		children: MONTHS.map((index) => {
+			const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();
+			return /* @__PURE__ */ jsx("button", {
+				"aria-pressed": !!selected && dayjs(selected).isSame(date, "year"),
+				className: styles.tile,
+				"data-today": dayjs(today).isSame(date, "year") ? "" : void 0,
+				disabled: isYearDisabled(date, bounds),
+				type: "button",
+				onClick: () => {
+					if (mode === "year") return onSelect(date);
+					onMonthChange(current.year(decadeStart + index).toDate());
+					setView("month");
+				},
+				children: decadeStart + index
+			}, index);
+		})
+	});
+	const title = (() => {
+		if (view === "date") return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			current.format("MMMM"),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: panelStyles.titleMuted,
+				children: current.format("YYYY")
+			})
+		] });
+		if (view === "month") return current.format("YYYY");
+		return `${decadeStart} – ${decadeStart + 11}`;
+	})();
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.calendar,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.header,
+				children: [/* @__PURE__ */ jsx("button", {
+					className: panelStyles.title,
+					disabled: view === "year",
+					type: "button",
+					onClick: drillUp,
+					children: title
+				}), showNav && /* @__PURE__ */ jsxs("div", {
+					className: styles.navGroup,
+					children: [/* @__PURE__ */ jsx("button", {
+						"aria-label": t("datePicker.previous"),
+						className: panelStyles.nav,
+						type: "button",
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: ChevronLeft,
+							size: 14
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						"aria-label": t("datePicker.next"),
+						className: panelStyles.nav,
+						type: "button",
+						onClick: () => step(1),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: ChevronRight,
+							size: 14
+						})
+					})]
+				})]
+			}),
+			view === "date" && renderDays(),
+			view === "month" && renderMonths(),
+			view === "year" && renderYears()
+		]
+	});
+});
+CalendarPanel.displayName = "CalendarPanel";
+//#endregion
+export { CalendarPanel as default };
+
+//# sourceMappingURL=CalendarPanel.mjs.map

package/es/base-ui/DatePicker/CalendarPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPanel.mjs","names":["datePickerMessages"],"sources":["../../../src/base-ui/DatePicker/CalendarPanel.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport dayjs from 'dayjs';\r\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\r\nimport { type KeyboardEvent, memo, useEffect, useRef, useState } from 'react';\r\n\r\nimport { panelStyles } from '@/base-ui/panelStyles';\r\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\r\nimport { useTranslation } from '@/i18n/useTranslation';\r\nimport Icon from '@/Icon';\r\n\r\nimport {\r\n  buildMonthGrid,\r\n  type CalendarMode,\r\n  type DateBounds,\r\n  getWeekdayLabels,\r\n  getWeekStart,\r\n  isDayDisabled,\r\n  isMonthDisabled,\r\n  isSameDay,\r\n  isYearDisabled,\r\n  moveDayFocus,\r\n  orderRange,\r\n} from './calendar';\r\nimport { styles } from './style';\r\n\r\nexport interface CalendarPanelProps {\r\n  bounds: DateBounds;\r\n  hovered?: Date | null;\r\n  mode: CalendarMode;\r\n  month: Date;\r\n  onHover?: (date: Date | null) => void;\r\n  onMonthChange: (month: Date) => void;\r\n  onSelect: (date: Date) => void;\r\n  range?: [Date | null, Date | null];\r\n  selected?: Date | null;\r\n  showNav?: boolean;\r\n}\r\n\r\nconst MONTHS = Array.from({ length: 12 }, (_, index) => index);\r\n\r\nconst CalendarPanel = memo<CalendarPanelProps>(\r\n  ({\r\n    bounds,\r\n    hovered,\r\n    mode,\r\n    month,\r\n    onHover,\r\n    onMonthChange,\r\n    onSelect,\r\n    range,\r\n    selected,\r\n    showNav = true,\r\n  }) => {\r\n    const { t } = useTranslation(datePickerMessages);\r\n    const [view, setView] = useState<CalendarMode>(mode);\r\n    const [focused, setFocused] = useState<Date>(selected ?? month);\r\n    const gridRef = useRef<HTMLDivElement>(null);\r\n    const weekStart = getWeekStart();\r\n    const today = new Date();\r\n    const current = dayjs(month);\r\n    const decadeStart = Math.floor(current.year() / 12) * 12;\r\n    const days = buildMonthGrid(month, weekStart);\r\n    const focusDay =\r\n      dayjs(focused).isSame(month, 'month') && !isDayDisabled(focused, bounds)\r\n        ? focused\r\n        : (days.find((day) => dayjs(day).isSame(month, 'month') && !isDayDisabled(day, bounds)) ??\r\n          current.startOf('month').toDate());\r\n    const keyboardMoveRef = useRef(false);\r\n\r\n    useEffect(() => {\r\n      if (!keyboardMoveRef.current) return;\r\n      keyboardMoveRef.current = false;\r\n      gridRef.current?.querySelector<HTMLButtonElement>('[data-focus-target]')?.focus();\r\n    }, [focused, month]);\r\n\r\n    const step = (direction: 1 | -1) => {\r\n      const unit = view === 'date' ? 'month' : 'year';\r\n      const amount = view === 'year' ? 12 * direction : direction;\r\n      onMonthChange(current.add(amount, unit).toDate());\r\n    };\r\n\r\n    const drillUp = () => setView(view === 'date' ? 'month' : 'year');\r\n\r\n    const handleDayKey = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n      let next = moveDayFocus(focusDay, event.key, weekStart);\r\n      if (!next) return;\r\n      event.preventDefault();\r\n      for (let step = 0; next && isDayDisabled(next, bounds) && step < 366; step++) {\r\n        next = moveDayFocus(next, event.key, weekStart);\r\n      }\r\n      if (!next || isDayDisabled(next, bounds)) return;\r\n      keyboardMoveRef.current = true;\r\n      setFocused(next);\r\n      if (!dayjs(next).isSame(month, 'month')) onMonthChange(next);\r\n    };\r\n\r\n    const band = (() => {\r\n      if (!range?.[0]) return null;\r\n      const end = range[1] ?? hovered;\r\n      return end ? orderRange(range[0], end) : null;\r\n    })();\r\n\r\n    const renderDays = () => {\r\n      return (\r\n        <div\r\n          aria-label={current.format('MMMM YYYY')}\r\n          className={styles.grid}\r\n          ref={gridRef}\r\n          role=\"grid\"\r\n          onMouseLeave={() => onHover?.(null)}\r\n        >\r\n          {getWeekdayLabels(weekStart).map((label) => (\r\n            <span className={cx(styles.weekday, panelStyles.label)} key={label} role=\"columnheader\">\r\n              {label}\r\n            </span>\r\n          ))}\r\n          {days.map((date) => {\r\n            const outside = !dayjs(date).isSame(month, 'month');\r\n            const isStart = !outside && !!band && isSameDay(date, band[0]);\r\n            const isEnd = !outside && !!band && isSameDay(date, band[1]);\r\n            const inBand =\r\n              !outside &&\r\n              !!band &&\r\n              dayjs(date).isAfter(band[0], 'day') &&\r\n              dayjs(date).isBefore(band[1], 'day');\r\n            const pressed = !outside && (isSameDay(date, selected) || isStart || isEnd);\r\n            const focusTarget = isSameDay(date, focusDay) && !outside;\r\n\r\n            return (\r\n              <span\r\n                aria-selected={pressed}\r\n                key={date.toISOString()}\r\n                role=\"gridcell\"\r\n                className={cx(\r\n                  styles.cell,\r\n                  inBand && styles.band,\r\n                  isStart && !isEnd && styles.bandStart,\r\n                  isEnd && !isStart && styles.bandEnd,\r\n                )}\r\n              >\r\n                <button\r\n                  aria-label={dayjs(date).format('MMMM D, YYYY')}\r\n                  aria-pressed={pressed}\r\n                  className={styles.day}\r\n                  data-focus-target={focusTarget ? '' : undefined}\r\n                  data-outside={outside ? '' : undefined}\r\n                  data-today={isSameDay(date, today) ? '' : undefined}\r\n                  disabled={isDayDisabled(date, bounds)}\r\n                  tabIndex={focusTarget ? 0 : -1}\r\n                  type=\"button\"\r\n                  onClick={() => onSelect(dayjs(date).startOf('day').toDate())}\r\n                  onKeyDown={handleDayKey}\r\n                  onMouseEnter={() => onHover?.(date)}\r\n                >\r\n                  {date.getDate()}\r\n                </button>\r\n              </span>\r\n            );\r\n          })}\r\n        </div>\r\n      );\r\n    };\r\n\r\n    const renderMonths = () => (\r\n      <div className={styles.tiles}>\r\n        {MONTHS.map((index) => {\r\n          const date = current.month(index).startOf('month').toDate();\r\n          return (\r\n            <button\r\n              aria-pressed={!!selected && dayjs(selected).isSame(date, 'month')}\r\n              className={styles.tile}\r\n              data-today={dayjs(today).isSame(date, 'month') ? '' : undefined}\r\n              disabled={isMonthDisabled(date, bounds)}\r\n              key={index}\r\n              type=\"button\"\r\n              onClick={() => {\r\n                if (mode === 'month') return onSelect(date);\r\n                onMonthChange(date);\r\n                setView('date');\r\n              }}\r\n            >\r\n              {dayjs(date).format('MMM')}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n\r\n    const renderYears = () => (\r\n      <div className={styles.tiles}>\r\n        {MONTHS.map((index) => {\r\n          const date = dayjs(new Date(decadeStart + index, 0, 1)).toDate();\r\n          return (\r\n            <button\r\n              aria-pressed={!!selected && dayjs(selected).isSame(date, 'year')}\r\n              className={styles.tile}\r\n              data-today={dayjs(today).isSame(date, 'year') ? '' : undefined}\r\n              disabled={isYearDisabled(date, bounds)}\r\n              key={index}\r\n              type=\"button\"\r\n              onClick={() => {\r\n                if (mode === 'year') return onSelect(date);\r\n                onMonthChange(current.year(decadeStart + index).toDate());\r\n                setView('month');\r\n              }}\r\n            >\r\n              {decadeStart + index}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n    );\r\n\r\n    const title = (() => {\r\n      if (view === 'date')\r\n        return (\r\n          <>\r\n            {current.format('MMMM')}{' '}\r\n            <span className={panelStyles.titleMuted}>{current.format('YYYY')}</span>\r\n          </>\r\n        );\r\n      if (view === 'month') return current.format('YYYY');\r\n      return `${decadeStart} – ${decadeStart + 11}`;\r\n    })();\r\n\r\n    return (\r\n      <div className={styles.calendar}>\r\n        <div className={styles.header}>\r\n          <button\r\n            className={panelStyles.title}\r\n            disabled={view === 'year'}\r\n            type=\"button\"\r\n            onClick={drillUp}\r\n          >\r\n            {title}\r\n          </button>\r\n          {showNav && (\r\n            <div className={styles.navGroup}>\r\n              <button\r\n                aria-label={t('datePicker.previous')}\r\n                className={panelStyles.nav}\r\n                type=\"button\"\r\n                onClick={() => step(-1)}\r\n              >\r\n                <Icon icon={ChevronLeft} size={14} />\r\n              </button>\r\n              <button\r\n                aria-label={t('datePicker.next')}\r\n                className={panelStyles.nav}\r\n                type=\"button\"\r\n                onClick={() => step(1)}\r\n              >\r\n                <Icon icon={ChevronRight} size={14} />\r\n              </button>\r\n            </div>\r\n          )}\r\n        </div>\r\n        {view === 'date' && renderDays()}\r\n        {view === 'month' && renderMonths()}\r\n        {view === 'year' && renderYears()}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nCalendarPanel.displayName = 'CalendarPanel';\r\n\r\nexport default CalendarPanel;\r\n"],"mappings":"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"}

package/es/base-ui/DatePicker/DatePicker.d.mts

@@ -0,0 +1,6 @@
+import { DatePickerProps } from "./type.mjs";
+//#region src/base-ui/DatePicker/DatePicker.d.ts
+declare const DatePicker: import("react").NamedExoticComponent<DatePickerProps>;
+//#endregion
+export { DatePicker as default };
+//# sourceMappingURL=DatePicker.d.mts.map

package/es/base-ui/DatePicker/DatePicker.mjs

@@ -0,0 +1,88 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import datePicker_default from "../../i18n/resources/en/datePicker.mjs";
+import { DEFAULT_FORMAT, clampToBounds } from "./calendar.mjs";
+import { styles } from "./style.mjs";
+import CalendarPanel from "./CalendarPanel.mjs";
+import PickerShell from "./PickerShell.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useMergeState from "use-merge-value";
+import { CalendarIcon } from "lucide-react";
+import dayjs from "dayjs";
+//#region src/base-ui/DatePicker/DatePicker.tsx
+const PLACEHOLDER_KEY = {
+	date: "datePicker.placeholder",
+	month: "datePicker.monthPlaceholder",
+	year: "datePicker.yearPlaceholder"
+};
+const formatDate = (date, format, fallback) => typeof format === "function" ? format(date) : dayjs(date).format(format ?? fallback);
+const DatePicker = memo(({ allowClear = true, className, defaultValue = null, disabled, disabledDate, footer, format, max, min, mode = "date", onChange, placeholder, shadow, size, style, value, variant }) => {
+	const { t } = useTranslation(datePicker_default);
+	const [current, setCurrent] = useMergeState(defaultValue, {
+		defaultValue,
+		onChange,
+		value
+	});
+	const [open, setOpen] = useState(false);
+	const [month, setMonth] = useState(() => current ?? /* @__PURE__ */ new Date());
+	const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;
+	return /* @__PURE__ */ jsxs(PickerShell, {
+		className,
+		disabled,
+		open,
+		shadow,
+		showClear: allowClear && !!current,
+		size,
+		style,
+		variant,
+		icon: /* @__PURE__ */ jsx("span", {
+			className: styles.icon,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: CalendarIcon,
+				size: 14
+			})
+		}),
+		trigger: /* @__PURE__ */ jsx("button", {
+			className: styles.trigger,
+			disabled,
+			type: "button",
+			children: text ?? /* @__PURE__ */ jsx("span", {
+				className: styles.placeholder,
+				children: placeholder ?? t(PLACEHOLDER_KEY[mode])
+			})
+		}),
+		onClear: () => setCurrent(null),
+		onOpenChange: (next) => {
+			if (next) setMonth(current ?? clampToBounds(/* @__PURE__ */ new Date(), {
+				max,
+				min
+			}));
+			setOpen(next);
+		},
+		children: [/* @__PURE__ */ jsx(CalendarPanel, {
+			bounds: {
+				disabledDate,
+				max,
+				min
+			},
+			mode,
+			month,
+			selected: current,
+			onMonthChange: setMonth,
+			onSelect: (date) => {
+				setCurrent(date);
+				setOpen(false);
+			}
+		}), footer && /* @__PURE__ */ jsx("div", {
+			className: styles.footer,
+			children: footer
+		})]
+	});
+});
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker as default, formatDate };
+
+//# sourceMappingURL=DatePicker.mjs.map

package/es/base-ui/DatePicker/DatePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.mjs","names":["datePickerMessages","useControlledState"],"sources":["../../../src/base-ui/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport dayjs from 'dayjs';\r\nimport { CalendarIcon } from 'lucide-react';\r\nimport { memo, useState } from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\r\nimport { useTranslation } from '@/i18n/useTranslation';\r\nimport Icon from '@/Icon';\r\n\r\nimport { clampToBounds, DEFAULT_FORMAT } from './calendar';\r\nimport CalendarPanel from './CalendarPanel';\r\nimport PickerShell from './PickerShell';\r\nimport { styles } from './style';\r\nimport type { DatePickerProps } from './type';\r\n\r\nconst PLACEHOLDER_KEY = {\r\n  date: 'datePicker.placeholder',\r\n  month: 'datePicker.monthPlaceholder',\r\n  year: 'datePicker.yearPlaceholder',\r\n} as const;\r\n\r\nexport const formatDate = (date: Date, format: DatePickerProps['format'], fallback: string) =>\r\n  typeof format === 'function' ? format(date) : dayjs(date).format(format ?? fallback);\r\n\r\nconst DatePicker = memo<DatePickerProps>(\r\n  ({\r\n    allowClear = true,\r\n    className,\r\n    defaultValue = null,\r\n    disabled,\r\n    disabledDate,\r\n    footer,\r\n    format,\r\n    max,\r\n    min,\r\n    mode = 'date',\r\n    onChange,\r\n    placeholder,\r\n    shadow,\r\n    size,\r\n    style,\r\n    value,\r\n    variant,\r\n  }) => {\r\n    const { t } = useTranslation(datePickerMessages);\r\n    const [current, setCurrent] = useControlledState<Date | null>(defaultValue, {\r\n      defaultValue,\r\n      onChange,\r\n      value,\r\n    });\r\n    const [open, setOpen] = useState(false);\r\n    const [month, setMonth] = useState<Date>(() => current ?? new Date());\r\n\r\n    const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;\r\n\r\n    return (\r\n      <PickerShell\r\n        className={className}\r\n        disabled={disabled}\r\n        open={open}\r\n        shadow={shadow}\r\n        showClear={allowClear && !!current}\r\n        size={size}\r\n        style={style}\r\n        variant={variant}\r\n        icon={\r\n          <span className={styles.icon}>\r\n            <Icon icon={CalendarIcon} size={14} />\r\n          </span>\r\n        }\r\n        trigger={\r\n          <button className={styles.trigger} disabled={disabled} type=\"button\">\r\n            {text ?? (\r\n              <span className={styles.placeholder}>{placeholder ?? t(PLACEHOLDER_KEY[mode])}</span>\r\n            )}\r\n          </button>\r\n        }\r\n        onClear={() => setCurrent(null)}\r\n        onOpenChange={(next) => {\r\n          if (next) setMonth(current ?? clampToBounds(new Date(), { max, min }));\r\n          setOpen(next);\r\n        }}\r\n      >\r\n        <CalendarPanel\r\n          bounds={{ disabledDate, max, min }}\r\n          mode={mode}\r\n          month={month}\r\n          selected={current}\r\n          onMonthChange={setMonth}\r\n          onSelect={(date) => {\r\n            setCurrent(date);\r\n            setOpen(false);\r\n          }}\r\n        />\r\n        {footer && <div className={styles.footer}>{footer}</div>}\r\n      </PickerShell>\r\n    );\r\n  },\r\n);\r\n\r\nDatePicker.displayName = 'DatePicker';\r\n\r\nexport default DatePicker;\r\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,MAAM;AACR;AAEA,MAAa,cAAc,MAAY,QAAmC,aACxE,OAAO,WAAW,aAAa,OAAO,IAAI,IAAI,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,QAAQ;AAErF,MAAM,aAAa,MAChB,EACC,aAAa,MACb,WACA,eAAe,MACf,UACA,cACA,QACA,QACA,KACA,KACA,OAAO,QACP,UACA,aACA,QACA,MACA,OACA,OACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAeA,kBAAkB;CAC/C,MAAM,CAAC,SAAS,cAAcC,cAAgC,cAAc;EAC1E;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,eAAqB,2BAAW,IAAI,KAAK,CAAC;CAEpE,MAAM,OAAO,UAAU,WAAW,SAAS,QAAQ,eAAe,KAAK,IAAI;CAE3E,OACE,qBAAC,aAAD;EACa;EACD;EACJ;EACE;EACR,WAAW,cAAc,CAAC,CAAC;EACrB;EACC;EACE;EACT,MACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GACtB,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAc,MAAM;GAAK,CAAA;EACjC,CAAA;EAER,SACE,oBAAC,UAAD;GAAQ,WAAW,OAAO;GAAmB;GAAU,MAAK;GACzD,UAAA,QACC,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAc,UAAA,eAAe,EAAE,gBAAgB,KAAK;GAAQ,CAAA;EAEhF,CAAA;EAEV,eAAe,WAAW,IAAI;EAC9B,eAAe,SAAS;GACtB,IAAI,MAAM,SAAS,WAAW,8BAAc,IAAI,KAAK,GAAG;IAAE;IAAK;GAAI,CAAC,CAAC;GACrE,QAAQ,IAAI;EACd;EAzBF,UAAA,CA2BE,oBAAC,eAAD;GACE,QAAQ;IAAE;IAAc;IAAK;GAAI;GAC3B;GACC;GACP,UAAU;GACV,eAAe;GACf,WAAW,SAAS;IAClB,WAAW,IAAI;IACf,QAAQ,KAAK;GACf;EACD,CAAA,GACA,UAAU,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAS,UAAA;EAAY,CAAA,CAC5C;;AAEjB,CACF;AAEA,WAAW,cAAc"}

package/es/base-ui/DatePicker/DateRangePicker.d.mts

@@ -0,0 +1,6 @@
+import { DateRangePickerProps } from "./type.mjs";
+//#region src/base-ui/DatePicker/DateRangePicker.d.ts
+declare const DateRangePicker: import("react").NamedExoticComponent<DateRangePickerProps>;
+//#endregion
+export { DateRangePicker as default };
+//# sourceMappingURL=DateRangePicker.d.mts.map

package/es/base-ui/DatePicker/DateRangePicker.mjs

@@ -0,0 +1,128 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import datePicker_default from "../../i18n/resources/en/datePicker.mjs";
+import { DEFAULT_FORMAT, clampToBounds, orderRange } from "./calendar.mjs";
+import { styles } from "./style.mjs";
+import CalendarPanel from "./CalendarPanel.mjs";
+import PickerShell from "./PickerShell.mjs";
+import { formatDate } from "./DatePicker.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useMergeState from "use-merge-value";
+import { ArrowRight, CalendarIcon } from "lucide-react";
+import dayjs from "dayjs";
+//#region src/base-ui/DatePicker/DateRangePicker.tsx
+const EMPTY = [null, null];
+const DateRangePicker = memo(({ allowClear = true, className, defaultValue = EMPTY, disabled, disabledDate, format, max, min, onChange, placeholder, shadow, size, style, value, variant }) => {
+	const { t } = useTranslation(datePicker_default);
+	const [current, setCurrent] = useMergeState(defaultValue, {
+		defaultValue,
+		onChange,
+		value
+	});
+	const [open, setOpen] = useState(false);
+	const [draft, setDraft] = useState(EMPTY);
+	const [hovered, setHovered] = useState(null);
+	const [month, setMonth] = useState(() => current[0] ?? /* @__PURE__ */ new Date());
+	const shown = open && draft[0] ? draft : current;
+	const nextMonth = dayjs(month).add(1, "month").toDate();
+	const bounds = {
+		disabledDate,
+		max,
+		min
+	};
+	const half = (date, fallback, active) => /* @__PURE__ */ jsx("span", {
+		className: styles.rangeHalf,
+		"data-active": active ? "" : void 0,
+		children: date ? formatDate(date, format, DEFAULT_FORMAT.date) : /* @__PURE__ */ jsx("span", {
+			className: styles.placeholder,
+			children: fallback
+		})
+	});
+	const select = (date) => {
+		if (!draft[0] || draft[1]) {
+			setDraft([date, null]);
+			return;
+		}
+		const ordered = orderRange(draft[0], date);
+		setDraft(EMPTY);
+		setCurrent(ordered);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsx(PickerShell, {
+		className,
+		disabled,
+		open,
+		shadow,
+		showClear: allowClear && !!(current[0] || current[1]),
+		size,
+		style,
+		variant,
+		icon: /* @__PURE__ */ jsx("span", {
+			className: styles.icon,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: CalendarIcon,
+				size: 14
+			})
+		}),
+		trigger: /* @__PURE__ */ jsx("button", {
+			className: styles.trigger,
+			disabled,
+			type: "button",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: styles.rangeTrigger,
+				children: [
+					half(shown[0], placeholder?.[0] ?? t("datePicker.startPlaceholder"), open && !draft[0]),
+					/* @__PURE__ */ jsx("span", {
+						className: styles.icon,
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: ArrowRight,
+							size: 14
+						})
+					}),
+					half(shown[1], placeholder?.[1] ?? t("datePicker.endPlaceholder"), open && !!draft[0])
+				]
+			})
+		}),
+		onClear: () => setCurrent(EMPTY),
+		onOpenChange: (next) => {
+			if (next) {
+				setMonth(current[0] ?? clampToBounds(/* @__PURE__ */ new Date(), {
+					max,
+					min
+				}));
+				setDraft(EMPTY);
+			}
+			setOpen(next);
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.range,
+			children: [/* @__PURE__ */ jsx(CalendarPanel, {
+				bounds,
+				hovered,
+				mode: "date",
+				month,
+				range: draft[0] ? draft : current,
+				showNav: false,
+				onHover: setHovered,
+				onMonthChange: setMonth,
+				onSelect: select
+			}), /* @__PURE__ */ jsx(CalendarPanel, {
+				bounds,
+				hovered,
+				mode: "date",
+				month: nextMonth,
+				range: draft[0] ? draft : current,
+				onHover: setHovered,
+				onMonthChange: (next) => setMonth(dayjs(next).subtract(1, "month").toDate()),
+				onSelect: select
+			})]
+		})
+	});
+});
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
+export { DateRangePicker as default };
+
+//# sourceMappingURL=DateRangePicker.mjs.map

package/es/base-ui/DatePicker/DateRangePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.mjs","names":["datePickerMessages","useControlledState"],"sources":["../../../src/base-ui/DatePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport dayjs from 'dayjs';\r\nimport { ArrowRight, CalendarIcon } from 'lucide-react';\r\nimport { memo, useState } from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\r\nimport { useTranslation } from '@/i18n/useTranslation';\r\nimport Icon from '@/Icon';\r\n\r\nimport { clampToBounds, DEFAULT_FORMAT, orderRange } from './calendar';\r\nimport CalendarPanel from './CalendarPanel';\r\nimport { formatDate } from './DatePicker';\r\nimport PickerShell from './PickerShell';\r\nimport { styles } from './style';\r\nimport type { DateRangePickerProps, DateRangeValue } from './type';\r\n\r\nconst EMPTY: DateRangeValue = [null, null];\r\n\r\nconst DateRangePicker = memo<DateRangePickerProps>(\r\n  ({\r\n    allowClear = true,\r\n    className,\r\n    defaultValue = EMPTY,\r\n    disabled,\r\n    disabledDate,\r\n    format,\r\n    max,\r\n    min,\r\n    onChange,\r\n    placeholder,\r\n    shadow,\r\n    size,\r\n    style,\r\n    value,\r\n    variant,\r\n  }) => {\r\n    const { t } = useTranslation(datePickerMessages);\r\n    const [current, setCurrent] = useControlledState<DateRangeValue>(defaultValue, {\r\n      defaultValue,\r\n      onChange,\r\n      value,\r\n    });\r\n    const [open, setOpen] = useState(false);\r\n    const [draft, setDraft] = useState<DateRangeValue>(EMPTY);\r\n    const [hovered, setHovered] = useState<Date | null>(null);\r\n    const [month, setMonth] = useState<Date>(() => current[0] ?? new Date());\r\n\r\n    const shown = open && draft[0] ? draft : current;\r\n    const nextMonth = dayjs(month).add(1, 'month').toDate();\r\n    const bounds = { disabledDate, max, min };\r\n\r\n    const half = (date: Date | null, fallback: string, active: boolean) => (\r\n      <span className={styles.rangeHalf} data-active={active ? '' : undefined}>\r\n        {date ? (\r\n          formatDate(date, format, DEFAULT_FORMAT.date)\r\n        ) : (\r\n          <span className={styles.placeholder}>{fallback}</span>\r\n        )}\r\n      </span>\r\n    );\r\n\r\n    const select = (date: Date) => {\r\n      if (!draft[0] || draft[1]) {\r\n        setDraft([date, null]);\r\n        return;\r\n      }\r\n      const ordered = orderRange(draft[0], date);\r\n      setDraft(EMPTY);\r\n      setCurrent(ordered);\r\n      setOpen(false);\r\n    };\r\n\r\n    return (\r\n      <PickerShell\r\n        className={className}\r\n        disabled={disabled}\r\n        open={open}\r\n        shadow={shadow}\r\n        showClear={allowClear && !!(current[0] || current[1])}\r\n        size={size}\r\n        style={style}\r\n        variant={variant}\r\n        icon={\r\n          <span className={styles.icon}>\r\n            <Icon icon={CalendarIcon} size={14} />\r\n          </span>\r\n        }\r\n        trigger={\r\n          <button className={styles.trigger} disabled={disabled} type=\"button\">\r\n            <span className={styles.rangeTrigger}>\r\n              {half(\r\n                shown[0],\r\n                placeholder?.[0] ?? t('datePicker.startPlaceholder'),\r\n                open && !draft[0],\r\n              )}\r\n              <span className={styles.icon}>\r\n                <Icon icon={ArrowRight} size={14} />\r\n              </span>\r\n              {half(\r\n                shown[1],\r\n                placeholder?.[1] ?? t('datePicker.endPlaceholder'),\r\n                open && !!draft[0],\r\n              )}\r\n            </span>\r\n          </button>\r\n        }\r\n        onClear={() => setCurrent(EMPTY)}\r\n        onOpenChange={(next) => {\r\n          if (next) {\r\n            setMonth(current[0] ?? clampToBounds(new Date(), { max, min }));\r\n            setDraft(EMPTY);\r\n          }\r\n          setOpen(next);\r\n        }}\r\n      >\r\n        <div className={styles.range}>\r\n          <CalendarPanel\r\n            bounds={bounds}\r\n            hovered={hovered}\r\n            mode=\"date\"\r\n            month={month}\r\n            range={draft[0] ? draft : current}\r\n            showNav={false}\r\n            onHover={setHovered}\r\n            onMonthChange={setMonth}\r\n            onSelect={select}\r\n          />\r\n          <CalendarPanel\r\n            bounds={bounds}\r\n            hovered={hovered}\r\n            mode=\"date\"\r\n            month={nextMonth}\r\n            range={draft[0] ? draft : current}\r\n            onHover={setHovered}\r\n            onMonthChange={(next) => setMonth(dayjs(next).subtract(1, 'month').toDate())}\r\n            onSelect={select}\r\n          />\r\n        </div>\r\n      </PickerShell>\r\n    );\r\n  },\r\n);\r\n\r\nDateRangePicker.displayName = 'DateRangePicker';\r\n\r\nexport default DateRangePicker;\r\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,QAAwB,CAAC,MAAM,IAAI;AAEzC,MAAM,kBAAkB,MACrB,EACC,aAAa,MACb,WACA,eAAe,OACf,UACA,cACA,QACA,KACA,KACA,UACA,aACA,QACA,MACA,OACA,OACA,cACI;CACJ,MAAM,EAAE,MAAM,eAAeA,kBAAkB;CAC/C,MAAM,CAAC,SAAS,cAAcC,cAAmC,cAAc;EAC7E;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,SAAyB,KAAK;CACxD,MAAM,CAAC,SAAS,cAAc,SAAsB,IAAI;CACxD,MAAM,CAAC,OAAO,YAAY,eAAqB,QAAQ,sBAAM,IAAI,KAAK,CAAC;CAEvE,MAAM,QAAQ,QAAQ,MAAM,KAAK,QAAQ;CACzC,MAAM,YAAY,MAAM,KAAK,CAAC,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC,OAAO;CACtD,MAAM,SAAS;EAAE;EAAc;EAAK;CAAI;CAExC,MAAM,QAAQ,MAAmB,UAAkB,WACjD,oBAAC,QAAD;EAAM,WAAW,OAAO;EAAW,eAAa,SAAS,KAAK,KAAA;EAC3D,UAAA,OACC,WAAW,MAAM,QAAQ,eAAe,IAAI,IAE5C,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAc,UAAA;EAAe,CAAA;CAEnD,CAAA;CAGR,MAAM,UAAU,SAAe;EAC7B,IAAI,CAAC,MAAM,MAAM,MAAM,IAAI;GACzB,SAAS,CAAC,MAAM,IAAI,CAAC;GACrB;EACF;EACA,MAAM,UAAU,WAAW,MAAM,IAAI,IAAI;EACzC,SAAS,KAAK;EACd,WAAW,OAAO;EAClB,QAAQ,KAAK;CACf;CAEA,OACE,oBAAC,aAAD;EACa;EACD;EACJ;EACE;EACR,WAAW,cAAc,CAAC,EAAE,QAAQ,MAAM,QAAQ;EAC5C;EACC;EACE;EACT,MACE,oBAAC,QAAD;GAAM,WAAW,OAAO;GACtB,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAc,MAAM;GAAK,CAAA;EACjC,CAAA;EAER,SACE,oBAAC,UAAD;GAAQ,WAAW,OAAO;GAAmB;GAAU,MAAK;GAC1D,UAAA,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA;KACG,KACC,MAAM,IACN,cAAc,MAAM,EAAE,6BAA6B,GACnD,QAAQ,CAAC,MAAM,EACjB;KACA,oBAAC,QAAD;MAAM,WAAW,OAAO;MACtB,UAAA,oBAAC,MAAD;OAAM,MAAM;OAAY,MAAM;MAAK,CAAA;KAC/B,CAAA;KACL,KACC,MAAM,IACN,cAAc,MAAM,EAAE,2BAA2B,GACjD,QAAQ,CAAC,CAAC,MAAM,EAClB;IACI;;EACA,CAAA;EAEV,eAAe,WAAW,KAAK;EAC/B,eAAe,SAAS;GACtB,IAAI,MAAM;IACR,SAAS,QAAQ,MAAM,8BAAc,IAAI,KAAK,GAAG;KAAE;KAAK;IAAI,CAAC,CAAC;IAC9D,SAAS,KAAK;GAChB;GACA,QAAQ,IAAI;EACd;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,eAAD;IACU;IACC;IACT,MAAK;IACE;IACP,OAAO,MAAM,KAAK,QAAQ;IAC1B,SAAS;IACT,SAAS;IACT,eAAe;IACf,UAAU;GACX,CAAA,GACD,oBAAC,eAAD;IACU;IACC;IACT,MAAK;IACL,OAAO;IACP,OAAO,MAAM,KAAK,QAAQ;IAC1B,SAAS;IACT,gBAAgB,SAAS,SAAS,MAAM,IAAI,CAAC,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC;IAC3E,UAAU;GACX,CAAA,CACE;;CACM,CAAA;AAEjB,CACF;AAEA,gBAAgB,cAAc"}