Best practices for designing bilingual Hijri/Gregorian date picker components in Figma?

Hi Figma community,

I’m working on a public date conversion tool at dateconvertersa.com that helps Arabic-speaking users switch between Hijri and Gregorian dates. The logic is handled in code, but the UI/UX side is what I’m trying to get right in Figma.

I’m designing a date picker component that needs to:

• Support both Hijri and Gregorian calendars

• Work in RTL Arabic and LTR English

• Handle mobile viewports cleanly

• Show clear month/year navigation without clutter

• Optionally allow a quick toggle between the two calendars

I’m struggling with how to structure the component set and variants in Figma. Should I use separate components for each calendar, or one component with variants? How do you handle RTL mirroring for date pickers? Any tips for keeping the layout clean when the two calendar systems have different month lengths and names?

Would love to see examples or component structures from anyone who has designed for bilingual or RTL date inputs.

Thanks!