@rufous/ui 0.2.95 → 0.2.97

package/dist/main.cjs

@@ -2989,6 +2989,14 @@ var today = () => {
   return new Date(t.getFullYear(), t.getMonth(), t.getDate());
 };
 var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var normaliseBoundary = (d) => {
+  if (!d) return null;
+  const base = d instanceof Date ? d : isoToDate(typeof d === "string" ? d.split("T")[0] : d);
+  if (!base) return null;
+  return new Date(base.getFullYear(), base.getMonth(), base.getDate());
+};
+var isBeforeDay = (a, b) => a.getFullYear() < b.getFullYear() || a.getFullYear() === b.getFullYear() && a.getMonth() < b.getMonth() || a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() < b.getDate();
+var isAfterDay = (a, b) => a.getFullYear() > b.getFullYear() || a.getFullYear() === b.getFullYear() && a.getMonth() > b.getMonth() || a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() > b.getDate();
 var isDatetimeType = (t) => t !== "date";
 var buildISO = (date, type, hour, minute, ampm) => {
   const y = date.getFullYear();
@@ -3149,15 +3157,13 @@ var CalendarBody = ({
   onPrev,
   onNext,
   onMonthSelect,
-  onYearSelect
+  onYearSelect,
+  minDate,
+  maxDate
 }) => {
   const [pickerView, setPickerView] = (0, import_react21.useState)("calendar");
-  const handleMonthClick = () => {
-    setPickerView(pickerView === "month" ? "calendar" : "month");
-  };
-  const handleYearClick = () => {
-    setPickerView(pickerView === "year" ? "calendar" : "year");
-  };
+  const handleMonthClick = () => setPickerView(pickerView === "month" ? "calendar" : "month");
+  const handleYearClick = () => setPickerView(pickerView === "year" ? "calendar" : "year");
   const handleMonthPick = (month) => {
     onMonthSelect(month);
     setPickerView("calendar");
@@ -3169,6 +3175,22 @@ var CalendarBody = ({
   const currentYear = todayDate.getFullYear();
   const yearStart = viewYear - 6;
   const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
+  const prevMonthLastDay = new Date(viewYear, viewMonth, 0);
+  const isPrevDisabled = minDate ? isBeforeDay(prevMonthLastDay, minDate) : false;
+  const nextMonthFirstDay = new Date(viewYear, viewMonth + 1, 1);
+  const isNextDisabled = maxDate ? isAfterDay(nextMonthFirstDay, maxDate) : false;
+  const isMonthDisabled = (idx) => {
+    const lastDayOfMonth = new Date(viewYear, idx + 1, 0);
+    const firstDayOfMonth = new Date(viewYear, idx, 1);
+    if (minDate && isBeforeDay(lastDayOfMonth, minDate)) return true;
+    if (maxDate && isAfterDay(firstDayOfMonth, maxDate)) return true;
+    return false;
+  };
+  const isYearDisabled = (y) => {
+    if (minDate && y < minDate.getFullYear()) return true;
+    if (maxDate && y > maxDate.getFullYear()) return true;
+    return false;
+  };
   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",
     {
@@ -3183,48 +3205,61 @@ var CalendarBody = ({
       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, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "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(
-    "button",
-    {
-      key: m,
-      type: "button",
-      className: [
-        "rf-date-picker__month-cell",
-        idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
-        idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : ""
-      ].filter(Boolean).join(" "),
-      onClick: () => handleMonthPick(idx)
-    },
-    m
-  ))), pickerView === "year" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react21.default.createElement(
-    "button",
-    {
-      key: y,
-      type: "button",
-      className: [
-        "rf-date-picker__year-cell",
-        y === viewYear ? "rf-date-picker__year-cell--selected" : "",
-        y === currentYear ? "rf-date-picker__year-cell--current" : ""
-      ].filter(Boolean).join(" "),
-      onClick: () => handleYearPick(y)
-    },
-    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) => {
+  )), /* @__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) => {
+    const monthDisabled = isMonthDisabled(idx);
+    return /* @__PURE__ */ import_react21.default.createElement(
+      "button",
+      {
+        key: m,
+        type: "button",
+        disabled: monthDisabled,
+        className: [
+          "rf-date-picker__month-cell",
+          idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
+          idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : "",
+          monthDisabled ? "rf-date-picker__month-cell--disabled" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => !monthDisabled && handleMonthPick(idx)
+      },
+      m
+    );
+  })), pickerView === "year" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => {
+    const yearDisabled = isYearDisabled(y);
+    return /* @__PURE__ */ import_react21.default.createElement(
+      "button",
+      {
+        key: y,
+        type: "button",
+        disabled: yearDisabled,
+        className: [
+          "rf-date-picker__year-cell",
+          y === viewYear ? "rf-date-picker__year-cell--selected" : "",
+          y === currentYear ? "rf-date-picker__year-cell--current" : "",
+          yearDisabled ? "rf-date-picker__year-cell--disabled" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => !yearDisabled && handleYearPick(y)
+      },
+      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) => {
     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;
     const isToday = isSameDay(cellDate, todayDate);
+    const dayDisabled = (minDate ? isBeforeDay(cellDate, minDate) : false) || (maxDate ? isAfterDay(cellDate, maxDate) : false);
     return /* @__PURE__ */ import_react21.default.createElement(
       "button",
       {
         key: day,
         type: "button",
+        disabled: dayDisabled,
         className: [
           "rf-date-picker__day",
           isSelected ? "rf-date-picker__day--selected" : "",
-          isToday && !isSelected ? "rf-date-picker__day--today" : ""
+          isToday && !isSelected ? "rf-date-picker__day--today" : "",
+          dayDisabled ? "rf-date-picker__day--disabled" : ""
         ].filter(Boolean).join(" "),
-        onClick: () => onDayClick(day)
+        onClick: () => !dayDisabled && onDayClick(day)
       },
       day
     );
@@ -3236,6 +3271,8 @@ var DateField = ({
   onChange,
   type = "date",
   dateFormat = "MM/DD/YYYY",
+  minDate: minDateProp,
+  maxDate: maxDateProp,
   variant = "outlined",
   size = "medium",
   color = "primary",
@@ -3249,6 +3286,8 @@ var DateField = ({
   style,
   sx
 }) => {
+  const minDate = normaliseBoundary(minDateProp);
+  const maxDate = normaliseBoundary(maxDateProp);
   const sxClass = useSx(sx);
   const [open, setOpen] = (0, import_react21.useState)(false);
   const [selectedDate, setSelectedDate] = (0, import_react21.useState)(() => value ? isoToDate(value) : null);
@@ -3348,8 +3387,10 @@ var DateField = ({
     setInputStr(str);
     onChange?.(buildISO(d, type, h, m, ap));
   }, [type, onChange, dateFormat]);
+  const isOutOfRange = (d) => (minDate ? isBeforeDay(d, minDate) : false) || (maxDate ? isAfterDay(d, maxDate) : false);
   const handleDayClick = (day) => {
     const d = new Date(viewYear, viewMonth, day);
+    if (isOutOfRange(d)) return;
     setSelectedDate(d);
     let str = formatDisplay(d, dateFormat);
     if (isDatetimeType(type)) str += " " + formatTimeDisplay(hour, minute, ampm);
@@ -3359,6 +3400,7 @@ var DateField = ({
   };
   const handleToday = () => {
     const t = today();
+    if (isOutOfRange(t)) return;
     setViewYear(t.getFullYear());
     setViewMonth(t.getMonth());
     commitDate(t, hour, minute, ampm);
@@ -3373,7 +3415,7 @@ var DateField = ({
     const datePart = words.slice(0, dateWordCount).join(" ");
     const timeParts = words.slice(dateWordCount);
     const parsed = parseDisplay(datePart, dateFormat);
-    if (parsed) {
+    if (parsed && !isOutOfRange(parsed)) {
       setSelectedDate(parsed);
       setViewYear(parsed.getFullYear());
       setViewMonth(parsed.getMonth());
@@ -3567,7 +3609,9 @@ var DateField = ({
           onPrev: prevMonth,
           onNext: nextMonth,
           onMonthSelect: setViewMonth,
-          onYearSelect: setViewYear
+          onYearSelect: setViewYear,
+          minDate,
+          maxDate
         }
       ), 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,
@@ -3581,7 +3625,7 @@ var DateField = ({
           onMinuteInput: handleMinuteInput,
           onAmpmToggle: handleAmpmToggle
         }
-      )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+      )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday, disabled: isOutOfRange(todayDate) }, "Today"), /* @__PURE__ */ import_react21.default.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
       type === "datetime-side" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ import_react21.default.createElement(
         SpinnerPanel,
         {
@@ -4622,9 +4666,14 @@ function DataGrid({
     const headers = exportableCols.map((c) => c.headerName).join(",");
     const rows = sortedData.map(
       (item) => exportableCols.map((c) => {
-        const raw = item[c.field];
-        const val = raw === null || raw === void 0 ? "" : String(raw).replace(/"/g, '""');
-        return `"${val}"`;
+        const field = String(c.field);
+        const raw = item[field];
+        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+        if (c.valueFormatter) {
+          val = c.valueFormatter({ value: val, row: item, field });
+        }
+        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
+        return `"${str}"`;
       }).join(",")
     );
     const csv = [headers, ...rows].join("\n");

package/dist/main.css

@@ -1758,6 +1758,34 @@ pre {
   color: #a41b06;
   font-weight: 600;
 }
+.rf-date-picker__day--disabled,
+.rf-date-picker__day:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rf-date-picker__month-cell--disabled,
+.rf-date-picker__month-cell:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rf-date-picker__year-cell--disabled,
+.rf-date-picker__year-cell:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rf-date-picker__nav-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.rf-date-picker__footer-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 
 /* lib/styles/date-range-field.css */
 .rf-date-range-field {

package/dist/main.d.cts

@@ -627,6 +627,10 @@ interface DateFieldProps {
     type?: "date" | "datetime" | "datetime-side" | "datetime-scroll";
     /** Display format for the date in the input field. Default: "MM/DD/YYYY" */
     dateFormat?: DateFormatString;
+    /** Earliest selectable date — ISO string "YYYY-MM-DD" or a Date object */
+    minDate?: string | Date;
+    /** Latest selectable date — ISO string "YYYY-MM-DD" or a Date object */
+    maxDate?: string | Date;
     variant?: "outlined" | "filled" | "standard" | "compact";
     size?: "small" | "medium";
     color?: "primary" | "secondary" | "error" | "success" | "info" | "warning";

package/dist/main.d.ts

@@ -627,6 +627,10 @@ interface DateFieldProps {
     type?: "date" | "datetime" | "datetime-side" | "datetime-scroll";
     /** Display format for the date in the input field. Default: "MM/DD/YYYY" */
     dateFormat?: DateFormatString;
+    /** Earliest selectable date — ISO string "YYYY-MM-DD" or a Date object */
+    minDate?: string | Date;
+    /** Latest selectable date — ISO string "YYYY-MM-DD" or a Date object */
+    maxDate?: string | Date;
     variant?: "outlined" | "filled" | "standard" | "compact";
     size?: "small" | "medium";
     color?: "primary" | "secondary" | "error" | "success" | "info" | "warning";

package/dist/main.js

@@ -2838,6 +2838,14 @@ var today = () => {
   return new Date(t.getFullYear(), t.getMonth(), t.getDate());
 };
 var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var normaliseBoundary = (d) => {
+  if (!d) return null;
+  const base = d instanceof Date ? d : isoToDate(typeof d === "string" ? d.split("T")[0] : d);
+  if (!base) return null;
+  return new Date(base.getFullYear(), base.getMonth(), base.getDate());
+};
+var isBeforeDay = (a, b) => a.getFullYear() < b.getFullYear() || a.getFullYear() === b.getFullYear() && a.getMonth() < b.getMonth() || a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() < b.getDate();
+var isAfterDay = (a, b) => a.getFullYear() > b.getFullYear() || a.getFullYear() === b.getFullYear() && a.getMonth() > b.getMonth() || a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() > b.getDate();
 var isDatetimeType = (t) => t !== "date";
 var buildISO = (date, type, hour, minute, ampm) => {
   const y = date.getFullYear();
@@ -2998,15 +3006,13 @@ var CalendarBody = ({
   onPrev,
   onNext,
   onMonthSelect,
-  onYearSelect
+  onYearSelect,
+  minDate,
+  maxDate
 }) => {
   const [pickerView, setPickerView] = useState7("calendar");
-  const handleMonthClick = () => {
-    setPickerView(pickerView === "month" ? "calendar" : "month");
-  };
-  const handleYearClick = () => {
-    setPickerView(pickerView === "year" ? "calendar" : "year");
-  };
+  const handleMonthClick = () => setPickerView(pickerView === "month" ? "calendar" : "month");
+  const handleYearClick = () => setPickerView(pickerView === "year" ? "calendar" : "year");
   const handleMonthPick = (month) => {
     onMonthSelect(month);
     setPickerView("calendar");
@@ -3018,6 +3024,22 @@ var CalendarBody = ({
   const currentYear = todayDate.getFullYear();
   const yearStart = viewYear - 6;
   const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
+  const prevMonthLastDay = new Date(viewYear, viewMonth, 0);
+  const isPrevDisabled = minDate ? isBeforeDay(prevMonthLastDay, minDate) : false;
+  const nextMonthFirstDay = new Date(viewYear, viewMonth + 1, 1);
+  const isNextDisabled = maxDate ? isAfterDay(nextMonthFirstDay, maxDate) : false;
+  const isMonthDisabled = (idx) => {
+    const lastDayOfMonth = new Date(viewYear, idx + 1, 0);
+    const firstDayOfMonth = new Date(viewYear, idx, 1);
+    if (minDate && isBeforeDay(lastDayOfMonth, minDate)) return true;
+    if (maxDate && isAfterDay(firstDayOfMonth, maxDate)) return true;
+    return false;
+  };
+  const isYearDisabled = (y) => {
+    if (minDate && y < minDate.getFullYear()) return true;
+    if (maxDate && y > maxDate.getFullYear()) return true;
+    return false;
+  };
   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",
     {
@@ -3032,48 +3054,61 @@ var CalendarBody = ({
       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, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "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(
-    "button",
-    {
-      key: m,
-      type: "button",
-      className: [
-        "rf-date-picker__month-cell",
-        idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
-        idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : ""
-      ].filter(Boolean).join(" "),
-      onClick: () => handleMonthPick(idx)
-    },
-    m
-  ))), pickerView === "year" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ React72.createElement(
-    "button",
-    {
-      key: y,
-      type: "button",
-      className: [
-        "rf-date-picker__year-cell",
-        y === viewYear ? "rf-date-picker__year-cell--selected" : "",
-        y === currentYear ? "rf-date-picker__year-cell--current" : ""
-      ].filter(Boolean).join(" "),
-      onClick: () => handleYearPick(y)
-    },
-    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) => {
+  )), /* @__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) => {
+    const monthDisabled = isMonthDisabled(idx);
+    return /* @__PURE__ */ React72.createElement(
+      "button",
+      {
+        key: m,
+        type: "button",
+        disabled: monthDisabled,
+        className: [
+          "rf-date-picker__month-cell",
+          idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
+          idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : "",
+          monthDisabled ? "rf-date-picker__month-cell--disabled" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => !monthDisabled && handleMonthPick(idx)
+      },
+      m
+    );
+  })), pickerView === "year" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => {
+    const yearDisabled = isYearDisabled(y);
+    return /* @__PURE__ */ React72.createElement(
+      "button",
+      {
+        key: y,
+        type: "button",
+        disabled: yearDisabled,
+        className: [
+          "rf-date-picker__year-cell",
+          y === viewYear ? "rf-date-picker__year-cell--selected" : "",
+          y === currentYear ? "rf-date-picker__year-cell--current" : "",
+          yearDisabled ? "rf-date-picker__year-cell--disabled" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => !yearDisabled && handleYearPick(y)
+      },
+      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) => {
     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;
     const isToday = isSameDay(cellDate, todayDate);
+    const dayDisabled = (minDate ? isBeforeDay(cellDate, minDate) : false) || (maxDate ? isAfterDay(cellDate, maxDate) : false);
     return /* @__PURE__ */ React72.createElement(
       "button",
       {
         key: day,
         type: "button",
+        disabled: dayDisabled,
         className: [
           "rf-date-picker__day",
           isSelected ? "rf-date-picker__day--selected" : "",
-          isToday && !isSelected ? "rf-date-picker__day--today" : ""
+          isToday && !isSelected ? "rf-date-picker__day--today" : "",
+          dayDisabled ? "rf-date-picker__day--disabled" : ""
         ].filter(Boolean).join(" "),
-        onClick: () => onDayClick(day)
+        onClick: () => !dayDisabled && onDayClick(day)
       },
       day
     );
@@ -3085,6 +3120,8 @@ var DateField = ({
   onChange,
   type = "date",
   dateFormat = "MM/DD/YYYY",
+  minDate: minDateProp,
+  maxDate: maxDateProp,
   variant = "outlined",
   size = "medium",
   color = "primary",
@@ -3098,6 +3135,8 @@ var DateField = ({
   style,
   sx
 }) => {
+  const minDate = normaliseBoundary(minDateProp);
+  const maxDate = normaliseBoundary(maxDateProp);
   const sxClass = useSx(sx);
   const [open, setOpen] = useState7(false);
   const [selectedDate, setSelectedDate] = useState7(() => value ? isoToDate(value) : null);
@@ -3197,8 +3236,10 @@ var DateField = ({
     setInputStr(str);
     onChange?.(buildISO(d, type, h, m, ap));
   }, [type, onChange, dateFormat]);
+  const isOutOfRange = (d) => (minDate ? isBeforeDay(d, minDate) : false) || (maxDate ? isAfterDay(d, maxDate) : false);
   const handleDayClick = (day) => {
     const d = new Date(viewYear, viewMonth, day);
+    if (isOutOfRange(d)) return;
     setSelectedDate(d);
     let str = formatDisplay(d, dateFormat);
     if (isDatetimeType(type)) str += " " + formatTimeDisplay(hour, minute, ampm);
@@ -3208,6 +3249,7 @@ var DateField = ({
   };
   const handleToday = () => {
     const t = today();
+    if (isOutOfRange(t)) return;
     setViewYear(t.getFullYear());
     setViewMonth(t.getMonth());
     commitDate(t, hour, minute, ampm);
@@ -3222,7 +3264,7 @@ var DateField = ({
     const datePart = words.slice(0, dateWordCount).join(" ");
     const timeParts = words.slice(dateWordCount);
     const parsed = parseDisplay(datePart, dateFormat);
-    if (parsed) {
+    if (parsed && !isOutOfRange(parsed)) {
       setSelectedDate(parsed);
       setViewYear(parsed.getFullYear());
       setViewMonth(parsed.getMonth());
@@ -3416,7 +3458,9 @@ var DateField = ({
           onPrev: prevMonth,
           onNext: nextMonth,
           onMonthSelect: setViewMonth,
-          onYearSelect: setViewYear
+          onYearSelect: setViewYear,
+          minDate,
+          maxDate
         }
       ), 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,
@@ -3430,7 +3474,7 @@ var DateField = ({
           onMinuteInput: handleMinuteInput,
           onAmpmToggle: handleAmpmToggle
         }
-      )), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+      )), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday, disabled: isOutOfRange(todayDate) }, "Today"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
       type === "datetime-side" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React72.createElement(
         SpinnerPanel,
         {
@@ -4492,9 +4536,14 @@ function DataGrid({
     const headers = exportableCols.map((c) => c.headerName).join(",");
     const rows = sortedData.map(
       (item) => exportableCols.map((c) => {
-        const raw = item[c.field];
-        const val = raw === null || raw === void 0 ? "" : String(raw).replace(/"/g, '""');
-        return `"${val}"`;
+        const field = String(c.field);
+        const raw = item[field];
+        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+        if (c.valueFormatter) {
+          val = c.valueFormatter({ value: val, row: item, field });
+        }
+        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
+        return `"${str}"`;
       }).join(",")
     );
     const csv = [headers, ...rows].join("\n");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.95",
+  "version": "0.2.97",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",