@multiplatform.one/forms 6.6.0 → 7.0.0

package/dist/cjs/fields/DatePicker/Calendar.cjs

@@ -26,9 +26,7 @@ __export(Calendar_exports, {
 });
 module.exports = __toCommonJS(Calendar_exports);
 var import_react = require("react");
-var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
-var import_Button = require("../../Button/index.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_parts = require("./parts.cjs");
@@ -51,119 +49,55 @@ function CalendarDayGrid({
   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 => {
-          const hasCurrentMonthDay = week.some(d => d.getMonth() === calendarData.month);
-          if (!hasCurrentMonthDay) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            height: "$3"
-          }, week[0].toISOString());
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            flexDirection: "row",
-            justifyContent: "space-between",
-            width: "100%",
-            children: week.map(day => {
-              const isCurrentMonth = day.getMonth() === calendarData.month;
-              const isToday = (0, import_parts.isSameDay)(calendarData.today, day);
-              const isOutOfRange = minDate != null && day < minDate || maxDate != null && day > maxDate;
-              const isDisabled = !isCurrentMonth || isOutOfRange;
-              if (!isCurrentMonth) {
-                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                  flex: 1,
-                  width: "100%"
-                }, day.toISOString());
-              }
-              const isSelected = mode === "range" ? (() => {
-                const status = getRangeStatus(day, selectedDates);
-                return status === "range-start" || status === "range-end" || status === "selected-single";
-              })() : selectedDates.some(date => (0, import_parts.isSameDay)(date, day));
-              const rangeStatus = mode === "range" ? getRangeStatus(day, selectedDates) : "none";
-              const isInRange = rangeStatus === "in-range";
-              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-                flex: 1,
-                width: "100%",
-                justifyContent: "center",
-                alignItems: "center",
-                position: "relative",
-                children: [mode === "range" && (isInRange || rangeStatus === "range-start" || rangeStatus === "range-end") && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                  transition: "quick",
-                  position: "absolute",
-                  height: "100%",
-                  zIndex: 0,
-                  backgroundColor: import_colorRamps.formInputColors.background.focus,
-                  enterStyle: {
-                    opacity: 0
-                  },
-                  exitStyle: {
-                    opacity: 0
-                  },
-                  opacity: 1,
-                  ...(rangeStatus === "range-start" ? {
-                    insetInlineStart: "50%",
-                    insetInlineEnd: 0,
-                    width: "50%"
-                  } : rangeStatus === "range-end" ? {
-                    insetInlineStart: 0,
-                    insetInlineEnd: "50%",
-                    width: "50%"
-                  } : {
-                    insetInlineStart: 0,
-                    insetInlineEnd: 0,
-                    width: "100%"
-                  })
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-                  chromeless: true,
-                  circular: true,
-                  ...(0, import_parts.dayCellRadius)(knobProps),
-                  disabled: isDisabled,
-                  onPress: () => !isDisabled && onDayPress(day),
-                  theme: isSelected ? "accent" : void 0,
-                  borderWidth: knobProps.borderRadius.borderWidth || 1,
-                  borderColor: isSelected ? "$backgroundStrong" : "transparent",
-                  backgroundColor: isSelected ? import_colorRamps.formInputColors.background.focus : "transparent",
-                  zIndex: 1,
-                  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 : import_colorRamps.formCommonColors.text,
-                    children: day.getDate()
-                  }, "text-normal")
-                })]
-              }, day.toISOString());
-            })
-          }, week[0].toISOString());
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarDays, {
+    calendarData,
+    minDate,
+    maxDate,
+    skipEmptyWeeks: true,
+    isSelected: day => {
+      if (mode === "range") {
+        const status = getRangeStatus(day, selectedDates);
+        return status === "range-start" || status === "range-end" || status === "selected-single";
+      }
+      return selectedDates.some(date => (0, import_parts.isSameDay)(date, day));
+    },
+    onSelect: onDayPress,
+    selectedBackground: import_colorRamps.formInputColors.background.focus,
+    onToday: () => onDayPress(/* @__PURE__ */new Date()),
+    rangeStripe: mode === "range" ? day => {
+      const rangeStatus = getRangeStatus(day, selectedDates);
+      if (rangeStatus !== "in-range" && rangeStatus !== "range-start" && rangeStatus !== "range-end") {
+        return null;
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        transition: "quick",
+        position: "absolute",
+        height: "100%",
+        zIndex: 0,
+        backgroundColor: import_colorRamps.formInputColors.background.focus,
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        },
+        opacity: 1,
+        ...(rangeStatus === "range-start" ? {
+          insetInlineStart: "50%",
+          insetInlineEnd: 0,
+          width: "50%"
+        } : rangeStatus === "range-end" ? {
+          insetInlineStart: 0,
+          insetInlineEnd: "50%",
+          width: "50%"
+        } : {
+          insetInlineStart: 0,
+          insetInlineEnd: 0,
+          width: "100%"
         })
-      })]
-    })
-  }, animationKey);
+      });
+    } : void 0
+  });
 }
 function CalendarPanel({
   displayDate,
@@ -188,11 +122,7 @@ function CalendarPanel({
     setViewMode,
     yearPageStart,
     setYearPageStart,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      flexDirection: "column",
-      alignItems: "center",
-      gap: "$4",
-      width: "100%",
+    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,
@@ -227,7 +157,10 @@ function Calendar({
 }) {
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_parts.useCalendarKnobs)();
+  const {
+    px
+  } = knobProps.nestedControl;
   const [internalMode, setInternalMode] = (0, import_react.useState)(modeProp ?? "range");
   const mode = modeProp ?? internalMode;
   const [internalDates, setInternalDates] = (0, import_react.useState)([]);
@@ -294,40 +227,42 @@ function Calendar({
     date.setMonth(date.getMonth() - 1);
     return date;
   }, [displayDate]);
-  const [viewMode, setViewMode] = (0, import_react.useState)("day");
-  const calendarData = (0, import_parts.useCalendarData)(displayDate);
-  const [yearPageStart, setYearPageStart] = (0, import_react.useState)(() => calendarData.year - calendarData.year % import_parts.yearPageSize);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.gapLg,
+    ...knobProps.gap,
     children: [showTabs && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       alignSelf: "center",
+      width: px * 7,
       ...knobProps.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth || 1,
       borderColor: import_colorRamps.formCommonColors.divider,
       backgroundColor: "$backgroundStrong",
       padding: 2,
-      children: ["range", "single", "multiple"].map(m => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: knobProps.sizeToken,
-        chromeless: true,
+      children: ["range", "single", "multiple"].map(m => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         flex: 1,
+        height: px,
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
         theme: mode === m ? "accent" : void 0,
         backgroundColor: mode === m ? "$background" : "transparent",
         onPress: () => handleModeChange(m),
+        "data-nested-px": px,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          ...knobProps.body,
+          ...knobProps.label,
+          ...knobProps.textWeight,
+          fontWeight: mode === m ? "600" : "400",
           children: m === "range" ? (0, import_t.t)("Range") : m === "single" ? (0, import_t.t)("Single") : (0, import_t.t)("Multiple")
         })
       }, m))
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       backgroundColor: "$background",
       flexDirection: "row",
-      ...knobProps.gapLg,
+      ...knobProps.gap,
       ...knobProps.panelPadding,
       ...knobProps.borderRadiusOuter,
       borderWidth: knobProps.borderRadius.borderWidth || 1,
       borderColor: import_colorRamps.formCommonColors.divider,
-      children: [viewMode === "day" && !fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarPanel, {
+      children: [!fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarPanel, {
         displayDate,
         selectedDates,
         onDayPress: handleDayPress,
@@ -336,7 +271,7 @@ function Calendar({
         mode,
         minDate,
         maxDate
-      }), viewMode === "day" && fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      }), fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarPanel, {
           displayDate: prevMonthDate,
           selectedDates,
@@ -360,44 +295,6 @@ function Calendar({
           maxDate,
           showPrev: false
         })]
-      }), viewMode === "month" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-        flexDirection: "column",
-        alignItems: "center",
-        ...knobProps.gapLg,
-        width: "100%",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          alignSelf: "center",
-          ...knobProps.body,
-          ...knobProps.textWeight,
-          children: "Select a month"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.MonthGrid, {
-          currentYear: calendarData.year,
-          selectedMonth: calendarData.month,
-          onSelectMonth: month => {
-            const newDate = new Date(displayDate);
-            newDate.setMonth(month);
-            setDisplayDate(newDate);
-            setViewMode("day");
-          }
-        })]
-      }), viewMode === "year" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        flexDirection: "column",
-        alignItems: "center",
-        ...knobProps.gapLg,
-        width: "100%",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.YearGrid, {
-          yearPageStart,
-          selectedYear: calendarData.year,
-          onSelectYear: year => {
-            const newDate = new Date(displayDate);
-            newDate.setFullYear(year);
-            setDisplayDate(newDate);
-            setViewMode("month");
-          },
-          onPrevPage: () => setYearPageStart(s => s - import_parts.yearPageSize),
-          onNextPage: () => setYearPageStart(s => s + import_parts.yearPageSize)
-        })
       })]
     })]
   });

