@multiplatform.one/forms 8.2.2 → 8.4.0

package/dist/cjs/fields/DatePicker/parts.cjs

@@ -301,6 +301,7 @@ function CalendarDayCell({
     knobProps
   } = useCalendarKnobs();
   const accentText = (0, import_theme2.useAccentOnSurface)();
+  const onMark = (0, import_theme2.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   const {
     px,
     hitSlop,
@@ -330,8 +331,7 @@ function CalendarDayCell({
     },
     opacity: disabled ? 0.5 : dimmed ? 0.45 : 1,
     pointerEvents: disabled ? "none" : "auto",
-    backgroundColor: selected ? selectedBackground ?? "$background" : "transparent",
-    theme: selected ? "accent" : void 0,
+    backgroundColor: selected ? selectedBackground ?? import_colorRamps.formSelectedColors.mark : "transparent",
     borderWidth: showTodayMark ? 2 : 0,
     borderColor: showTodayMark ? accentText : "transparent",
     zIndex: 1,
@@ -360,7 +360,7 @@ function CalendarDayCell({
       ...knobProps.label,
       ...knobProps.textWeight,
       fontWeight: selected ? "bold" : knobProps.textWeight.fontWeight,
-      color: selected ? void 0 : today ? accentText : import_colorRamps.formCommonColors.text,
+      color: selected ? onMark : today ? accentText : import_colorRamps.formCommonColors.text,
       children: day.getDate()
     })
   });
@@ -569,6 +569,7 @@ function MonthGrid({
   const {
     knobProps
   } = useCalendarKnobs();
+  const onMark = (0, import_theme2.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   const {
     animation,
     animationKey
@@ -602,8 +603,7 @@ function MonthGrid({
           cursor: "pointer",
           alignItems: "center",
           justifyContent: "center",
-          theme: isSelected ? "accent" : void 0,
-          backgroundColor: isSelected ? "$background" : "transparent",
+          backgroundColor: isSelected ? import_colorRamps.formSelectedColors.mark : "transparent",
           onPress: () => onSelectMonth(index),
           outlineWidth: 0,
           focusStyle: {
@@ -624,7 +624,7 @@ function MonthGrid({
           }),
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             ...knobProps.label,
-            color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
+            color: isSelected ? onMark : import_colorRamps.formCommonColors.text,
             fontWeight: isSelected ? "bold" : "400",
             children: (0, import_t.t)(name.slice(0, 3))
           })
@@ -643,6 +643,7 @@ function YearGrid({
   const {
     knobProps
   } = useCalendarKnobs();
+  const onMark = (0, import_theme2.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   const glyphColor = (0, import_theme2.useGlyphColor)();
   const {
     px,
@@ -711,8 +712,7 @@ function YearGrid({
             cursor: "pointer",
             alignItems: "center",
             justifyContent: "center",
-            theme: isSelected ? "accent" : void 0,
-            backgroundColor: isSelected ? "$background" : "transparent",
+            backgroundColor: isSelected ? import_colorRamps.formSelectedColors.mark : "transparent",
             onPress: () => onSelectYear(year),
             outlineWidth: 0,
             focusStyle: {
@@ -733,7 +733,7 @@ function YearGrid({
             }),
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
               ...knobProps.label,
-              color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
+              color: isSelected ? onMark : import_colorRamps.formCommonColors.text,
               fontWeight: isSelected ? "bold" : "400",
               children: year
             })
@@ -743,6 +743,17 @@ function YearGrid({
     }, animationKey)]
   });
 }
+function TriggerGlyph({
+  glyph,
+  ...groupItem
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+    adornment: "trailing",
+    color: import_colorRamps.formCommonColors.muted,
+    ...groupItem,
+    children: glyph === "clock" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {})
+  });
+}
 function DatePickerClearButton({
   onReset,
   disabled,
@@ -786,7 +797,6 @@ function DatePickerInputTrigger({
       onReset();
     }
   };
-  const Glyph = glyph === "clock" ? import_react.ClockIcon : import_react.CalendarBlankIcon;
   return (
     // LC-40: the disabled Box below is pointerEvents-none, so the cursor
     // affordance must ride this wrapper — the fragment's not-allowed never
@@ -823,13 +833,6 @@ function DatePickerInputTrigger({
           onKeyDown: handleTriggerKey
         } : void 0),
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-          "data-testid": "date-picker-glyph",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-            adornment: "leading",
-            color: import_colorRamps.formCommonColors.muted,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Glyph, {})
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
             readOnly: true,
             pointerEvents: "none",
@@ -837,15 +840,19 @@ function DatePickerInputTrigger({
             value,
             placeholder,
             disabled,
-            color: import_colorRamps.formCommonColors.text,
-            placeholderTextColor: import_colorRamps.formCommonColors.muted
+            color: import_colorRamps.formCommonColors.text
           })
-        }), value && import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        }), value && import_tamagui.isWeb && !disabled ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatePickerClearButton, {
             onReset,
             disabled
           })
-        }) : null]
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+          "data-testid": "date-picker-glyph",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerGlyph, {
+            glyph
+          })
+        })]
       })
     })
   );
