@nuvui/date-picker 0.0.0-stage → 0.1.0

package/dist/utils/dates.cjs

@@ -0,0 +1,59 @@
+let _date_fns_tz = require("@date-fns/tz");
+let react_day_picker = require("react-day-picker");
+let date_fns = require("date-fns");
+let date_fns_locale_en_US = require("date-fns/locale/en-US");
+//#region src/utils/dates.ts
+function inZone(date, timeZone) {
+	if (!timeZone) return date;
+	if (date instanceof _date_fns_tz.TZDate && date.timeZone === timeZone) return date;
+	return new _date_fns_tz.TZDate(date, timeZone);
+}
+/**
+* A date as `yyyy-MM-dd`, which is what a form submits. `toISOString` would
+* be wrong here: it gives the day in UTC, which is the day before or after
+* for anyone far enough from Greenwich.
+*/
+function isoDate(date, timeZone) {
+	return date ? (0, date_fns.format)(inZone(date, timeZone), "yyyy-MM-dd") : "";
+}
+/** The pattern a locale writes a short date in, such as `MM/dd/yyyy`. */
+function shortPattern(locale) {
+	return (locale ?? date_fns_locale_en_US.enUS).formatLong.date({ width: "short" });
+}
+function formatDate(date, pattern, locale, timeZone) {
+	return (0, date_fns.format)(inZone(date, timeZone), pattern, { locale });
+}
+/**
+* Reads a date someone typed. Gives `undefined` for text that isn't a date
+* in the pattern, a day that doesn't exist included.
+*/
+function parseDate(text, pattern, locale, timeZone) {
+	const typed = text.trim();
+	if (!typed) return void 0;
+	const midnight = (0, date_fns.startOfDay)(timeZone ? _date_fns_tz.TZDate.tz(timeZone) : /* @__PURE__ */ new Date());
+	const date = (0, date_fns.parse)(typed, pattern, midnight, { locale });
+	if (!(0, date_fns.isValid)(date)) return void 0;
+	if (date.getFullYear() < 100 && !/\d{3}/.test(typed)) {
+		const short = (pattern === "P" ? shortPattern(locale) : pattern).replace(/y+/, "yy");
+		const again = (0, date_fns.parse)(typed, short, midnight, { locale });
+		return (0, date_fns.isValid)(again) ? again : void 0;
+	}
+	return date;
+}
+function disabledDays(min, max, disabledDates, timeZone) {
+	return [
+		...min ? [{ before: inZone(min, timeZone) }] : [],
+		...max ? [{ after: inZone(max, timeZone) }] : [],
+		...Array.isArray(disabledDates) ? disabledDates : disabledDates === void 0 ? [] : [disabledDates]
+	];
+}
+function isDisabled(date, matchers) {
+	return matchers.length > 0 && (0, react_day_picker.dateMatchModifiers)(date, matchers);
+}
+//#endregion
+exports.disabledDays = disabledDays;
+exports.formatDate = formatDate;
+exports.isDisabled = isDisabled;
+exports.isoDate = isoDate;
+exports.parseDate = parseDate;
+exports.shortPattern = shortPattern;

package/dist/utils/dates.js