package/dist/cjs/fields/DatePicker/Calendar.native.js

@@ -29,9 +29,7 @@ __export(Calendar_exports, {
 module.exports = __toCommonJS(Calendar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
-var import_Button = require("../../Button/index.native.js");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
 var import_parts = require("./parts.native.js");
@@ -54,126 +52,59 @@ function CalendarDayGrid(param) {
     minDate,
     maxDate
   } = param;
-  var {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  var accentText = (0, import_theme.useAccentOnSurface)();
-  var {
-    animation,
-    animationKey
-  } = (0, import_parts.useDateAnimation)(`${calendarData.year}-${calendarData.month}`);
-  var 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(function (week) {
-          var hasCurrentMonthDay = week.some(function (d) {
-            return d.getMonth() === calendarData.month;
-          });
-          if (!hasCurrentMonthDay) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            height: "$3"
-          }, week[0].toISOString());
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            flexDirection: "row",
-            justifyContent: "space-between",
-            width: "100%",
-            children: week.map(function (day) {
-              var isCurrentMonth = day.getMonth() === calendarData.month;
-              var isToday = (0, import_parts.isSameDay)(calendarData.today, day);
-              var isOutOfRange = minDate != null && day < minDate || maxDate != null && day > maxDate;
-              var isDisabled = !isCurrentMonth || isOutOfRange;
-              if (!isCurrentMonth) {
-                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                  flex: 1,
-                  width: "100%"
-                }, day.toISOString());
-              }
-              var isSelected = mode === "range" ? function () {
-                var status = getRangeStatus(day, selectedDates);
-                return status === "range-start" || status === "range-end" || status === "selected-single";
-              }() : selectedDates.some(function (date) {
-                return (0, import_parts.isSameDay)(date, day);
-              });
-              var rangeStatus = mode === "range" ? getRangeStatus(day, selectedDates) : "none";
-              var isInRange = rangeStatus === "in-range";
-              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-                flex: 1,
-                width: "100%",
-                justifyContent: "center",
-                alignItems: "center",
-                position: "relative",
-                children: [/* Range background stripe */
-                mode === "range" && (isInRange || rangeStatus === "range-start" || rangeStatus === "range-end") && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                  transition: "quick",
-                  position: "absolute",
-                  height: "100%",
-                  zIndex: 0,
-                  backgroundColor: import_colorRamps.formInputColors.background.focus,
-                  enterStyle: {
-                    opacity: 0
-                  },
-                  exitStyle: {
-                    opacity: 0
-                  },
-                  opacity: 1,
-                  ...(rangeStatus === "range-start" ? {
-                    insetInlineStart: "50%",
-                    insetInlineEnd: 0,
-                    width: "50%"
-                  } : rangeStatus === "range-end" ? {
-                    insetInlineStart: 0,
-                    insetInlineEnd: "50%",
-                    width: "50%"
-                  } : {
-                    insetInlineStart: 0,
-                    insetInlineEnd: 0,
-                    width: "100%"
-                  })
-                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-                  chromeless: true,
-                  circular: true,
-                  ...(0, import_parts.dayCellRadius)(knobProps),
-                  disabled: isDisabled,
-                  onPress: function onPress() {
-                    return !isDisabled && onDayPress(day);
-                  },
-                  theme: isSelected ? "accent" : void 0,
-                  borderWidth: knobProps.borderRadius.borderWidth || 1,
-                  borderColor: isSelected ? "$backgroundStrong" : "transparent",
-                  backgroundColor: isSelected ? import_colorRamps.formInputColors.background.focus : "transparent",
-                  zIndex: 1,
-                  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 : import_colorRamps.formCommonColors.text,
-                    children: day.getDate()
-                  }, "text-normal")
-                })]
-              }, day.toISOString());
-            })
-          }, week[0].toISOString());
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.CalendarDays, {
+    calendarData,
+    minDate,
+    maxDate,
+    skipEmptyWeeks: true,
+    isSelected: function isSelected(day) {
+      if (mode === "range") {
+        var status = getRangeStatus(day, selectedDates);
+        return status === "range-start" || status === "range-end" || status === "selected-single";
+      }
+      return selectedDates.some(function (date) {
+        return (0, import_parts.isSameDay)(date, day);
+      });
+    },
+    onSelect: onDayPress,
+    selectedBackground: import_colorRamps.formInputColors.background.focus,
+    onToday: function onToday() {
+      return onDayPress(/* @__PURE__ */new Date());
+    },
+    rangeStripe: mode === "range" ? function (day) {
+      var rangeStatus = getRangeStatus(day, selectedDates);
+      if (rangeStatus !== "in-range" && rangeStatus !== "range-start" && rangeStatus !== "range-end") {
+        return null;
+      }
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        transition: "quick",
+        position: "absolute",
+        height: "100%",
+        zIndex: 0,
+        backgroundColor: import_colorRamps.formInputColors.background.focus,
+        enterStyle: {
+          opacity: 0
+        },
+        exitStyle: {
+          opacity: 0
+        },
+        opacity: 1,
+        ...(rangeStatus === "range-start" ? {
+          insetInlineStart: "50%",
+          insetInlineEnd: 0,
+          width: "50%"
+        } : rangeStatus === "range-end" ? {
+          insetInlineStart: 0,
+          insetInlineEnd: "50%",
+          width: "50%"
+        } : {
+          insetInlineStart: 0,
+          insetInlineEnd: 0,
+          width: "100%"
         })
-      })]
-    })
-  }, animationKey);
+      });
+    } : void 0
+  });
 }
 function CalendarPanel(param) {
   var {
@@ -201,11 +132,7 @@ function CalendarPanel(param) {
     setViewMode,
     yearPageStart,
     setYearPageStart,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-      flexDirection: "column",
-      alignItems: "center",
-      gap: "$4",
-      width: "100%",
+    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,
@@ -247,7 +174,10 @@ function Calendar(param) {
   } = param;
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_parts.useCalendarKnobs)();
+  var {
+    px
+  } = knobProps.nestedControl;
   var [internalMode, setInternalMode] = (0, import_react.useState)(modeProp !== null && modeProp !== void 0 ? modeProp : "range");
   var mode = modeProp !== null && modeProp !== void 0 ? modeProp : internalMode;
   var [internalDates, setInternalDates] = (0, import_react.useState)([]);
@@ -322,37 +252,33 @@ function Calendar(param) {
     date.setMonth(date.getMonth() - 1);
     return date;
   }, [displayDate]);
-  var [viewMode, setViewMode] = (0, import_react.useState)("day");
-  var calendarData = (0, import_parts.useCalendarData)(displayDate);
-  var [yearPageStart, setYearPageStart] = (0, import_react.useState)(function () {
-    return calendarData.year - calendarData.year % import_parts.yearPageSize;
-  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.gapLg,
+    ...knobProps.gap,
     children: [showTabs && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       alignSelf: "center",
-      // Full control-tier fragment spread (AGENTS.md knob rule) so the
-      // cornerSmoothing class rides along with the radius; the pill's
-      // border chrome is ejected after the spread (owner-decided:
-      // divider hairline + min-1 width stay as designed).
+      width: px * 7,
       ...knobProps.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth || 1,
       borderColor: import_colorRamps.formCommonColors.divider,
       backgroundColor: "$backgroundStrong",
       padding: 2,
       children: ["range", "single", "multiple"].map(function (m) {
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-          size: knobProps.sizeToken,
-          chromeless: true,
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flex: 1,
+          height: px,
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
           theme: mode === m ? "accent" : void 0,
           backgroundColor: mode === m ? "$background" : "transparent",
           onPress: function onPress() {
             return handleModeChange(m);
           },
+          "data-nested-px": px,
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: knobProps.sizeToken,
-            ...knobProps.body,
+            ...knobProps.label,
+            ...knobProps.textWeight,
+            fontWeight: mode === m ? "600" : "400",
             children: m === "range" ? (0, import_t.t)("Range") : m === "single" ? (0, import_t.t)("Single") : (0, import_t.t)("Multiple")
           })
         }, m);
@@ -360,15 +286,12 @@ function Calendar(param) {
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       backgroundColor: "$background",
       flexDirection: "row",
-      ...knobProps.gapLg,
+      ...knobProps.gap,
       ...knobProps.panelPadding,
-      // Full fragment spread (AGENTS.md knob rule) so the cornerSmoothing
-      // class rides along with the outer radius; border chrome stays the
-      // calendar's own (divider hairline, min-1 width).
       ...knobProps.borderRadiusOuter,
       borderWidth: knobProps.borderRadius.borderWidth || 1,
       borderColor: import_colorRamps.formCommonColors.divider,
-      children: [viewMode === "day" && !fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarPanel, {
+      children: [!fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarPanel, {
         displayDate,
         selectedDates,
         onDayPress: handleDayPress,
@@ -377,7 +300,7 @@ function Calendar(param) {
         mode,
         minDate,
         maxDate
-      }), viewMode === "day" && fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      }), fullWidthMode && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CalendarPanel, {
           displayDate: prevMonthDate,
           selectedDates,
@@ -401,52 +324,6 @@ function Calendar(param) {
           maxDate,
           showPrev: false
         })]
-      }), viewMode === "month" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-        flexDirection: "column",
-        alignItems: "center",
-        ...knobProps.gapLg,
-        width: "100%",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: knobProps.sizeToken,
-          alignSelf: "center",
-          ...knobProps.body,
-          ...knobProps.textWeight,
-          children: "Select a month"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.MonthGrid, {
-          currentYear: calendarData.year,
-          selectedMonth: calendarData.month,
-          onSelectMonth: function onSelectMonth(month) {
-            var newDate = new Date(displayDate);
-            newDate.setMonth(month);
-            setDisplayDate(newDate);
-            setViewMode("day");
-          }
-        })]
-      }), viewMode === "year" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-        flexDirection: "column",
-        alignItems: "center",
-        ...knobProps.gapLg,
-        width: "100%",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_parts.YearGrid, {
-          yearPageStart,
-          selectedYear: calendarData.year,
-          onSelectYear: function onSelectYear(year) {
-            var newDate = new Date(displayDate);
-            newDate.setFullYear(year);
-            setDisplayDate(newDate);
-            setViewMode("month");
-          },
-          onPrevPage: function onPrevPage() {
-            return setYearPageStart(function (s) {
-              return s - import_parts.yearPageSize;
-            });
-          },
-          onNextPage: function onNextPage() {
-            return setYearPageStart(function (s) {
-              return s + import_parts.yearPageSize;
-            });
-          }
-        })
       })]
     })]
   });