@scripso-homepad/ui 0.4.30 → 0.4.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.30",
+  "version": "0.4.33",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/Calendar.tsx

@@ -77,27 +77,17 @@ export type CalendarRangeProps = CalendarBaseProps & {
 export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
 
 function resolveDayCellStyle(day: CalendarDayCell): StyleProp<ViewStyle> {
-  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: CalendarDayCell): StyleProp<TextStyle> {
-  if (day.isDisabled) {
-    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelDisabled];
-  }
-
   if (day.isSelected) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelSelected];
   }
@@ -110,7 +100,7 @@ function resolveDayLabelStyle(day: CalendarDayCell): StyleProp<TextStyle> {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
   }
 
-  if (day.isPast) {
+  if (day.isDisabled) {
     return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
   }
 
@@ -364,7 +354,9 @@ export function Calendar(props: CalendarProps) {
               >
                 <Text style={resolveDayLabelStyle(day)}>{day.date.getDate()}</Text>
                 {day.isToday && day.inCurrentMonth && !day.isSelected ? (
-                  <View style={calendarDropdownMetrics.todayDot} />
+                  <View style={calendarDropdownMetrics.todayDotWrap}>
+                    <View style={calendarDropdownMetrics.todayDot} />
+                  </View>
                 ) : null}
               </Pressable>
             ))}

package/src/components/DatePicker.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type ComponentRef } from "react";
 import {
   Modal,
+  Platform,
   Pressable,
   StyleSheet,
   Text,
@@ -19,6 +20,7 @@ import {
   calendarFieldTypography,
   calendarLabelTypography,
   resolveCalendarDropdownLeft,
+  resolveCalendarDropdownLeftCentered,
   resolveCalendarDropdownTop,
 } from "../theme/calendar";
 import { getSelectFieldStyles, resolveInputVisualState, SELECT_LABEL_GAP } from "../theme/select";
@@ -78,6 +80,8 @@ export type DatePickerRangeProps = Omit<CalendarRangeProps, "style" | "className
 
 export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
+const isDesktopCalendar = Platform.OS === "web";
+
 export function DatePicker(props: DatePickerProps) {
   const {
     label,
@@ -184,12 +188,12 @@ export function DatePicker(props: DatePickerProps) {
       };
   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);
@@ -207,6 +211,11 @@ export function DatePicker(props: DatePickerProps) {
     });
   }
 
+  const resolvedDefaultViewDate =
+    defaultViewDate ??
+    (props.mode === "range" ? props.value?.start : props.value) ??
+    today;
+
   function handleSingleSelect(date: Date | undefined) {
     if (props.mode === "range") {
       return;

package/src/theme/calendar.ts

@@ -35,7 +35,7 @@ export const CALENDAR_NAV_ICON_COLOR = colors.stormGray850;
 export const CALENDAR_FIELD_ICON_SIZE = 20;
 export const CALENDAR_FIELD_WIDTH = CALENDAR_PANEL_WIDTH;
 export const CALENDAR_FIELD_HEIGHT = 52;
-export const CALENDAR_FIELD_PADDING = spacing.lg;
+export const CALENDAR_FIELD_PADDING = 14;
 export const CALENDAR_FIELD_GAP = spacing.sm;
 export const CALENDAR_FIELD_PLACEHOLDER_COLOR = colors.stormGray200;
 
@@ -182,7 +182,7 @@ export const calendarDropdownMetrics = StyleSheet.create({
         } as ViewStyle)
       : null),
   },
-  dayCellPast: {
+  dayCellDisabled: {
     backgroundColor: colors.stormGray50,
   },
   dayCellSelected: {
@@ -217,18 +217,19 @@ export const calendarDropdownMetrics = StyleSheet.create({
   },
   dayLabelDisabled: {
     color: colors.stormGray300,
-    opacity: 0.5,
   },
-  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,
+    borderRadius: CALENDAR_DAY_DOT_SIZE / 2,
     backgroundColor: CALENDAR_TODAY_DOT_COLOR,
-    marginLeft: -(CALENDAR_DAY_DOT_SIZE / 2),
-    zIndex: 1,
   },
   pickerBody: {
     width: CALENDAR_DAY_GRID_WIDTH,
@@ -320,6 +321,14 @@ export function resolveCalendarDropdownLeft(
   return Math.max(0, Math.min(anchor.x, maxLeft));
 }
 
+export function resolveCalendarDropdownLeftCentered(
+  panelWidth: number = CALENDAR_PANEL_WIDTH,
+): number {
+  const windowWidth = Dimensions.get("window").width;
+
+  return Math.max(0, (windowWidth - panelWidth) / 2);
+}
+
 export const calendarFieldMetrics = StyleSheet.create({
   container: {
     flexDirection: "row",
@@ -347,7 +356,8 @@ export const calendarFieldMetrics = StyleSheet.create({
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
-    ...(Platform.OS === "android" ? { includeFontPadding: false } : null),
+    includeFontPadding: false,
+    ...(Platform.OS === "android" ? { textAlignVertical: "center" as const } : null),
     ...(Platform.OS === "web"
       ? ({
           outlineStyle: "none",