@rufous/ui 0.3.11 → 0.3.12

package/dist/main.cjs

@@ -3189,6 +3189,24 @@ var SpinnerPanel = ({
   },
   "PM"
 )));
+var formatViewsDisplay = (d, views) => {
+  if (!views.includes("day") && !views.includes("month")) return String(d.getFullYear());
+  if (!views.includes("day")) return `${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+  return "";
+};
+var parseYearDisplay = (str) => {
+  const y = parseInt(str.trim(), 10);
+  if (isNaN(y) || y < 1e3 || y > 9999) return null;
+  return new Date(y, 0, 1);
+};
+var parseMonthYearDisplay = (str) => {
+  const parts = str.trim().split(/\s+/);
+  if (parts.length < 2) return null;
+  const mm = parseMonthName(parts[0]);
+  const yyyy = parseInt(parts[parts.length - 1], 10);
+  if (mm < 0 || isNaN(yyyy) || yyyy < 1e3) return null;
+  return new Date(yyyy, mm, 1);
+};
 var CalendarBody = ({
   viewMonth,
   viewYear,
@@ -3201,18 +3219,48 @@ var CalendarBody = ({
   onMonthSelect,
   onYearSelect,
   minDate,
-  maxDate
+  maxDate,
+  views,
+  onFinalMonthSelect,
+  onFinalYearSelect
 }) => {
-  const [pickerView, setPickerView] = (0, import_react21.useState)("calendar");
-  const handleMonthClick = () => setPickerView(pickerView === "month" ? "calendar" : "month");
-  const handleYearClick = () => setPickerView(pickerView === "year" ? "calendar" : "year");
+  const hasDayView = views.includes("day");
+  const hasMonthView = views.includes("month");
+  const hasYearView = views.includes("year");
+  const [pickerView, setPickerView] = (0, import_react21.useState)(() => {
+    if (!hasDayView && !hasMonthView) return "year";
+    if (!hasDayView) return "month";
+    return "calendar";
+  });
+  const handleMonthClick = () => {
+    if (!hasMonthView || !hasDayView) return;
+    setPickerView((v) => v === "month" ? "calendar" : "month");
+  };
+  const handleYearClick = () => {
+    if (!hasYearView) return;
+    if (pickerView === "year") {
+      setPickerView(hasDayView ? "calendar" : "month");
+    } else {
+      setPickerView("year");
+    }
+  };
   const handleMonthPick = (month) => {
     onMonthSelect(month);
-    setPickerView("calendar");
+    if (hasDayView) {
+      setPickerView("calendar");
+    } else {
+      onFinalMonthSelect?.(month, viewYear);
+    }
   };
   const handleYearPick = (year) => {
     onYearSelect(year);
-    setPickerView("calendar");
+    if (!hasDayView && !hasMonthView) {
+      onFinalYearSelect?.(year);
+    } else if (hasMonthView) {
+      setPickerView("month");
+    } else {
+      setPickerView("calendar");
+    }
   };
   const currentYear = todayDate.getFullYear();
   const yearStart = viewYear - 6;
@@ -3236,18 +3284,35 @@ var CalendarBody = ({
   return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react21.default.createElement(
     "span",
     {
-      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      className: [
+        "rf-date-picker__month-label",
+        pickerView === "month" ? "rf-date-picker__month-label--active" : "",
+        !hasMonthView || !hasDayView ? "rf-date-picker__label--static" : ""
+      ].filter(Boolean).join(" "),
       onClick: handleMonthClick
     },
     MONTHS[viewMonth]
   ), /* @__PURE__ */ import_react21.default.createElement(
     "span",
     {
-      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      className: [
+        "rf-date-picker__year-label",
+        pickerView === "year" ? "rf-date-picker__year-label--active" : "",
+        !hasYearView ? "rf-date-picker__label--static" : ""
+      ].filter(Boolean).join(" "),
       onClick: handleYearClick
     },
     viewYear
-  )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, disabled: isPrevDisabled, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, disabled: isNextDisabled, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => {
+  )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? (
+    // Year page navigation
+    /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A"))
+  ) : pickerView === "month" && !hasDayView ? (
+    // Month-only or month+year mode: ‹ › change year
+    /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 1), "aria-label": "Previous year" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 1), "aria-label": "Next year" }, "\u203A"))
+  ) : (
+    // Normal month navigation
+    /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, disabled: isPrevDisabled, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, disabled: isNextDisabled, "aria-label": "Next month" }, "\u203A"))
+  ))), pickerView === "month" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => {
     const monthDisabled = isMonthDisabled(idx);
     return /* @__PURE__ */ import_react21.default.createElement(
       "button",
@@ -3283,7 +3348,7 @@ var CalendarBody = ({
       },
       y
     );
-  })), pickerView === "calendar" && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+  })), pickerView === "calendar" && hasDayView && /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react21.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
     if (day === null) return /* @__PURE__ */ import_react21.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
     const cellDate = new Date(viewYear, viewMonth, day);
     const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
@@ -3326,8 +3391,12 @@ var DateField = ({
   placeholder,
   className = "",
   style,
-  sx
+  sx,
+  views: viewsProp
 }) => {
+  const views = viewsProp ?? ["day", "month", "year"];
+  const hasDayView = views.includes("day");
+  const hasMonthView = views.includes("month");
   const minDate = normaliseBoundary(minDateProp);
   const maxDate = normaliseBoundary(maxDateProp);
   const sxClass = useSx(sx);
@@ -3357,6 +3426,8 @@ var DateField = ({
     if (!value) return "";
     const d = isoToDate(value);
     if (!d) return "";
+    const viewsStr = formatViewsDisplay(d, views);
+    if (viewsStr) return viewsStr;
     let str = formatDisplay(d, dateFormat);
     if (isDatetimeType(type)) {
       const t = parseTimeFromISO(value);
@@ -3387,15 +3458,20 @@ var DateField = ({
     if (d) {
       setViewYear(d.getFullYear());
       setViewMonth(d.getMonth());
-      let str = formatDisplay(d, dateFormat);
-      if (isDatetimeType(type)) {
-        const t = parseTimeFromISO(value);
-        setHour(t.h);
-        setMinute(t.m);
-        setAmpm(t.ampm);
-        str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+      const viewsStr = formatViewsDisplay(d, views);
+      if (viewsStr) {
+        setInputStr(viewsStr);
+      } else {
+        let str = formatDisplay(d, dateFormat);
+        if (isDatetimeType(type)) {
+          const t = parseTimeFromISO(value);
+          setHour(t.h);
+          setMinute(t.m);
+          setAmpm(t.ampm);
+          str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+        }
+        setInputStr(str);
       }
-      setInputStr(str);
     }
   }, [value, type]);
   (0, import_react21.useEffect)(() => {
@@ -3416,11 +3492,17 @@ var DateField = ({
       onChange?.("");
       return;
     }
-    let str = formatDisplay(d, dateFormat);
-    if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
+    const viewsStr = formatViewsDisplay(d, views);
+    let str;
+    if (viewsStr) {
+      str = viewsStr;
+    } else {
+      str = formatDisplay(d, dateFormat);
+      if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
+    }
     setInputStr(str);
     onChange?.(buildISO(d, type, h, m, ap));
-  }, [type, onChange, dateFormat]);
+  }, [type, onChange, dateFormat, views]);
   const isOutOfRange = (d) => (minDate ? isBeforeDay(d, minDate) : false) || (maxDate ? isAfterDay(d, maxDate) : false);
   const handleDayClick = (day) => {
     const d = new Date(viewYear, viewMonth, day);
@@ -3434,49 +3516,102 @@ var DateField = ({
   };
   const handleToday = () => {
     const t = today();
-    if (isOutOfRange(t)) return;
-    setViewYear(t.getFullYear());
-    setViewMonth(t.getMonth());
-    commitDate(t, hour, minute, ampm);
-    if (type === "date") setOpen(false);
+    if (!hasDayView && !hasMonthView) {
+      const d = new Date(t.getFullYear(), 0, 1);
+      if (isOutOfRange(d)) return;
+      setViewYear(t.getFullYear());
+      commitDate(d, hour, minute, ampm);
+      setOpen(false);
+    } else if (!hasDayView) {
+      const d = new Date(t.getFullYear(), t.getMonth(), 1);
+      if (isOutOfRange(d)) return;
+      setViewYear(t.getFullYear());
+      setViewMonth(t.getMonth());
+      commitDate(d, hour, minute, ampm);
+      setOpen(false);
+    } else {
+      if (isOutOfRange(t)) return;
+      setViewYear(t.getFullYear());
+      setViewMonth(t.getMonth());
+      commitDate(t, hour, minute, ampm);
+      if (type === "date") setOpen(false);
+    }
   };
+  const handleFinalMonthSelect = (0, import_react21.useCallback)((month, year) => {
+    const d = new Date(year, month, 1);
+    if (isOutOfRange(d)) return;
+    setSelectedDate(d);
+    setViewYear(year);
+    setViewMonth(month);
+    setInputStr(`${MONTHS_SHORT[month]} ${year}`);
+    onChange?.(buildISO(d, type, hour, minute, ampm));
+    setOpen(false);
+  }, [isOutOfRange, onChange, type, hour, minute, ampm]);
+  const handleFinalYearSelect = (0, import_react21.useCallback)((year) => {
+    const d = new Date(year, 0, 1);
+    if (isOutOfRange(d)) return;
+    setSelectedDate(d);
+    setViewYear(year);
+    setInputStr(String(year));
+    onChange?.(buildISO(d, type, hour, minute, ampm));
+    setOpen(false);
+  }, [isOutOfRange, onChange, type, hour, minute, ampm]);
   const handleClear = () => commitDate(null, hour, minute, ampm);
   const handleInputChange = (e) => {
     const raw = e.target.value;
     setInputStr(raw);
-    const dateWordCount = getDateWordCount(dateFormat);
-    const words = raw.split(" ");
-    const datePart = words.slice(0, dateWordCount).join(" ");
-    const timeParts = words.slice(dateWordCount);
-    const parsed = parseDisplay(datePart, dateFormat);
-    if (parsed && !isOutOfRange(parsed)) {
-      setSelectedDate(parsed);
-      setViewYear(parsed.getFullYear());
-      setViewMonth(parsed.getMonth());
-      let h = hour, m = minute, ap = ampm;
-      if (isDatetimeType(type) && timeParts.length >= 2) {
-        const timePart = timeParts[0];
-        const periodPart = timeParts[1]?.toUpperCase();
-        if (timePart?.includes(":")) {
-          const [hStr, mStr] = timePart.split(":");
-          const parsedH = parseInt(hStr, 10);
-          const parsedM = parseInt(mStr, 10);
-          if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
-            h = parsedH;
-            setHour(h);
+    let parsed = null;
+    if (!hasDayView && !hasMonthView) {
+      parsed = parseYearDisplay(raw);
+    } else if (!hasDayView) {
+      parsed = parseMonthYearDisplay(raw);
+    } else {
+      const dateWordCount = getDateWordCount(dateFormat);
+      const words = raw.split(" ");
+      const datePart = words.slice(0, dateWordCount).join(" ");
+      const timeParts = words.slice(dateWordCount);
+      parsed = parseDisplay(datePart, dateFormat);
+      if (parsed && !isOutOfRange(parsed)) {
+        setSelectedDate(parsed);
+        setViewYear(parsed.getFullYear());
+        setViewMonth(parsed.getMonth());
+        let h = hour, m = minute, ap = ampm;
+        if (isDatetimeType(type) && timeParts.length >= 2) {
+          const timePart = timeParts[0];
+          const periodPart = timeParts[1]?.toUpperCase();
+          if (timePart?.includes(":")) {
+            const [hStr, mStr] = timePart.split(":");
+            const parsedH = parseInt(hStr, 10);
+            const parsedM = parseInt(mStr, 10);
+            if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
+              h = parsedH;
+              setHour(h);
+            }
+            if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
+              m = parsedM;
+              setMinute(m);
+            }
           }
-          if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
-            m = parsedM;
-            setMinute(m);
+          if (periodPart === "AM" || periodPart === "PM") {
+            ap = periodPart;
+            setAmpm(ap);
           }
         }
-        if (periodPart === "AM" || periodPart === "PM") {
-          ap = periodPart;
-          setAmpm(ap);
-        }
+        isInternalChange.current = true;
+        onChange?.(buildISO(parsed, type, h, m, ap));
+      } else if (!raw) {
+        setSelectedDate(null);
+        isInternalChange.current = true;
+        onChange?.("");
       }
+      return;
+    }
+    if (parsed && !isOutOfRange(parsed)) {
+      setSelectedDate(parsed);
+      setViewYear(parsed.getFullYear());
+      setViewMonth(parsed.getMonth());
       isInternalChange.current = true;
-      onChange?.(buildISO(parsed, type, h, m, ap));
+      onChange?.(buildISO(parsed, type, hour, minute, ampm));
     } else if (!raw) {
       setSelectedDate(null);
       isInternalChange.current = true;
@@ -3662,7 +3797,10 @@ var DateField = ({
           onMonthSelect: setViewMonth,
           onYearSelect: setViewYear,
           minDate,
-          maxDate
+          maxDate,
+          views,
+          onFinalMonthSelect: handleFinalMonthSelect,
+          onFinalYearSelect: handleFinalYearSelect
         }
       ), type === "datetime" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement(
         SpinnerPanel,

package/dist/main.css

@@ -1344,6 +1344,13 @@ pre {
   background-color: rgba(164, 27, 6, 0.1);
   color: #a41b06;
 }
+.rf-date-picker__label--static {
+  cursor: default !important;
+  pointer-events: none;
+}
+.rf-date-picker__label--static:hover {
+  background-color: transparent !important;
+}
 .rf-date-picker__nav {
   display: flex;
   align-items: center;

package/dist/main.d.cts

@@ -658,6 +658,20 @@ interface DateFieldProps {
     placeholder?: string;
     className?: string;
     style?: CSSProperties;
+    /**
+     * Which selection panels are available in the picker.
+     * - `"day"` — day calendar (default)
+     * - `"month"` — month grid
+     * - `"year"` — year grid
+     *
+     * Common patterns:
+     * - `["month", "year"]` — month+year picker, no day calendar
+     * - `["year"]` — year-only picker
+     * - `["month"]` — month picker (‹ › navigate years)
+     *
+     * Defaults to `["day", "month", "year"]` (full picker).
+     */
+    views?: ("day" | "month" | "year")[];
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
 }

package/dist/main.d.ts

@@ -658,6 +658,20 @@ interface DateFieldProps {
     placeholder?: string;
     className?: string;
     style?: CSSProperties;
+    /**
+     * Which selection panels are available in the picker.
+     * - `"day"` — day calendar (default)
+     * - `"month"` — month grid
+     * - `"year"` — year grid
+     *
+     * Common patterns:
+     * - `["month", "year"]` — month+year picker, no day calendar
+     * - `["year"]` — year-only picker
+     * - `["month"]` — month picker (‹ › navigate years)
+     *
+     * Defaults to `["day", "month", "year"]` (full picker).
+     */
+    views?: ("day" | "month" | "year")[];
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
 }

package/dist/main.js

@@ -3040,6 +3040,24 @@ var SpinnerPanel = ({
   },
   "PM"
 )));
+var formatViewsDisplay = (d, views) => {
+  if (!views.includes("day") && !views.includes("month")) return String(d.getFullYear());
+  if (!views.includes("day")) return `${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+  return "";
+};
+var parseYearDisplay = (str) => {
+  const y = parseInt(str.trim(), 10);
+  if (isNaN(y) || y < 1e3 || y > 9999) return null;
+  return new Date(y, 0, 1);
+};
+var parseMonthYearDisplay = (str) => {
+  const parts = str.trim().split(/\s+/);
+  if (parts.length < 2) return null;
+  const mm = parseMonthName(parts[0]);
+  const yyyy = parseInt(parts[parts.length - 1], 10);
+  if (mm < 0 || isNaN(yyyy) || yyyy < 1e3) return null;
+  return new Date(yyyy, mm, 1);
+};
 var CalendarBody = ({
   viewMonth,
   viewYear,
@@ -3052,18 +3070,48 @@ var CalendarBody = ({
   onMonthSelect,
   onYearSelect,
   minDate,
-  maxDate
+  maxDate,
+  views,
+  onFinalMonthSelect,
+  onFinalYearSelect
 }) => {
-  const [pickerView, setPickerView] = useState7("calendar");
-  const handleMonthClick = () => setPickerView(pickerView === "month" ? "calendar" : "month");
-  const handleYearClick = () => setPickerView(pickerView === "year" ? "calendar" : "year");
+  const hasDayView = views.includes("day");
+  const hasMonthView = views.includes("month");
+  const hasYearView = views.includes("year");
+  const [pickerView, setPickerView] = useState7(() => {
+    if (!hasDayView && !hasMonthView) return "year";
+    if (!hasDayView) return "month";
+    return "calendar";
+  });
+  const handleMonthClick = () => {
+    if (!hasMonthView || !hasDayView) return;
+    setPickerView((v) => v === "month" ? "calendar" : "month");
+  };
+  const handleYearClick = () => {
+    if (!hasYearView) return;
+    if (pickerView === "year") {
+      setPickerView(hasDayView ? "calendar" : "month");
+    } else {
+      setPickerView("year");
+    }
+  };
   const handleMonthPick = (month) => {
     onMonthSelect(month);
-    setPickerView("calendar");
+    if (hasDayView) {
+      setPickerView("calendar");
+    } else {
+      onFinalMonthSelect?.(month, viewYear);
+    }
   };
   const handleYearPick = (year) => {
     onYearSelect(year);
-    setPickerView("calendar");
+    if (!hasDayView && !hasMonthView) {
+      onFinalYearSelect?.(year);
+    } else if (hasMonthView) {
+      setPickerView("month");
+    } else {
+      setPickerView("calendar");
+    }
   };
   const currentYear = todayDate.getFullYear();
   const yearStart = viewYear - 6;
@@ -3087,18 +3135,35 @@ var CalendarBody = ({
   return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ React72.createElement(
     "span",
     {
-      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      className: [
+        "rf-date-picker__month-label",
+        pickerView === "month" ? "rf-date-picker__month-label--active" : "",
+        !hasMonthView || !hasDayView ? "rf-date-picker__label--static" : ""
+      ].filter(Boolean).join(" "),
       onClick: handleMonthClick
     },
     MONTHS[viewMonth]
   ), /* @__PURE__ */ React72.createElement(
     "span",
     {
-      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      className: [
+        "rf-date-picker__year-label",
+        pickerView === "year" ? "rf-date-picker__year-label--active" : "",
+        !hasYearView ? "rf-date-picker__label--static" : ""
+      ].filter(Boolean).join(" "),
       onClick: handleYearClick
     },
     viewYear
-  )), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, disabled: isPrevDisabled, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, disabled: isNextDisabled, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => {
+  )), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? (
+    // Year page navigation
+    /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A"))
+  ) : pickerView === "month" && !hasDayView ? (
+    // Month-only or month+year mode: ‹ › change year
+    /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 1), "aria-label": "Previous year" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 1), "aria-label": "Next year" }, "\u203A"))
+  ) : (
+    // Normal month navigation
+    /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, disabled: isPrevDisabled, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, disabled: isNextDisabled, "aria-label": "Next month" }, "\u203A"))
+  ))), pickerView === "month" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => {
     const monthDisabled = isMonthDisabled(idx);
     return /* @__PURE__ */ React72.createElement(
       "button",
@@ -3134,7 +3199,7 @@ var CalendarBody = ({
       },
       y
     );
-  })), pickerView === "calendar" && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React72.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+  })), pickerView === "calendar" && hasDayView && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React72.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
     if (day === null) return /* @__PURE__ */ React72.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
     const cellDate = new Date(viewYear, viewMonth, day);
     const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
