@mesob/ui 0.5.10 → 0.5.11

package/dist/components.d.ts

@@ -941,6 +941,10 @@ interface DateTimePickerProps {
     clearable?: boolean;
     withSeconds?: boolean;
     presets?: DateTimePickerPreset[];
+    /** Minimum allowed date-time (inclusive). */
+    minDateTime?: Date;
+    /** Maximum allowed date-time (inclusive). */
+    maxDateTime?: Date;
     valueFormat?: (date: Date) => string;
     description?: string;
     error?: string;
@@ -1405,6 +1409,7 @@ interface DateTimeDropdownContentProps {
     onNext: () => void;
     onHeaderClick: () => void;
     onDayClick: (cell: CalendarCell) => void;
+    isDayDisabled?: (cell: CalendarCell) => boolean;
     onMonthSelect: (i: number) => void;
     onYearSelect: (y: number) => void;
     onCalendarTypeChange: (type: CalendarType) => void;
@@ -1541,6 +1546,10 @@ type TimeInputProps = {
     withSeconds?: boolean;
     /** 12-hour format with AM/PM, or 24-hour format. @default '24h' */
     format?: '12h' | '24h';
+    /** Minimum allowed time as `HH:mm` or `HH:mm:ss` (24h). */
+    min?: string;
+    /** Maximum allowed time as `HH:mm` or `HH:mm:ss` (24h). */
+    max?: string;
     disabled?: boolean;
     /** @default today */
     baseDate?: Date;

package/dist/components.js

@@ -12572,6 +12572,7 @@ function DateTimeDropdownContent({
   onNext,
   onHeaderClick,
   onDayClick,
+  isDayDisabled,
   onMonthSelect,
   onYearSelect,
   onCalendarTypeChange,
@@ -12653,23 +12654,28 @@ function DateTimeDropdownContent({
               },
               wd
             )) }),
-            /* @__PURE__ */ jsx103("div", { className: "grid grid-cols-7", children: cells.map((cell) => /* @__PURE__ */ jsx103(
-              "button",
-              {
-                type: "button",
-                onClick: () => onDayClick(cell),
-                className: cn(
-                  "flex size-9 items-center justify-center rounded-full text-sm transition-colors",
-                  cell.isSelected && "bg-primary font-medium text-primary-foreground ring-2 ring-primary/30",
-                  !cell.isSelected && cell.isToday && "font-semibold text-foreground ring-1 ring-inset ring-primary/45",
-                  !(cell.isSelected || cell.isToday) && cell.current && cell.weekend && "text-destructive/80 hover:bg-muted",
-                  !(cell.isSelected || cell.isToday) && cell.current && !cell.weekend && "text-foreground hover:bg-muted",
-                  !(cell.isSelected || cell.current) && "text-muted-foreground hover:bg-muted/50"
-                ),
-                children: cell.day
-              },
-              `${cell.gcDate.getTime()}-${cell.day}-${cell.month}-${cell.year}`
-            )) })
+            /* @__PURE__ */ jsx103("div", { className: "grid grid-cols-7", children: cells.map((cell) => {
+              const disabled = isDayDisabled?.(cell) ?? false;
+              return /* @__PURE__ */ jsx103(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onDayClick(cell),
+                  disabled,
+                  className: cn(
+                    "flex size-9 items-center justify-center rounded-full text-sm transition-colors",
+                    disabled && "cursor-not-allowed text-muted-foreground/50 hover:bg-transparent",
+                    cell.isSelected && "bg-primary font-medium text-primary-foreground ring-2 ring-primary/30",
+                    !cell.isSelected && cell.isToday && "font-semibold text-foreground ring-1 ring-inset ring-primary/45",
+                    !(cell.isSelected || cell.isToday || disabled) && cell.current && cell.weekend && "text-destructive/80 hover:bg-muted",
+                    !(cell.isSelected || cell.isToday || disabled) && cell.current && !cell.weekend && "text-foreground hover:bg-muted",
+                    !(cell.isSelected || cell.current || disabled) && "text-muted-foreground hover:bg-muted/50"
+                  ),
+                  children: cell.day
+                },
+                `${cell.gcDate.getTime()}-${cell.day}-${cell.month}-${cell.year}`
+              );
+            }) })
           ] }),
           view === "months" && /* @__PURE__ */ jsx103("div", { className: "grid grid-cols-3 gap-1 py-2", children: monthShortList.map((m, i) => {
             const sel = calendarType === "EC" ? (() => {
@@ -12787,15 +12793,10 @@ function DateTimeDropdownContent({
 import { useCallback as useCallback11, useEffect as useEffect16, useRef as useRef13, useState as useState29 } from "react";
 
 // src/components/date-time/datetime-picker/format-display.ts
-function formatDateTimeDisplay(d, calendarType, withSeconds) {
-  const [ecYear, ecMonth, ecDay] = toEC(
-    d.getFullYear(),
-    d.getMonth() + 1,
-    d.getDate()
-  );
-  const dd = calendarType === "EC" ? pad2(ecDay) : pad2(d.getDate());
-  const mm = calendarType === "EC" ? pad2(ecMonth) : pad2(d.getMonth() + 1);
-  const yyyy = calendarType === "EC" ? ecYear : d.getFullYear();
+function formatDateTimeDisplay(d, withSeconds) {
+  const dd = pad2(d.getDate());
+  const mm = pad2(d.getMonth() + 1);
+  const yyyy = d.getFullYear();
   const hh = pad2(d.getHours());
   const min = pad2(d.getMinutes());
   const sec = pad2(d.getSeconds());
@@ -12832,13 +12833,42 @@ function clampAndPad(raw, max) {
 }
 
 // src/components/date-time/datetime-picker/use-datetime-picker.ts
+function getStartOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+}
+function getEndOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+}
+function isDayCompletelyOutOfRange(day, minDateTime, maxDateTime) {
+  const dayStart = getStartOfDay(day).getTime();
+  const dayEnd = getEndOfDay(day).getTime();
+  if (minDateTime && dayEnd < minDateTime.getTime()) {
+    return true;
+  }
+  if (maxDateTime && dayStart > maxDateTime.getTime()) {
+    return true;
+  }
+  return false;
+}
+function clampToDateTimeRange(value, minDateTime, maxDateTime) {
+  const t = value.getTime();
+  if (minDateTime && t < minDateTime.getTime()) {
+    return new Date(minDateTime);
+  }
+  if (maxDateTime && t > maxDateTime.getTime()) {
+    return new Date(maxDateTime);
+  }
+  return value;
+}
 function useDateTimePicker(props) {
   const {
     value: controlledValue,
     defaultValue = null,
     onChange,
     withSeconds = false,
-    live: liveProp
+    live: liveProp,
+    minDateTime: minDateTimeProp,
+    maxDateTime: maxDateTimeProp
   } = props;
   const live = liveProp === true;
   const isControlled = controlledValue !== void 0;
@@ -12878,6 +12908,9 @@ function useDateTimePicker(props) {
   timeHRef.current = timeH;
   timeMRef.current = timeM;
   timeSRef.current = timeS;
+  const hasInvalidRange = !!(minDateTimeProp && maxDateTimeProp) && minDateTimeProp.getTime() > maxDateTimeProp.getTime();
+  const minDateTime = hasInvalidRange ? null : minDateTimeProp ?? null;
+  const maxDateTime = hasInvalidRange ? null : maxDateTimeProp ?? null;
   useEffect16(() => {
     if (!committed) {
       return;
@@ -12922,8 +12955,12 @@ function useDateTimePicker(props) {
     return `${decadeStart} \u2013 ${decadeStart + 9}`;
   };
   const formatDisplay = useCallback11(
-    (d) => formatDateTimeDisplay(d, calendarType, withSeconds),
-    [calendarType, withSeconds]
+    (d) => formatDateTimeDisplay(d, withSeconds),
+    [withSeconds]
+  );
+  const isDayDisabled = useCallback11(
+    (cell) => isDayCompletelyOutOfRange(cell.gcDate, minDateTime, maxDateTime),
+    [minDateTime, maxDateTime]
   );
   const setTimeH = useCallback11(
     (h) => {
@@ -12936,7 +12973,7 @@ function useDateTimePicker(props) {
         const hh = h ? Math.min(Number.parseInt(h, 10) || 0, 23) : 0;
         const mm = timeMRef.current ? Math.min(Number.parseInt(timeMRef.current, 10) || 0, 59) : 0;
         const ss = withSeconds && timeSRef.current ? Math.min(Number.parseInt(timeSRef.current, 10) || 0, 59) : 0;
-        return new Date(
+        const next = new Date(
           base.getFullYear(),
           base.getMonth(),
           base.getDate(),
@@ -12944,9 +12981,10 @@ function useDateTimePicker(props) {
           mm,
           ss
         );
+        return clampToDateTimeRange(next, minDateTime, maxDateTime);
       });
     },
-    [live, open, now, withSeconds]
+    [live, open, now, withSeconds, minDateTime, maxDateTime]
   );
   const setTimeM = useCallback11(
     (m) => {
@@ -12959,7 +12997,7 @@ function useDateTimePicker(props) {
         const hh = timeHRef.current ? Math.min(Number.parseInt(timeHRef.current, 10) || 0, 23) : 0;
         const mm = m ? Math.min(Number.parseInt(m, 10) || 0, 59) : 0;
         const ss = withSeconds && timeSRef.current ? Math.min(Number.parseInt(timeSRef.current, 10) || 0, 59) : 0;
-        return new Date(
+        const next = new Date(
           base.getFullYear(),
           base.getMonth(),
           base.getDate(),
@@ -12967,9 +13005,10 @@ function useDateTimePicker(props) {
           mm,
           ss
         );
+        return clampToDateTimeRange(next, minDateTime, maxDateTime);
       });
     },
-    [live, open, now, withSeconds]
+    [live, open, now, withSeconds, minDateTime, maxDateTime]
   );
   const setTimeS = useCallback11(
     (s) => {
@@ -12982,7 +13021,7 @@ function useDateTimePicker(props) {
         const hh = timeHRef.current ? Math.min(Number.parseInt(timeHRef.current, 10) || 0, 23) : 0;
         const mm = timeMRef.current ? Math.min(Number.parseInt(timeMRef.current, 10) || 0, 59) : 0;
         const ss = withSeconds && s ? Math.min(Number.parseInt(s, 10) || 0, 59) : 0;
-        return new Date(
+        const next = new Date(
           base.getFullYear(),
           base.getMonth(),
           base.getDate(),
@@ -12990,15 +13029,19 @@ function useDateTimePicker(props) {
           mm,
           ss
         );
+        return clampToDateTimeRange(next, minDateTime, maxDateTime);
       });
     },
-    [live, open, now, withSeconds]
+    [live, open, now, withSeconds, minDateTime, maxDateTime]
   );
   function handleDayClick(cell) {
+    if (isDayCompletelyOutOfRange(cell.gcDate, minDateTime, maxDateTime)) {
+      return;
+    }
     const h = timeH ? Math.min(Number.parseInt(timeH, 10) || 0, 23) : 0;
     const m = timeM ? Math.min(Number.parseInt(timeM, 10) || 0, 59) : 0;
     const s = withSeconds && timeS ? Math.min(Number.parseInt(timeS, 10) || 0, 59) : 0;
-    const selected = new Date(
+    const selectedRaw = new Date(
       cell.gcDate.getFullYear(),
       cell.gcDate.getMonth(),
       cell.gcDate.getDate(),
@@ -13006,6 +13049,11 @@ function useDateTimePicker(props) {
       m,
       s
     );
+    const selected = clampToDateTimeRange(
+      selectedRaw,
+      minDateTime,
+      maxDateTime
+    );
     if (!live) {
       setDraft(selected);
       setGcViewMonth(selected.getMonth());
@@ -13186,7 +13234,7 @@ function useDateTimePicker(props) {
           sec,
           0
         );
-        return d;
+        return clampToDateTimeRange(d, minDateTime, maxDateTime);
       });
       return;
     }
@@ -13200,7 +13248,7 @@ function useDateTimePicker(props) {
       } else {
         d.setSeconds(Number.parseInt(padded, 10));
       }
-      updateValue(d);
+      updateValue(clampToDateTimeRange(d, minDateTime, maxDateTime));
     }
   }
   function handleConfirm() {
@@ -13226,8 +13274,9 @@ function useDateTimePicker(props) {
         withSeconds ? secNum : 0,
         0
       );
+      const next = clampToDateTimeRange(d, minDateTime, maxDateTime);
       if (draft || committed || h || m || withSeconds && s) {
-        updateValue(d);
+        updateValue(next);
       }
       setDraft(null);
       setOpen(false);
@@ -13244,15 +13293,16 @@ function useDateTimePicker(props) {
       withSeconds ? secNumLive : 0,
       0
     );
+    const nextLive = clampToDateTimeRange(dLive, minDateTime, maxDateTime);
     if (committed || h || m || withSeconds && s) {
-      updateValue(dLive);
+      updateValue(nextLive);
       if (!committed) {
-        setGcViewYear(dLive.getFullYear());
-        setGcViewMonth(dLive.getMonth());
+        setGcViewYear(nextLive.getFullYear());
+        setGcViewMonth(nextLive.getMonth());
         const [ecY, ecM] = toEC(
-          dLive.getFullYear(),
-          dLive.getMonth() + 1,
-          dLive.getDate()
+          nextLive.getFullYear(),
+          nextLive.getMonth() + 1,
+          nextLive.getDate()
         );
         setEcViewYear(ecY);
         setEcViewMonth(ecM);
@@ -13304,7 +13354,7 @@ function useDateTimePicker(props) {
     [live, now, updatePreferredSide, setOpen]
   );
   function handlePresetClick(preset) {
-    const d = preset.value;
+    const d = clampToDateTimeRange(preset.value, minDateTime, maxDateTime);
     if (!live) {
       setDraft(new Date(d));
       setTimeHState(pad2(d.getHours()));
@@ -13360,6 +13410,7 @@ function useDateTimePicker(props) {
     decadeStart,
     activeViewYear,
     headerLabel,
+    isDayDisabled,
     handleDayClick,
     handleMonthSelect,
     handleYearSelect,
@@ -13450,6 +13501,7 @@ var DateTimePicker = forwardRef7(function DateTimePicker2(props, ref) {
           onNext: state2.handleNext,
           onHeaderClick: state2.handleHeaderClick,
           onDayClick: state2.handleDayClick,
+          isDayDisabled: state2.isDayDisabled,
           onMonthSelect: state2.handleMonthSelect,
           onYearSelect: state2.handleYearSelect,
           onCalendarTypeChange: state2.handleCalendarTypeChange,
@@ -13806,12 +13858,55 @@ function to24h(h12, amPm) {
   }
   return h12 === 12 ? 12 : h12 + 12;
 }
+function parseTimeString(str) {
+  const parts = str.trim().split(":");
+  if (parts.length < 2) {
+    return null;
+  }
+  const h = Number.parseInt(parts[0], 10);
+  const m = Number.parseInt(parts[1], 10);
+  const s = parts[2] ? Number.parseInt(parts[2], 10) : 0;
+  if (Number.isNaN(h) || Number.isNaN(m) || Number.isNaN(s)) {
+    return null;
+  }
+  return { h, m, s };
+}
+function toSeconds(d) {
+  return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
+}
+function clampToTimeRange(date, min, max) {
+  const minParsed = min ? parseTimeString(min) : null;
+  const maxParsed = max ? parseTimeString(max) : null;
+  if (minParsed && maxParsed && minParsed.h * 3600 + minParsed.m * 60 + minParsed.s > maxParsed.h * 3600 + maxParsed.m * 60 + maxParsed.s) {
+    return date;
+  }
+  const current = toSeconds(date);
+  if (minParsed) {
+    const minSec = minParsed.h * 3600 + minParsed.m * 60 + minParsed.s;
+    if (current < minSec) {
+      const d = new Date(date);
+      d.setHours(minParsed.h, minParsed.m, minParsed.s, 0);
+      return d;
+    }
+  }
+  if (maxParsed) {
+    const maxSec = maxParsed.h * 3600 + maxParsed.m * 60 + maxParsed.s;
+    if (current > maxSec) {
+      const d = new Date(date);
+      d.setHours(maxParsed.h, maxParsed.m, maxParsed.s, 0);
+      return d;
+    }
+  }
+  return date;
+}
 var TimeInput = forwardRef8(
   function TimeInput2({
     value,
     onChange,
     withSeconds = false,
     format = "24h",
+    min,
+    max,
     disabled = false,
     baseDate = /* @__PURE__ */ new Date(),
     leftSection,
@@ -13872,9 +13967,9 @@ var TimeInput = forwardRef8(
         const hour24 = is12h ? to24h(h12Raw === 0 ? 12 : h12Raw, ap) : Number.parseInt(clampAndPad(hh, 23), 10);
         const d = new Date(base);
         d.setHours(hour24, Number.parseInt(nm, 10), Number.parseInt(ns, 10), 0);
-        onChange?.(d);
+        onChange?.(clampToTimeRange(d, min, max));
       },
-      [base, onChange, withSeconds, is12h]
+      [base, onChange, withSeconds, is12h, min, max]
     );
     const handleBlur = useCallback13(() => {
       setFocus(null);
@@ -13917,9 +14012,9 @@ var TimeInput = forwardRef8(
           Number.parseInt(ss, 10),
           0
         );
-        onChange?.(d);
+        onChange?.(clampToTimeRange(d, min, max));
       },
-      [base, onChange]
+      [base, onChange, min, max]
     );
     const fieldset = /* @__PURE__ */ jsxs70(
       "fieldset",
@@ -14071,7 +14166,7 @@ function to12h3(hour24) {
   }
   return { h: hour24 - 12, amPm: "PM" };
 }
-function parseTimeString(str) {
+function parseTimeString2(str) {
   const parts = str.trim().split(":");
   if (parts.length < 2) {
     return null;
@@ -14099,7 +14194,7 @@ function TimeValue({
     m = value.getMinutes();
     s = value.getSeconds();
   } else {
-    const parsed = parseTimeString(value);
+    const parsed = parseTimeString2(value);
     if (!parsed) {
       return /* @__PURE__ */ jsx108("span", { className, children: "--:--" });
     }
@@ -15584,7 +15679,7 @@ function to24h2(h12, amPm) {
   }
   return h12 === 12 ? 12 : h12 + 12;
 }
-function parseTimeString2(str) {
+function parseTimeString3(str) {
   const parts = str.trim().split(":");
   if (parts.length < 2) {
     return null;
@@ -15710,7 +15805,7 @@ function useTimePicker(props) {
     }
     const mins = d.getHours() * 60 + d.getMinutes() + d.getSeconds() / 60;
     if (min) {
-      const p = parseTimeString2(min);
+      const p = parseTimeString3(min);
       if (p) {
         const minMins = p.h * 60 + p.m + p.s / 60;
         if (mins < minMins) {
@@ -15719,7 +15814,7 @@ function useTimePicker(props) {
       }
     }
     if (max) {
-      const p = parseTimeString2(max);
+      const p = parseTimeString3(max);
       if (p) {
         const maxMins = p.h * 60 + p.m + p.s / 60;
         if (mins > maxMins) {
@@ -15877,7 +15972,7 @@ function useTimePicker(props) {
     }
   }
   function handlePresetClick(presetStr) {
-    const p = parseTimeString2(presetStr);
+    const p = parseTimeString3(presetStr);
     if (!p) {
       return;
     }
@@ -20956,12 +21051,14 @@ function FilePreviewSurface({
     ) });
   }
   if (item.url && item.type.includes("pdf")) {
+    const pdfUrl = item.url.includes("#") ? `${item.url}&toolbar=0&navpanes=0&scrollbar=0` : `${item.url}#toolbar=0&navpanes=0&scrollbar=0`;
     return /* @__PURE__ */ jsx152("div", { className, children: /* @__PURE__ */ jsx152(
       "iframe",
       {
-        src: item.url,
+        src: pdfUrl,
         title: item.name,
-        className: "size-full",
+        className: "size-full overflow-hidden",
+        scrolling: "no",
         loading: "lazy"
       }
     ) });
@@ -21288,7 +21385,7 @@ function FileInput({
   defaultFiles = [],
   previewItems = [],
   leftSection,
-  placeholder = "Pick a file",
+  placeholder = "Select a file",
   cropAspect = 1,
   editImageOnSelect = true,
   imageOutputScale = 0.7,