@@ -0,0 +1,54 @@
+import { TZDate } from "@date-fns/tz";
+import { dateMatchModifiers } from "react-day-picker";
+import { format, isValid, parse, startOfDay } from "date-fns";
+import { enUS } from "date-fns/locale/en-US";
+//#region src/utils/dates.ts
+function inZone(date, timeZone) {
+	if (!timeZone) return date;
+	if (date instanceof TZDate && date.timeZone === timeZone) return date;
+	return new TZDate(date, timeZone);
+}
+/**
+* A date as `yyyy-MM-dd`, which is what a form submits. `toISOString` would
+* be wrong here: it gives the day in UTC, which is the day before or after
+* for anyone far enough from Greenwich.
+*/
+function isoDate(date, timeZone) {
+	return date ? format(inZone(date, timeZone), "yyyy-MM-dd") : "";
+}
+/** The pattern a locale writes a short date in, such as `MM/dd/yyyy`. */
+function shortPattern(locale) {
+	return (locale ?? enUS).formatLong.date({ width: "short" });
+}
+function formatDate(date, pattern, locale, timeZone) {
+	return format(inZone(date, timeZone), pattern, { locale });
+}
+/**
+* Reads a date someone typed. Gives `undefined` for text that isn't a date
+* in the pattern, a day that doesn't exist included.
+*/
+function parseDate(text, pattern, locale, timeZone) {
+	const typed = text.trim();
+	if (!typed) return void 0;
+	const midnight = startOfDay(timeZone ? TZDate.tz(timeZone) : /* @__PURE__ */ new Date());
+	const date = parse(typed, pattern, midnight, { locale });
+	if (!isValid(date)) return void 0;
+	if (date.getFullYear() < 100 && !/\d{3}/.test(typed)) {
+		const short = (pattern === "P" ? shortPattern(locale) : pattern).replace(/y+/, "yy");
+		const again = parse(typed, short, midnight, { locale });
+		return isValid(again) ? again : void 0;
+	}
+	return date;
+}
+function disabledDays(min, max, disabledDates, timeZone) {
+	return [
+		...min ? [{ before: inZone(min, timeZone) }] : [],
+		...max ? [{ after: inZone(max, timeZone) }] : [],
+		...Array.isArray(disabledDates) ? disabledDates : disabledDates === void 0 ? [] : [disabledDates]
+	];
+}
+function isDisabled(date, matchers) {
+	return matchers.length > 0 && dateMatchModifiers(date, matchers);
+}
+//#endregion
+export { disabledDays, formatDate, isDisabled, isoDate, parseDate, shortPattern };

package/dist/utils/use-controlled.cjs

@@ -0,0 +1,31 @@
+let react = require("react");
+//#region src/utils/use-controlled.ts
+/**
+* State that the parent may hold. With `value` passed, that's the state and
+* `onChange` is only told what was asked for. Without it, the state is kept
+* here, starting from `defaultValue`.
+*
+* `value` being `undefined` can't be what says the parent holds the state,
+* because for a date `undefined` is a value: no date picked. So the caller
+* says it outright with `controlled`.
+*/
+function useControlled(controlled, value, defaultValue, onChange) {
+	const [inner, setInner] = (0, react.useState)(defaultValue);
+	const current = controlled ? value : inner;
+	const latest = (0, react.useRef)({
+		current,
+		controlled,
+		onChange
+	});
+	latest.current = {
+		current,
+		controlled,
+		onChange
+	};
+	return [current, (0, react.useCallback)((next) => {
+		if (!latest.current.controlled) setInner(next);
+		latest.current.onChange?.(next);
+	}, [])];
+}
+//#endregion
+exports.useControlled = useControlled;

package/dist/utils/use-controlled.js

@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from "react";
+//#region src/utils/use-controlled.ts
+/**
+* State that the parent may hold. With `value` passed, that's the state and
+* `onChange` is only told what was asked for. Without it, the state is kept
+* here, starting from `defaultValue`.
+*
+* `value` being `undefined` can't be what says the parent holds the state,
+* because for a date `undefined` is a value: no date picked. So the caller
+* says it outright with `controlled`.
+*/
+function useControlled(controlled, value, defaultValue, onChange) {
+	const [inner, setInner] = useState(defaultValue);
+	const current = controlled ? value : inner;
+	const latest = useRef({
+		current,
+		controlled,
+		onChange
+	});
+	latest.current = {
+		current,
+		controlled,
+		onChange
+	};
+	return [current, useCallback((next) => {
+		if (!latest.current.controlled) setInner(next);
+		latest.current.onChange?.(next);
+	}, [])];
+}
+//#endregion
+export { useControlled };

package/dist/utils/use-date-text.cjs