@@ -3177,8 +3242,12 @@ var DateField = ({
   placeholder,
   className = "",
   style,
-  sx
+  sx,
+  views: viewsProp
 }) => {
+  const views = viewsProp ?? ["day", "month", "year"];
+  const hasDayView = views.includes("day");
+  const hasMonthView = views.includes("month");
   const minDate = normaliseBoundary(minDateProp);
   const maxDate = normaliseBoundary(maxDateProp);
   const sxClass = useSx(sx);
@@ -3208,6 +3277,8 @@ var DateField = ({
     if (!value) return "";
     const d = isoToDate(value);
     if (!d) return "";
+    const viewsStr = formatViewsDisplay(d, views);
+    if (viewsStr) return viewsStr;
     let str = formatDisplay(d, dateFormat);
     if (isDatetimeType(type)) {
       const t = parseTimeFromISO(value);
@@ -3238,15 +3309,20 @@ var DateField = ({
     if (d) {
       setViewYear(d.getFullYear());
       setViewMonth(d.getMonth());
-      let str = formatDisplay(d, dateFormat);
-      if (isDatetimeType(type)) {
-        const t = parseTimeFromISO(value);
-        setHour(t.h);
-        setMinute(t.m);
-        setAmpm(t.ampm);
-        str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+      const viewsStr = formatViewsDisplay(d, views);
+      if (viewsStr) {
+        setInputStr(viewsStr);
+      } else {
+        let str = formatDisplay(d, dateFormat);
+        if (isDatetimeType(type)) {
+          const t = parseTimeFromISO(value);
+          setHour(t.h);
+          setMinute(t.m);
+          setAmpm(t.ampm);
+          str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+        }
+        setInputStr(str);
       }
-      setInputStr(str);
     }
   }, [value, type]);
   useEffect7(() => {
@@ -3267,11 +3343,17 @@ var DateField = ({
       onChange?.("");
       return;
     }
-    let str = formatDisplay(d, dateFormat);
-    if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
+    const viewsStr = formatViewsDisplay(d, views);
+    let str;
+    if (viewsStr) {
+      str = viewsStr;
+    } else {
+      str = formatDisplay(d, dateFormat);
+      if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
+    }
     setInputStr(str);
     onChange?.(buildISO(d, type, h, m, ap));
-  }, [type, onChange, dateFormat]);
+  }, [type, onChange, dateFormat, views]);
   const isOutOfRange = (d) => (minDate ? isBeforeDay(d, minDate) : false) || (maxDate ? isAfterDay(d, maxDate) : false);
   const handleDayClick = (day) => {
     const d = new Date(viewYear, viewMonth, day);
@@ -3285,49 +3367,102 @@ var DateField = ({
   };
   const handleToday = () => {
     const t = today();
-    if (isOutOfRange(t)) return;
-    setViewYear(t.getFullYear());
-    setViewMonth(t.getMonth());
-    commitDate(t, hour, minute, ampm);
-    if (type === "date") setOpen(false);
+    if (!hasDayView && !hasMonthView) {
+      const d = new Date(t.getFullYear(), 0, 1);
+      if (isOutOfRange(d)) return;
+      setViewYear(t.getFullYear());
+      commitDate(d, hour, minute, ampm);
+      setOpen(false);
+    } else if (!hasDayView) {
+      const d = new Date(t.getFullYear(), t.getMonth(), 1);
+      if (isOutOfRange(d)) return;
+      setViewYear(t.getFullYear());
+      setViewMonth(t.getMonth());
+      commitDate(d, hour, minute, ampm);
+      setOpen(false);
+    } else {
+      if (isOutOfRange(t)) return;
+      setViewYear(t.getFullYear());
+      setViewMonth(t.getMonth());
+      commitDate(t, hour, minute, ampm);
+      if (type === "date") setOpen(false);
+    }
   };
+  const handleFinalMonthSelect = useCallback3((month, year) => {
+    const d = new Date(year, month, 1);
+    if (isOutOfRange(d)) return;
+    setSelectedDate(d);
+    setViewYear(year);
+    setViewMonth(month);
+    setInputStr(`${MONTHS_SHORT[month]} ${year}`);
+    onChange?.(buildISO(d, type, hour, minute, ampm));
+    setOpen(false);
+  }, [isOutOfRange, onChange, type, hour, minute, ampm]);
+  const handleFinalYearSelect = useCallback3((year) => {
+    const d = new Date(year, 0, 1);
+    if (isOutOfRange(d)) return;
+    setSelectedDate(d);
+    setViewYear(year);
+    setInputStr(String(year));
+    onChange?.(buildISO(d, type, hour, minute, ampm));
+    setOpen(false);
+  }, [isOutOfRange, onChange, type, hour, minute, ampm]);
   const handleClear = () => commitDate(null, hour, minute, ampm);
   const handleInputChange = (e) => {
     const raw = e.target.value;
     setInputStr(raw);
-    const dateWordCount = getDateWordCount(dateFormat);
-    const words = raw.split(" ");
-    const datePart = words.slice(0, dateWordCount).join(" ");
-    const timeParts = words.slice(dateWordCount);
-    const parsed = parseDisplay(datePart, dateFormat);
-    if (parsed && !isOutOfRange(parsed)) {
-      setSelectedDate(parsed);
-      setViewYear(parsed.getFullYear());
-      setViewMonth(parsed.getMonth());
-      let h = hour, m = minute, ap = ampm;
-      if (isDatetimeType(type) && timeParts.length >= 2) {
-        const timePart = timeParts[0];
-        const periodPart = timeParts[1]?.toUpperCase();
-        if (timePart?.includes(":")) {
-          const [hStr, mStr] = timePart.split(":");
-          const parsedH = parseInt(hStr, 10);
-          const parsedM = parseInt(mStr, 10);
-          if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
-            h = parsedH;
-            setHour(h);
+    let parsed = null;
+    if (!hasDayView && !hasMonthView) {
+      parsed = parseYearDisplay(raw);
+    } else if (!hasDayView) {
+      parsed = parseMonthYearDisplay(raw);
+    } else {
+      const dateWordCount = getDateWordCount(dateFormat);
+      const words = raw.split(" ");
+      const datePart = words.slice(0, dateWordCount).join(" ");
+      const timeParts = words.slice(dateWordCount);
+      parsed = parseDisplay(datePart, dateFormat);
+      if (parsed && !isOutOfRange(parsed)) {
+        setSelectedDate(parsed);
+        setViewYear(parsed.getFullYear());
+        setViewMonth(parsed.getMonth());
+        let h = hour, m = minute, ap = ampm;
+        if (isDatetimeType(type) && timeParts.length >= 2) {
+          const timePart = timeParts[0];
+          const periodPart = timeParts[1]?.toUpperCase();
+          if (timePart?.includes(":")) {
+            const [hStr, mStr] = timePart.split(":");
+            const parsedH = parseInt(hStr, 10);
+            const parsedM = parseInt(mStr, 10);
+            if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
+              h = parsedH;
+              setHour(h);
+            }
+            if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
+              m = parsedM;
+              setMinute(m);
+            }
           }
-          if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
-            m = parsedM;
-            setMinute(m);
+          if (periodPart === "AM" || periodPart === "PM") {
+            ap = periodPart;
+            setAmpm(ap);
           }
         }
-        if (periodPart === "AM" || periodPart === "PM") {
-          ap = periodPart;
-          setAmpm(ap);
-        }
+        isInternalChange.current = true;
+        onChange?.(buildISO(parsed, type, h, m, ap));
+      } else if (!raw) {
+        setSelectedDate(null);
+        isInternalChange.current = true;
+        onChange?.("");
       }
+      return;
+    }
+    if (parsed && !isOutOfRange(parsed)) {
+      setSelectedDate(parsed);
+      setViewYear(parsed.getFullYear());
+      setViewMonth(parsed.getMonth());
       isInternalChange.current = true;
-      onChange?.(buildISO(parsed, type, h, m, ap));
+      onChange?.(buildISO(parsed, type, hour, minute, ampm));
     } else if (!raw) {
       setSelectedDate(null);
       isInternalChange.current = true;
@@ -3513,7 +3648,10 @@ var DateField = ({
           onMonthSelect: setViewMonth,
           onYearSelect: setViewYear,
           minDate,
-          maxDate
+          maxDate,
+          views,
+          onFinalMonthSelect: handleFinalMonthSelect,
+          onFinalYearSelect: handleFinalYearSelect
         }
       ), type === "datetime" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React72.createElement(
         SpinnerPanel,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.11",
+  "version": "0.3.12",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",
@@ -93,4 +93,4 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }
-}
+}