@multiplatform.one/forms 6.7.0 → 7.1.0

package/dist/cjs/fields/DatePicker/DatetimePicker.cjs

@@ -29,9 +29,7 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_utils = require("./utils.cjs");
 var import_fieldValueSync = require("./fieldValueSync.cjs");
-var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
 var import_tamagui = require("tamagui");
-var import_Button = require("../../Button/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
@@ -42,10 +40,6 @@ var import_InputParts = require("../../InputParts/index.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_parts = require("./parts.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const suppressBoxFocusRing = {
-  focused: false,
-  setFocused: _val => {}
-};
 function parseTimeFromDate(date) {
   return {
     h: date.getHours(),
@@ -55,19 +49,11 @@ function parseTimeFromDate(date) {
 }
 function formatDatetimeDisplay(date, timeFormat, showSeconds) {
   if (!date) return "";
-  const dateStr = (0, import_theme.formatAbsoluteDate)(date, {
-    year: "always"
+  return (0, import_theme.formatAbsoluteDateTime)(date, {
+    year: "always",
+    hour12: timeFormat === "12h",
+    seconds: showSeconds
   });
-  const h = date.getHours();
-  const m = date.getMinutes();
-  const s = date.getSeconds();
-  const secSuffix = showSeconds ? `:${String(s).padStart(2, "0")}` : "";
-  if (timeFormat === "24h") {
-    return `${dateStr} ${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}${secSuffix}`;
-  }
-  const period = h >= 12 ? "PM" : "AM";
-  const displayH = h === 0 ? 12 : h > 12 ? h - 12 : h;
-  return `${dateStr} ${displayH}:${String(m).padStart(2, "0")}${secSuffix} ${period}`;
 }
 const hours24 = (0, import_TimeColumn.generateRange)(0, 23);
 const hours12 = (0, import_TimeColumn.generateRange)(1, 12);
@@ -79,73 +65,14 @@ function DayGrid({
   minDate,
   maxDate
 }) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const accentText = (0, import_theme.useAccentOnSurface)();
-  const {
-    animation,
-    animationKey
-  } = (0, import_parts.useDateAnimation)(`${calendarData.year}-${calendarData.month}`);
-  const weeks = (0, import_parts.toWeeks)(calendarData.days);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      width: "100%",
-      ...knobProps.gap,
-      transition: "medium",
-      ...animation,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.WeekView, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        flexDirection: "column",
-        gap: "$1",
-        width: "100%",
-        children: weeks.map(week => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-          flexDirection: "row",
-          gap: "$1",
-          justifyContent: "space-between",
-          width: "100%",
-          children: week.map(day => {
-            const isCurrentMonth = day.getMonth() === calendarData.month;
-            const isSelected = (0, import_parts.isSameDay)(selectedDate, day);
-            const isToday = (0, import_parts.isSameDay)(calendarData.today, day);
-            const isOutOfRange = minDate != null && day < minDate || maxDate != null && day > maxDate;
-            const isDisabled = !isCurrentMonth || isOutOfRange;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-              chromeless: true,
-              circular: true,
-              ...(0, import_parts.dayCellRadius)(knobProps),
-              flex: 1,
-              size: knobProps.sizeToken,
-              disabled: isDisabled,
-              onPress: () => !isDisabled && onSelectDate(day),
-              backgroundColor: isSelected ? "$background" : "transparent",
-              theme: isSelected ? "accent" : void 0,
-              opacity: isCurrentMonth ? 1 : 0,
-              pointerEvents: isCurrentMonth ? "auto" : "none",
-              borderWidth: knobProps.borderRadius.borderWidth || 1,
-              borderColor: isSelected ? "$backgroundStrong" : "transparent",
-              children: isSelected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-                transition: "quick",
-                enterStyle: {
-                  opacity: 0,
-                  y: 20
-                },
-                exitStyle: {
-                  opacity: 0,
-                  y: 20
-                },
-                opacity: 1,
-                fontWeight: "bold",
-                children: day.getDate()
-              }, "text-selected") : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-                color: isToday ? accentText : isCurrentMonth ? import_colorRamps.formCommonColors.text : import_colorRamps.formCommonColors.muted,
-                children: day.getDate()
-              }, "text-normal")
-            }, day.toISOString());
-          })
-        }, week[0].toISOString()))
-      })]
-    })
-  }, animationKey);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarDays, {
+    calendarData,
+    minDate,
+    maxDate,
+    isSelected: day => (0, import_parts.isSameDay)(selectedDate, day),
+    onSelect: onSelectDate,
+    onToday: () => onSelectDate(/* @__PURE__ */new Date())
+  });
 }
 function TimeSection({
   selectedDate,
@@ -156,7 +83,7 @@ function TimeSection({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_parts.useCalendarKnobs)();
   const {
     h,
     m,
@@ -296,7 +223,10 @@ function DatetimePickerBody({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_parts.useCalendarKnobs)();
+  const {
+    px
+  } = knobProps.nestedControl;
   const [viewMode, setViewMode] = (0, import_react.useState)("day");
   const [activeTab, setActiveTab] = (0, import_react.useState)("date");
   const calendarData = (0, import_parts.useCalendarData)(displayDate);
@@ -315,29 +245,35 @@ function DatetimePickerBody({
     flexDirection: "column",
     alignItems: "center",
     ...knobProps.gap,
-    width: "100%",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    width: px * 7,
+    alignSelf: "center",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       flexDirection: "row",
-      gap: "$2",
       width: "100%",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        flex: 1,
-        chromeless: activeTab !== "date",
-        theme: activeTab === "date" ? "accent" : void 0,
-        onPress: () => setActiveTab("date"),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-          children: (0, import_t.t)("Date")
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        flex: 1,
-        chromeless: activeTab !== "time",
-        theme: activeTab === "time" ? "accent" : void 0,
-        onPress: () => setActiveTab("time"),
-        disabled: !selectedDatetime,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-          children: (0, import_t.t)("Time")
-        })
-      })]
+      children: ["date", "time"].map(tab => {
+        const active = activeTab === tab;
+        const tabDisabled = tab === "time" && !selectedDatetime;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          flex: 1,
+          height: px,
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: tabDisabled ? "default" : "pointer",
+          opacity: tabDisabled ? 0.5 : 1,
+          theme: active ? "accent" : void 0,
+          backgroundColor: active ? "$background" : "transparent",
+          onPress: () => {
+            if (!tabDisabled) setActiveTab(tab);
+          },
+          "data-nested-px": px,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            ...knobProps.textWeight,
+            fontWeight: active ? "600" : "400",
+            children: tab === "date" ? (0, import_t.t)("Date") : (0, import_t.t)("Time")
+          })
+        }, tab);
+      })
     }), activeTab === "date" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarViewSwitcher, {
       calendarData,
       displayDate,
@@ -346,12 +282,7 @@ function DatetimePickerBody({
       setViewMode,
       yearPageStart,
       setYearPageStart,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-        flexDirection: "column",
-        alignItems: "center",
-        ...knobProps.gapLg,
-        width: "100%",
-        ...knobProps.panelPadding,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_parts.CalendarPanelFrame, {
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarHeader, {
           year: calendarData.year,
           monthName: calendarData.monthName,
@@ -418,7 +349,6 @@ function DatetimePicker(props) {
   const {
     resolvedForm,
     knobProps,
-    control,
     id
   } = (0, import_utils2.useFormField)({
     form,
@@ -426,10 +356,6 @@ function DatetimePicker(props) {
     compact
   });
   const resolvedValidators = (0, import_utils2.useResolvedValidators)(required, validators, label, name);
-  const areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2
-  });
   const [open, setOpen] = (0, import_react.useState)(false);
   const [selectedDatetime, setSelectedDatetime] = (0, import_react.useState)(() => (0, import_utils.coerceToDate)(controlledValue ?? defaultValue));
   (0, import_react.useEffect)(() => {
@@ -482,71 +408,31 @@ function DatetimePicker(props) {
     minuteStep,
     showSeconds
   });
-  const renderTrigger = (value, hasError, fieldChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    cursor: "pointer",
-    onPress: disabled ? void 0 : openPicker,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
-      theme: hasError ? "red" : void 0,
-      elevation: void 0,
-      ...(disabled ? {
-        opacity: 0.5,
-        pointerEvents: "none"
-      } : void 0),
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-          ...suppressBoxFocusRing,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-            readOnly: true,
-            value,
-            placeholder,
-            disabled,
-            color: import_colorRamps.formCommonColors.text,
-            focusStyle: areaFocusRing,
-            focusVisibleStyle: areaFocusRing,
-            "aria-required": required || void 0,
-            "aria-invalid": hasError || void 0,
-            onKeyPress: disabled ? void 0 : e => {
-              const key = e?.nativeEvent?.key ?? e?.key;
-              if (key === "Enter" || key === " " || key === "Spacebar") {
-                e?.preventDefault?.();
-                openPicker();
-              }
-            },
-            ...inputProps
-          })
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-        children: value ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
-          "aria-label": (0, import_t.t)("Clear date"),
-          onPress: e => {
-            e.stopPropagation();
-            handleClearDatetime(fieldChange);
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.X, {})
-          })
-        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-          adornment: "trailing",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_lucide_icons_2.Calendar, {})
-        })
-      })]
-    })
+  const renderTrigger = (value, hasError, fieldChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.DatePickerInputTrigger, {
+    value,
+    placeholder,
+    disabled,
+    open,
+    onReset: () => handleClearDatetime(fieldChange),
+    onButtonPress: openPicker,
+    error: !!hasError,
+    id,
+    "aria-label": label ? void 0 : (0, import_t.t)("Date and time"),
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0
   });
   const renderPopover = (hasError, blurHandler, fieldChange) => {
     if (readOnly) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-          ...suppressBoxFocusRing,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-            value: displayValue,
-            readOnly: true,
-            "aria-readonly": "true",
-            "aria-required": required || void 0,
-            "aria-invalid": hasError || void 0,
-            focusStyle: areaFocusRing,
-            focusVisibleStyle: areaFocusRing,
-            placeholder
-          })
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+          value: displayValue,
+          readOnly: true,
+          id,
+          "aria-label": label ? void 0 : (0, import_t.t)("Date and time"),
+          "aria-readonly": "true",
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0,
+          placeholder
         })
       });
     }
@@ -561,7 +447,7 @@ function DatetimePicker(props) {
       trigger: renderTrigger(displayValue, hasError, fieldChange),
       disabled,
       scrollable: true,
-      sizing: "fill",
+      sizing: "grow",
       fitContent: true,
       children: pickerContent(fieldChange)
     });