@rufous/ui 0.2.94 → 0.2.96

package/dist/main.cjs

@@ -1831,6 +1831,28 @@ var TextField = (0, import_react17.forwardRef)(({
     className
   ].filter(Boolean).join(" ");
   const internalRef = import_react17.default.useRef(null);
+  const handleChange = (e) => {
+    if (type === "number") {
+      const raw = e.target.value;
+      const inputMax = slotProps?.input?.max ?? props.max;
+      const inputMaxLength = slotProps?.input?.maxLength ?? props.maxLength;
+      if (inputMaxLength != null) {
+        const digits = raw.replace(/[^0-9]/g, "");
+        if (digits.length > Number(inputMaxLength)) return;
+      }
+      if (inputMax != null && raw !== "") {
+        if (Number(raw) > Number(inputMax)) return;
+      }
+      const numericValue = raw === "" ? "" : Number(raw);
+      const syntheticEvent = Object.assign({}, e, {
+        target: Object.assign({}, e.target, { value: numericValue }),
+        currentTarget: Object.assign({}, e.currentTarget, { value: numericValue })
+      });
+      onChange?.(syntheticEvent);
+      return;
+    }
+    onChange?.(e);
+  };
   const triggerChange = () => {
     if (internalRef.current) {
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
@@ -1894,14 +1916,14 @@ var TextField = (0, import_react17.forwardRef)(({
       name,
       id: inputId,
       value,
-      onChange,
       required,
       disabled,
       readOnly,
       step: type === "number" && numberVariant ? STEP_BY_VARIANT[numberVariant] : void 0,
       min: type === "number" && numberVariant ? MIN_BY_VARIANT[numberVariant] : void 0,
       ...slotProps?.input,
-      ...props
+      ...props,
+      onChange: handleChange
     }
   ), InputProps?.endAdornment && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ import_react17.default.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ import_react17.default.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ import_react17.default.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ import_react17.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react17.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ import_react17.default.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react17.default.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ import_react17.default.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ import_react17.default.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 });
@@ -2967,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();
@@ -3127,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");
@@ -3147,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",
     {
@@ -3161,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
     );
@@ -3214,6 +3271,8 @@ var DateField = ({
   onChange,
   type = "date",
   dateFormat = "MM/DD/YYYY",
+  minDate: minDateProp,
+  maxDate: maxDateProp,
   variant = "outlined",
   size = "medium",
   color = "primary",
@@ -3227,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);
@@ -3326,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);
@@ -3337,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);
@@ -3351,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());
@@ -3545,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,
@@ -3559,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,
         {

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

@@ -1665,6 +1665,28 @@ var TextField = forwardRef3(({
     className
   ].filter(Boolean).join(" ");
   const internalRef = React68.useRef(null);
+  const handleChange = (e) => {
+    if (type === "number") {
+      const raw = e.target.value;
+      const inputMax = slotProps?.input?.max ?? props.max;
+      const inputMaxLength = slotProps?.input?.maxLength ?? props.maxLength;
+      if (inputMaxLength != null) {
+        const digits = raw.replace(/[^0-9]/g, "");
+        if (digits.length > Number(inputMaxLength)) return;
+      }
+      if (inputMax != null && raw !== "") {
+        if (Number(raw) > Number(inputMax)) return;
+      }
+      const numericValue = raw === "" ? "" : Number(raw);
+      const syntheticEvent = Object.assign({}, e, {
+        target: Object.assign({}, e.target, { value: numericValue }),
+        currentTarget: Object.assign({}, e.currentTarget, { value: numericValue })
+      });
+      onChange?.(syntheticEvent);
+      return;
+    }
+    onChange?.(e);
+  };
   const triggerChange = () => {
     if (internalRef.current) {
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
@@ -1728,14 +1750,14 @@ var TextField = forwardRef3(({
       name,
       id: inputId,
       value,
-      onChange,
       required,
       disabled,
       readOnly,
       step: type === "number" && numberVariant ? STEP_BY_VARIANT[numberVariant] : void 0,
       min: type === "number" && numberVariant ? MIN_BY_VARIANT[numberVariant] : void 0,
       ...slotProps?.input,
-      ...props
+      ...props,
+      onChange: handleChange
     }
   ), InputProps?.endAdornment && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React68.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React68.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React68.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React68.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React68.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React68.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 });
@@ -2816,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();
@@ -2976,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");
@@ -2996,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",
     {
@@ -3010,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
     );
@@ -3063,6 +3120,8 @@ var DateField = ({
   onChange,
   type = "date",
   dateFormat = "MM/DD/YYYY",
+  minDate: minDateProp,
+  maxDate: maxDateProp,
   variant = "outlined",
   size = "medium",
   color = "primary",
@@ -3076,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);
@@ -3175,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);
@@ -3186,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);
@@ -3200,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());
@@ -3394,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,
@@ -3408,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,
         {

package/package.json

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