@@ -0,0 +1,83 @@
+const require_dates = require("./dates.cjs");
+let react = require("react");
+let react_dom = require("react-dom");
+//#region src/utils/use-date-text.ts
+/**
+* The text of a field a date can be typed into.
+*
+* While someone types, the text is theirs: a half-written date is left
+* alone. It becomes the field's date the moment it reads as one in full,
+* and again when they leave the field or press Enter, where a looser form
+* such as "1/5/26" is taken too and rewritten in the pattern. Text that
+* isn't a date by then stays as typed, the date is cleared, and the input
+* is marked invalid, with the browser's own validation told why.
+*/
+function useDateText({ value, onCommit, problem, invalidMessage, pattern, locale, timeZone, input }) {
+	const [draft, setDraft] = (0, react.useState)(null);
+	const [error, setErrorState] = (0, react.useState)(void 0);
+	function setError(message) {
+		setErrorState(message);
+		input.current?.setCustomValidity(message ?? "");
+	}
+	const formatted = value ? require_dates.formatDate(value, pattern, locale, timeZone) : "";
+	const text = draft ?? formatted;
+	const day = require_dates.isoDate(value ?? void 0, timeZone);
+	const typedDay = (0, react.useRef)(day);
+	(0, react.useEffect)(() => {
+		if (day && day !== typedDay.current) {
+			setDraft(null);
+			setErrorState(void 0);
+			input.current?.setCustomValidity("");
+		}
+		typedDay.current = day;
+	}, [day, input]);
+	function read(typed) {
+		if (!typed.trim()) return { date: null };
+		const date = require_dates.parseDate(typed, pattern, locale, timeZone);
+		if (!date) return {
+			date: null,
+			error: invalidMessage
+		};
+		const reason = problem(date);
+		return reason ? {
+			date: null,
+			error: reason
+		} : { date };
+	}
+	function commit(date) {
+		typedDay.current = require_dates.isoDate(date ?? void 0, timeZone);
+		if (typedDay.current !== day) onCommit(date);
+	}
+	function onChange(event) {
+		const typed = event.target.value;
+		setDraft(typed);
+		setError(void 0);
+		const result = read(typed);
+		if (!typed.trim()) commit(null);
+		else if (result.date && require_dates.formatDate(result.date, pattern, locale, timeZone) === typed) commit(result.date);
+	}
+	function settle() {
+		if (draft === null) return;
+		const result = read(draft);
+		setError(result.error);
+		setDraft(result.error ? draft : null);
+		commit(result.date);
+	}
+	function onKeyDown(event) {
+		if (event.key === "Enter") (0, react_dom.flushSync)(settle);
+	}
+	function clearDraft() {
+		setDraft(null);
+		setError(void 0);
+	}
+	return {
+		text,
+		error,
+		onChange,
+		onBlur: settle,
+		onKeyDown,
+		clearDraft
+	};
+}
+//#endregion
+exports.useDateText = useDateText;

package/dist/utils/use-date-text.js