@@ -859,7 +866,6 @@ function DatePickerReadOnlyField({
   "aria-required": ariaRequired,
   "aria-invalid": ariaInvalid
 }) {
-  const Glyph = glyph === "clock" ? import_react.ClockIcon : import_react.CalendarBlankIcon;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexDirection: "row",
     alignItems: "center",
@@ -870,25 +876,22 @@ function DatePickerReadOnlyField({
       elevation: void 0,
       "data-testid": "date-picker-readonly",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-        "data-testid": "date-picker-glyph",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-          adornment: "leading",
-          color: import_colorRamps.formCommonColors.muted,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Glyph, {})
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
           readOnly: true,
           id,
           value,
           placeholder,
           color: import_colorRamps.formCommonColors.text,
-          placeholderTextColor: import_colorRamps.formCommonColors.muted,
           "aria-label": ariaLabel,
           "aria-readonly": "true",
           "aria-required": ariaRequired,
           "aria-invalid": ariaInvalid
         })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        "data-testid": "date-picker-glyph",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerGlyph, {
+          glyph
+        })
       })]
     })
   });

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

@@ -59,8 +59,8 @@ var import_react = require("@phosphor-icons/react");
 var import_theme2 = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
-var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
-var import_InputParts = require("../../InputParts/index.native.js");
+var import_FloatingPanel = require("../../FloatingPanel");
+var import_InputParts = require("../../InputParts");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
 var weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -312,6 +312,7 @@ function CalendarDayCell(param) {
     knobProps
   } = useCalendarKnobs();
   var accentText = (0, import_theme2.useAccentOnSurface)();
+  var onMark = (0, import_theme2.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   var {
     px,
     hitSlop,
@@ -347,8 +348,7 @@ function CalendarDayCell(param) {
     // identical to a choosable cell; we do not adopt that.
     opacity: disabled ? 0.5 : dimmed ? 0.45 : 1,
     pointerEvents: disabled ? "none" : "auto",
-    backgroundColor: selected ? selectedBackground !== null && selectedBackground !== void 0 ? selectedBackground : "$background" : "transparent",
-    theme: selected ? "accent" : void 0,
+    backgroundColor: selected ? selectedBackground !== null && selectedBackground !== void 0 ? selectedBackground : import_colorRamps.formSelectedColors.mark : "transparent",
     borderWidth: showTodayMark ? 2 : 0,
     borderColor: showTodayMark ? accentText : "transparent",
     zIndex: 1,
@@ -377,7 +377,7 @@ function CalendarDayCell(param) {
       ...knobProps.label,
       ...knobProps.textWeight,
       fontWeight: selected ? "bold" : knobProps.textWeight.fontWeight,
-      color: selected ? void 0 : today ? accentText : import_colorRamps.formCommonColors.text,
+      color: selected ? onMark : today ? accentText : import_colorRamps.formCommonColors.text,
       children: day.getDate()
     })
   });
