@scripso-homepad/ui 0.4.30 → 0.4.33

package/dist/index.cjs

@@ -2292,7 +2292,7 @@ var CALENDAR_NAV_ICON_COLOR = colors.stormGray850;
 var CALENDAR_FIELD_ICON_SIZE = 20;
 var CALENDAR_FIELD_WIDTH = CALENDAR_PANEL_WIDTH;
 var CALENDAR_FIELD_HEIGHT = 52;
-var CALENDAR_FIELD_PADDING = spacing.lg;
+var CALENDAR_FIELD_PADDING = 14;
 var CALENDAR_FIELD_GAP = spacing.sm;
 var CALENDAR_FIELD_PLACEHOLDER_COLOR = colors.stormGray200;
 var CALENDAR_PANEL_TOTAL_HEIGHT = CALENDAR_PANEL_PADDING * 2 + CALENDAR_HEADER_HEIGHT + CALENDAR_PANEL_GAP * 2 + CALENDAR_WEEKDAY_CELL_SIZE + CALENDAR_DAY_GRID_HEIGHT;
@@ -2420,7 +2420,7 @@ var calendarDropdownMetrics = reactNative.StyleSheet.create({
       boxSizing: "border-box"
     } : null
   },
-  dayCellPast: {
+  dayCellDisabled: {
     backgroundColor: colors.stormGray50
   },
   dayCellSelected: {
@@ -2454,19 +2454,20 @@ var calendarDropdownMetrics = reactNative.StyleSheet.create({
     color: colors.stormGray300
   },
   dayLabelDisabled: {
-    color: colors.stormGray300,
-    opacity: 0.5
+    color: colors.stormGray300
   },
-  todayDot: {
+  todayDotWrap: {
     position: "absolute",
-    bottom: 5,
-    left: "50%",
+    bottom: 4,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  },
+  todayDot: {
     width: CALENDAR_DAY_DOT_SIZE,
     height: CALENDAR_DAY_DOT_SIZE,
-    borderRadius: 15,
-    backgroundColor: CALENDAR_TODAY_DOT_COLOR,
-    marginLeft: -1.5,
-    zIndex: 1
+    borderRadius: CALENDAR_DAY_DOT_SIZE / 2,
+    backgroundColor: CALENDAR_TODAY_DOT_COLOR
   },
   pickerBody: {
     width: CALENDAR_DAY_GRID_WIDTH,
@@ -2542,6 +2543,10 @@ function resolveCalendarDropdownLeft(anchor, panelWidth = CALENDAR_PANEL_WIDTH)
   const maxLeft = Math.max(0, windowWidth - panelWidth);
   return Math.max(0, Math.min(anchor.x, maxLeft));
 }
+function resolveCalendarDropdownLeftCentered(panelWidth = CALENDAR_PANEL_WIDTH) {
+  const windowWidth = reactNative.Dimensions.get("window").width;
+  return Math.max(0, (windowWidth - panelWidth) / 2);
+}
 var calendarFieldMetrics = reactNative.StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -2567,7 +2572,8 @@ var calendarFieldMetrics = reactNative.StyleSheet.create({
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
-    ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
+    includeFontPadding: false,
+    ...reactNative.Platform.OS === "android" ? { textAlignVertical: "center" } : null,
     ...reactNative.Platform.OS === "web" ? {
       outlineStyle: "none"
     } : null
@@ -2954,21 +2960,15 @@ function useCalendarLocale(locale) {
   );
 }
 function resolveDayCellStyle(day) {
-  if (day.isDisabled) {
-    return [calendarDropdownMetrics.dayCell];
-  }
   if (day.isSelected) {
     return [calendarDropdownMetrics.dayCell, calendarDropdownMetrics.dayCellSelected];
   }
   return [
     calendarDropdownMetrics.dayCell,
-    day.inCurrentMonth && day.isPast && !day.isToday ? calendarDropdownMetrics.dayCellPast : null
+    day.isDisabled ? calendarDropdownMetrics.dayCellDisabled : null
   ];
 }
 function resolveDayLabelStyle(day) {
-  if (day.isDisabled) {
-    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelDisabled];
-  }
   if (day.isSelected) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelSelected];
   }
@@ -2978,7 +2978,7 @@ function resolveDayLabelStyle(day) {
   if (day.isToday) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
   }
-  if (day.isPast) {
+  if (day.isDisabled) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
   }
   return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelFuture];
@@ -3169,7 +3169,7 @@ function Calendar(props) {
           style: resolveDayCellStyle(day),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: resolveDayLabelStyle(day), children: day.date.getDate() }),
-            day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.todayDot }) : null
+            day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.todayDotWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.todayDot }) }) : null
           ]
         },
         day.date.toISOString()
@@ -3256,6 +3256,7 @@ function CalendarIcon({
     }
   ) });
 }
+var isDesktopCalendar = reactNative.Platform.OS === "web";
 function DatePicker(props) {
   const {
     label,
@@ -3338,9 +3339,8 @@ function DatePicker(props) {
   };
   const helperMessage = error ?? hint;
   const panelWidth = CALENDAR_PANEL_WIDTH;
-  const panelLeft = anchor ? resolveCalendarDropdownLeft(anchor, panelWidth) : 0;
+  const panelLeft = anchor ? isDesktopCalendar ? resolveCalendarDropdownLeft(anchor, panelWidth) : resolveCalendarDropdownLeftCentered(panelWidth) : 0;
   const dropdownTop = anchor ? resolveCalendarDropdownTop(anchor) : 0;
-  const resolvedDefaultViewDate = defaultViewDate ?? (props.mode === "range" ? props.value?.start : props.value) ?? today;
   function closePicker() {
     setOpen(false);
     setAnchor(null);
@@ -3354,6 +3354,7 @@ function DatePicker(props) {
       setOpen(true);
     });
   }
+  const resolvedDefaultViewDate = defaultViewDate ?? (props.mode === "range" ? props.value?.start : props.value) ?? today;
   function handleSingleSelect(date) {
     if (props.mode === "range") {
       return;