@multiplatform.one/components 6.7.0 → 7.1.0

package/dist/jsx/tamagui.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","tamagui_exports","Adapt","import_tamagui4","AlertDialog","Anchor","import_tamagui2","AnimatePresence","import_tamagui5","Button","import_tamagui3","Circle","import_tamagui","Dialog","Group","H1","H2","H3","H4","H5","H6","Heading","ListItem","Paragraph","Popover","Portal","PortalProvider","ScrollView","Separator","Sheet","SizableText","Spacer","Spinner","Square","TamaguiCheckbox","import_tamagui8","Checkbox","TamaguiInput","Input"],"sources":["../../src/tamagui.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","tamagui_exports","Adapt","import_tamagui3","AlertDialog","Anchor","import_tamagui2","AnimatePresence","import_tamagui4","Circle","import_tamagui","Dialog","Group","H1","H2","H3","H4","H5","H6","Heading","ListItem","Paragraph","Popover","Portal","PortalProvider","ScrollView","Separator","Sheet","SizableText","Spacer","Square","TamaguiButton","import_tamagui7","Button","TamaguiCheckbox","Checkbox","TamaguiInput","Input","TamaguiLabel","Label","TamaguiProgress","Progress"],"sources":["../../src/tamagui.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/views/Calendar.mjs

@@ -2,9 +2,9 @@ import { componentColors, sectionHeading } from "../componentColors.mjs";
 import { ViewSwitcher } from "../layouts/ViewSwitcher.mjs";
 import { withInterp } from "../shared/t.mjs";
 import { MINUTES_PER_DAY, computeResizeRange, createRangeFromDrag, eventAccessibleLabel, formatTimeRangeLabel, layoutDayBlocks, minutesOfDay, minutesToY, moveFocusDate, moveFocusSlot, moveRangeToSlot, snapMinutes, yToMinutes } from "./calendarMath.mjs";