@@ -613,6 +613,7 @@ function MonthGrid(param) {
   var {
     knobProps
   } = useCalendarKnobs();
+  var onMark = (0, import_theme2.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   var {
     animation,
     animationKey
@@ -646,8 +647,7 @@ function MonthGrid(param) {
           cursor: "pointer",
           alignItems: "center",
           justifyContent: "center",
-          theme: isSelected ? "accent" : void 0,
-          backgroundColor: isSelected ? "$background" : "transparent",
+          backgroundColor: isSelected ? import_colorRamps.formSelectedColors.mark : "transparent",
           onPress: function onPress() {
             return onSelectMonth(index);
           },
@@ -672,7 +672,7 @@ function MonthGrid(param) {
           }),
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             ...knobProps.label,
-            color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
+            color: isSelected ? onMark : import_colorRamps.formCommonColors.text,
             fontWeight: isSelected ? "bold" : "400",
             children: (0, import_t.t)(name.slice(0, 3))
           })
@@ -692,6 +692,7 @@ function YearGrid(param) {
   var {
     knobProps
   } = useCalendarKnobs();
+  var onMark = (0, import_theme2.useReadableTextOn)(import_colorRamps.formSelectedColors.mark);
   var glyphColor = (0, import_theme2.useGlyphColor)();
   var {
     px,
@@ -760,8 +761,7 @@ function YearGrid(param) {
             cursor: "pointer",
             alignItems: "center",
             justifyContent: "center",
-            theme: isSelected ? "accent" : void 0,
-            backgroundColor: isSelected ? "$background" : "transparent",
+            backgroundColor: isSelected ? import_colorRamps.formSelectedColors.mark : "transparent",
             onPress: function onPress() {
               return onSelectYear(year);
             },
@@ -786,7 +786,7 @@ function YearGrid(param) {
             }),
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
               ...knobProps.label,
-              color: isSelected ? "$color" : import_colorRamps.formCommonColors.text,
+              color: isSelected ? onMark : import_colorRamps.formCommonColors.text,
               fontWeight: isSelected ? "bold" : "400",
               children: year
             })
@@ -796,6 +796,18 @@ function YearGrid(param) {
     }, animationKey)]
   });
 }
+function TriggerGlyph(param) {
+  var {
+    glyph,
+    ...groupItem
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+    adornment: "trailing",
+    color: import_colorRamps.formCommonColors.muted,
+    ...groupItem,
+    children: glyph === "clock" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {})
+  });
+}
 function DatePickerClearButton(param) {
   var {
     onReset,
@@ -843,7 +855,6 @@ function DatePickerInputTrigger(param) {
       onReset();
     }
   };
-  var Glyph = glyph === "clock" ? import_react.ClockIcon : import_react.CalendarBlankIcon;
   return (
     // LC-40: the disabled Box below is pointerEvents-none, so the cursor
     // affordance must ride this wrapper — the fragment's not-allowed never
@@ -886,13 +897,6 @@ function DatePickerInputTrigger(param) {
           onKeyDown: handleTriggerKey
         } : void 0),
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-          "data-testid": "date-picker-glyph",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-            adornment: "leading",
-            color: import_colorRamps.formCommonColors.muted,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Glyph, {})
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
             readOnly: true,
             pointerEvents: "none",
@@ -900,15 +904,19 @@ function DatePickerInputTrigger(param) {
             value,
             placeholder,
             disabled,
-            color: import_colorRamps.formCommonColors.text,
-            placeholderTextColor: import_colorRamps.formCommonColors.muted
+            color: import_colorRamps.formCommonColors.text
           })
-        }), value && import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        }), value && import_tamagui.isWeb && !disabled ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DatePickerClearButton, {
             onReset,
             disabled
           })
-        }) : null]
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+          "data-testid": "date-picker-glyph",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerGlyph, {
+            glyph
+          })
+        })]
       })
     })
   );
@@ -923,7 +931,6 @@ function DatePickerReadOnlyField(param) {
     "aria-required": ariaRequired,
     "aria-invalid": ariaInvalid
   } = param;
-  var Glyph = glyph === "clock" ? import_react.ClockIcon : import_react.CalendarBlankIcon;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexDirection: "row",
     alignItems: "center",
@@ -934,25 +941,22 @@ function DatePickerReadOnlyField(param) {
       elevation: void 0,
       "data-testid": "date-picker-readonly",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-        "data-testid": "date-picker-glyph",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
-          adornment: "leading",
-          color: import_colorRamps.formCommonColors.muted,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Glyph, {})
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
           readOnly: true,
           id,
           value,
           placeholder,
           color: import_colorRamps.formCommonColors.text,
-          placeholderTextColor: import_colorRamps.formCommonColors.muted,
           "aria-label": ariaLabel,
           "aria-readonly": "true",
           "aria-required": ariaRequired,
           "aria-invalid": ariaInvalid
         })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+        "data-testid": "date-picker-glyph",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TriggerGlyph, {
+          glyph
+        })
       })]
     })
   });