@@ -0,0 +1,83 @@
+import { formatDate, isoDate, parseDate } from "./dates.js";
+import { useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+//#region src/utils/use-date-text.ts
+/**
+* The text of a field a date can be typed into.
+*
+* While someone types, the text is theirs: a half-written date is left
+* alone. It becomes the field's date the moment it reads as one in full,
+* and again when they leave the field or press Enter, where a looser form
+* such as "1/5/26" is taken too and rewritten in the pattern. Text that
+* isn't a date by then stays as typed, the date is cleared, and the input
+* is marked invalid, with the browser's own validation told why.
+*/
+function useDateText({ value, onCommit, problem, invalidMessage, pattern, locale, timeZone, input }) {
+	const [draft, setDraft] = useState(null);
+	const [error, setErrorState] = useState(void 0);
+	function setError(message) {
+		setErrorState(message);
+		input.current?.setCustomValidity(message ?? "");
+	}
+	const formatted = value ? formatDate(value, pattern, locale, timeZone) : "";
+	const text = draft ?? formatted;
+	const day = isoDate(value ?? void 0, timeZone);
+	const typedDay = useRef(day);
+	useEffect(() => {
+		if (day && day !== typedDay.current) {
+			setDraft(null);
+			setErrorState(void 0);
+			input.current?.setCustomValidity("");
+		}
+		typedDay.current = day;
+	}, [day, input]);
+	function read(typed) {
+		if (!typed.trim()) return { date: null };
+		const date = parseDate(typed, pattern, locale, timeZone);
+		if (!date) return {
+			date: null,
+			error: invalidMessage
+		};
+		const reason = problem(date);
+		return reason ? {
+			date: null,
+			error: reason
+		} : { date };
+	}
+	function commit(date) {
+		typedDay.current = isoDate(date ?? void 0, timeZone);
+		if (typedDay.current !== day) onCommit(date);
+	}
+	function onChange(event) {
+		const typed = event.target.value;
+		setDraft(typed);
+		setError(void 0);
+		const result = read(typed);
+		if (!typed.trim()) commit(null);
+		else if (result.date && formatDate(result.date, pattern, locale, timeZone) === typed) commit(result.date);
+	}
+	function settle() {
+		if (draft === null) return;
+		const result = read(draft);
+		setError(result.error);
+		setDraft(result.error ? draft : null);
+		commit(result.date);
+	}
+	function onKeyDown(event) {
+		if (event.key === "Enter") flushSync(settle);
+	}
+	function clearDraft() {
+		setDraft(null);
+		setError(void 0);
+	}
+	return {
+		text,
+		error,
+		onChange,
+		onBlur: settle,
+		onKeyDown,
+		clearDraft
+	};
+}
+//#endregion
+export { useDateText };

package/dist/utils/use-is-phone.cjs

@@ -0,0 +1,18 @@
+let react = require("react");
+//#region src/utils/use-is-phone.ts
+const wide = "(min-width: 40rem)";
+function subscribe(onChange) {
+	const query = window.matchMedia(wide);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+/**
+* Whether the screen is narrow enough that the calendar should open as a
+* sheet. On the server it's `false`: nothing is open there, and the answer
+* is only needed once something is.
+*/
+function useIsPhone() {
+	return (0, react.useSyncExternalStore)(subscribe, () => !window.matchMedia(wide).matches, () => false);
+}
+//#endregion
+exports.useIsPhone = useIsPhone;

package/dist/utils/use-is-phone.js

@@ -0,0 +1,18 @@
+import { useSyncExternalStore } from "react";
+//#region src/utils/use-is-phone.ts
+const wide = "(min-width: 40rem)";
+function subscribe(onChange) {
+	const query = window.matchMedia(wide);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+/**
+* Whether the screen is narrow enough that the calendar should open as a
+* sheet. On the server it's `false`: nothing is open there, and the answer
+* is only needed once something is.
+*/
+function useIsPhone() {
+	return useSyncExternalStore(subscribe, () => !window.matchMedia(wide).matches, () => false);
+}
+//#endregion
+export { useIsPhone };

package/package.json

@@ -1,6 +1,121 @@
 {
   "name": "@nuvui/date-picker",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "A calendar, a date field and a date range field for @nuvui/react, built on react-day-picker.",
+  "license": "MIT",
+  "author": "Nuvraxis",
+  "homepage": "https://nuvui.nuvraxis.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nuvraxis/nuvui.git",
+    "directory": "packages/date-picker"
+  },
+  "bugs": {
+    "url": "https://github.com/Nuvraxis/nuvui/issues"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./calendar": {
+      "import": {
+        "types": "./dist/components/calendar/index.d.ts",
+        "default": "./dist/components/calendar/index.js"
+      },
+      "require": {
+        "types": "./dist/components/calendar/index.d.cts",
+        "default": "./dist/components/calendar/index.cjs"
+      }
+    },
+    "./date-picker": {
+      "import": {
+        "types": "./dist/components/date-picker/index.d.ts",
+        "default": "./dist/components/date-picker/index.js"
+      },
+      "require": {
+        "types": "./dist/components/date-picker/index.d.cts",
+        "default": "./dist/components/date-picker/index.cjs"
+      }
+    },
+    "./locale": {
+      "import": {
+        "types": "./dist/locale.d.ts",
+        "default": "./dist/locale.js"
+      },
+      "require": {
+        "types": "./dist/locale.d.cts",
+        "default": "./dist/locale.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./css/*.css": "./dist/css/*.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@nuvui/react": "^0.1.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@date-fns/tz": "^1.5.0",
+    "date-fns": "^4.4.0",
+    "react-day-picker": "^10.0.2"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@nuvui/react": "0.1.0",
+    "@nuvui/tooling": "0.0.0",
+    "@nuvui/typescript-config": "0.0.0",
+    "@size-limit/preset-small-lib": "14.1.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/browser-playwright": "^5.0.3",
+    "axe-core": "^4.13.0",
+    "playwright": "1.63.0",
+    "publint": "^0.3.25",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sass-embedded": "^1.105.1",
+    "size-limit": "14.1.0",
+    "stylelint": "^17.16.0",
+    "tsdown": "0.23.0",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.3",
+    "vitest-browser-react": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/check-dist.mjs",
+    "dev": "tsdown --watch src",
+    "lint": "stylelint \"src/**/*.scss\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check:package": "publint && pnpm pack --out node_modules/.cache/attw/package.tgz && attw node_modules/.cache/attw/package.tgz",
+    "size": "size-limit"
+  }
 }