-import { formatDayLong, formatTimeOfDay, getMonthNames, getWeekdayNames, hairline, hairlineWidth, pressTargetHitSlop, radiusClassProps, useReadableTextOn, useResolvedKnobs } from "@multiplatform.one/theme";
+import { formatCalendarDate, formatDayLong, formatTimeOfDay, getMonthNames, getWeekdayNames, hairline, hairlineWidth, keyboardFocusRingProps, MIN_PRESS_TARGET, pressTargetHitSlop, radiusClassProps, ensureFocusVisibleRing, ensureKeyboardModalityTracking, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import React, { useState, useMemo, useCallback, useEffect, useId, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n.mjs";
 import { Button, FloatingPanel, Input, zIndex } from "@multiplatform.one/forms";
 import { AnimatePresence, ScrollView, Text, XStack, YStack, isWeb, styled } from "tamagui";
 import { useDirection } from "../hooks/useDirection.mjs";
@@ -70,10 +70,7 @@ function getWeekDays(date, firstDayOfWeek) {
   return days;
 }
 function formatDateKey(date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
+  return formatCalendarDate(date);
 }
 function addMonths(date, delta) {
   const next = new Date(date);
@@ -149,9 +146,47 @@ const TOUCH_LONG_PRESS_MS = 300;
 const TOUCH_SLOP_PX = 8;
 const LIFT_SHADOW = "0px 8px 28px rgba(0,0,0,0.18), 0px 2px 6px rgba(0,0,0,0.08)";
 const MIN_BLOCK_PX = 18;
-const RESIZE_ZONE_PX = 44;
-const DAY_DISC_PX = 22;
+const RESIZE_ZONE_PX = MIN_PRESS_TARGET;
 const MONTH_CHIP_MIN_PX = 24;
+function DayNumberDisc({
+  date,
+  today,
+  inMonth,
+  focused,
+  onAccent,
+  nestedPx,
+  nestedHitSlop,
+  nestedBox,
+  label
+}) {
+  return /* @__PURE__ */jsx(YStack, {
+    ...nestedBox,
+    flexShrink: 0,
+    borderRadius: nestedPx / 2,
+    ...radiusClassProps("R-PILL", "Calendar today marker"),
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: today ? "$accentBackground" : "transparent",
+    hitSlop: nestedHitSlop,
+    ...(focused && wasKeyboardFocus() ? keyboardFocusRingProps : {
+      outlineWidth: 0
+    }),
+    ...(today && {
+      "data-calendar-today": "true"
+    }),
+    ...{
+      "data-nested-px": nestedPx,
+      "data-calendar-day-disc": "true"
+    },
+    children: /* @__PURE__ */jsx(Text, {
+      ...label,
+      fontWeight: today ? "700" : label.fontWeight,
+      color: today ? onAccent ?? "$accentColor" : inMonth ? "$color" : componentColors.text.muted,
+      textAlign: "center",
+      children: date.getDate()
+    })
+  });
+}
 function getHours() {
   return Array.from({
     length: 24
@@ -377,6 +412,16 @@ function Calendar({
   const {
     knobProps
   } = useResolvedKnobs();
+  const {
+    knobProps: nestedKnobs
+  } = useResolvedKnobs({
+    compact: true
+  });
+  const {
+    px: nestedPx,
+    hitSlop: nestedHitSlop,
+    ...nestedBox
+  } = nestedKnobs.nestedControl;
   const onAccent = useReadableTextOn("$accentBackground");
   const calendarId = useId();
   const isRTL = useDirection() === "rtl";
@@ -388,7 +433,7 @@ function Calendar({
   const space = knobProps.space;
   const cellPad = space === "small" ? 2 : space === "large" ? 7 : 4;
   const chipGap = space === "small" ? 2 : space === "large" ? 5 : 3;
-  const monthRowHardFloor = cellPad * 2 + DAY_DISC_PX + chipGap + MONTH_CHIP_MIN_PX;
+  const monthRowHardFloor = cellPad * 2 + nestedPx + chipGap + MONTH_CHIP_MIN_PX;
   const [monthBodyHeight, setMonthBodyHeight] = useState(0);
   const overlayInset = isRTL ? {
     left: 2,
@@ -916,6 +961,11 @@ function Calendar({
   const [focusedDate, setFocusedDate] = useState(null);
   const [focusedSlotMin, setFocusedSlotMin] = useState(9 * 60);
   const [announcement, setAnnouncement] = useState("");
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  const handleBodyFocus = useCallback(() => {
+    if (!wasKeyboardFocus()) return;
+    setFocusedDate(prev => prev ?? currentDate);
+  }, [currentDate]);
   useEffect(() => {
     if (hasNavigatedRef.current) setAnnouncement(displayTitle);
   }, [displayTitle]);
@@ -983,6 +1033,13 @@ function Calendar({
     role: "button",
     tabIndex: 0,
     "aria-label": eventAccessibleLabel(event),
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: ensureFocusVisibleRing({
+      outlineOffset: -2
+    }),
     onKeyDown: ke => {
       if (ke.key === "Enter" || ke.key === " ") {
         ke.preventDefault?.();
@@ -1056,13 +1113,9 @@ function Calendar({
       "aria-label": t("Calendar"),
       tabIndex: 0,
       "aria-activedescendant": focusCellId,
+      onFocus: handleBodyFocus,
       onKeyDown: handleBodyKeyDown,
       outlineWidth: 0,
-      focusVisibleStyle: {
-        outlineWidth: 2,
-        outlineColor: "$accentBackground",
-        outlineStyle: "solid"
-      },
       ...{
         "data-calendar-body": view
       },
@@ -1079,9 +1132,8 @@ function Calendar({
             backgroundColor: componentColors.surface.background
           },
           children: /* @__PURE__ */jsx(Text, {
-            ...knobProps.body,
+            ...nestedKnobs.label,
             fontWeight: "500",
-            fontSize: "$2",
             color: componentColors.text.muted,
             children: day
           })
@@ -1135,12 +1187,7 @@ function Calendar({
                 borderColor: "$borderColor",
                 backgroundColor: isDropTarget ? "$accentBackground" : isCurrentMonth ? "$background" : componentColors.surface.background,
                 padding: cellPad,
-                ...(isFocused && {
-                  outlineWidth: 2,
-                  outlineColor: "$accentBackground",
-                  outlineStyle: "solid",
-                  outlineOffset: -2
-                }),
+                outlineWidth: 0,
                 ...{
                   "data-calendar-day": dayKey
                 },
@@ -1155,28 +1202,16 @@ function Calendar({
                 children: [/* @__PURE__ */jsx(XStack, {
                   justifyContent: "flex-end",
                   paddingInlineEnd: "$1",
-                  children: /* @__PURE__ */jsx(YStack, {
-                    width: DAY_DISC_PX,
-                    height: DAY_DISC_PX,
-                    borderRadius: DAY_DISC_PX / 2,
-                    ...radiusClassProps("R-PILL", "Calendar today marker"),
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor: today ? "$accentBackground" : "transparent",
-                    ...(today && {
-                      "data-calendar-today": "true"
-                    }),
-                    children: /* @__PURE__ */jsx(Text, {
-                      ...knobProps.body,
-                      fontSize: "$2",
-                      fontWeight: today ? "700" : "400",
-                      color: today ? onAccent ?? "$accentColor" : isCurrentMonth ? "$color" :
-                      // muted, not subtle: adjacent-month days are
-                      // clickable text — $color8 measured 1.79:1
-                      componentColors.text.muted,
-                      textAlign: "center",
-                      children: day.getDate()
-                    })
+                  children: /* @__PURE__ */jsx(DayNumberDisc, {
+                    date: day,
+                    today,
+                    inMonth: isCurrentMonth,
+                    focused: isFocused,
+                    onAccent,
+                    nestedPx,
+                    nestedHitSlop,
+                    nestedBox,
+                    label: nestedKnobs.label
                   })
                 }), /* @__PURE__ */jsxs(YStack, {
                   gap: chipGap,
@@ -1192,6 +1227,7 @@ function Calendar({
                       }),
                       cursor: "pointer",
                       paddingInlineStart: "$1",
+                      hitSlop: nestedHitSlop,
                       onPress: isWeb ? e => e?.stopPropagation?.() : void 0,
                       hoverStyle: {
                         opacity: 0.7
@@ -1370,13 +1406,9 @@ function Calendar({
       "aria-label": t("Calendar"),
       tabIndex: 0,
       "aria-activedescendant": focusCellId,
+      onFocus: handleBodyFocus,
       onKeyDown: handleBodyKeyDown,
       outlineWidth: 0,
-      focusVisibleStyle: {
-        outlineWidth: 2,
-        outlineColor: "$accentBackground",
-        outlineStyle: "solid"
-      },
       ...{
         "data-calendar-body": view
       },
@@ -1389,30 +1421,36 @@ function Calendar({
           flex: 1,
           padding: "$2",
           alignItems: "center",
+          minHeight: MIN_PRESS_TARGET,
+          cursor: "pointer",
           ...{
             backgroundColor: componentColors.surface.background
           },
-          ...(isToday(day) && {
-            backgroundColor: componentColors.interactive.background
-          }),
+          onPress: () => {
+            if (suppressClickRef.current) return;
+            onDateSelect?.(day);
+          },
           children: [/* @__PURE__ */jsx(Text, {
-            ...knobProps.body,
+            ...nestedKnobs.label,
             fontWeight: "500",
-            fontSize: "$2",
             color: componentColors.text.muted,
             children: weekdayNames[day.getDay()]
-          }), /* @__PURE__ */jsx(Text, {
-            ...knobProps.body,
-            fontWeight: isToday(day) ? "700" : "400",
-            fontSize: knobProps.sizeToken,
-            color: isToday(day) ? "$accentColor" : "$color",
-            children: day.getDate()
+          }), /* @__PURE__ */jsx(DayNumberDisc, {
+            date: day,
+            today: isToday(day),
+            inMonth: true,
+            focused: false,
+            onAccent,
+            nestedPx,
+            nestedHitSlop,
+            nestedBox,
+            label: nestedKnobs.label
           })]
         }, day.toISOString()))]
       }), /* @__PURE__ */jsxs(XStack, {
         ...hairline.bottom,
         borderColor: "$borderColor",
-        minHeight: 30,
+        minHeight: MIN_PRESS_TARGET,
         children: [/* @__PURE__ */jsx(YStack, {
           width: 56,
           justifyContent: "center",
@@ -1590,7 +1628,7 @@ function Calendar({
                     })]
                   })
                 })
-              }), focusHere && /* @__PURE__ */jsx(YStack, {
+              }), focusHere && wasKeyboardFocus() && /* @__PURE__ */jsx(YStack, {
                 id: `${calendarId}-slot-cursor`,
                 ...{
                   role: "gridcell"
@@ -1601,8 +1639,7 @@ function Calendar({
                 top: minutesToY(focusedSlotMin, hourHeight),
                 height: minutesToY(slotMinutes, hourHeight),
                 ...knobProps.borderRadius,
-                borderWidth: 2,
-                borderColor: "$accentBackground",
+                ...keyboardFocusRingProps,
                 pointerEvents: "none",
                 zIndex: 3,
                 transition: webLayoutTransition,