@multiplatform.one/components 7.11.0 → 7.16.0

package/dist/cjs/views/Matrix.native.js

@@ -0,0 +1,612 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Matrix_exports = {};
+__export(Matrix_exports, {
+  MatrixView: () => MatrixView
+});
+module.exports = __toCommonJS(Matrix_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_componentColors = require("../componentColors.native.js");
+var import_AsyncBoundary = require("../layouts/AsyncBoundary.native.js");
+var import_Skeleton = require("../Skeleton");
+var import_ViewSwitcher = require("../layouts/ViewSwitcher.native.js");
+var import_t = require("../shared/t.native.js");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = __toESM(require("react"));
+var import_i18n = require("../shared/i18n.native.js");
+var import_react_native = require("react-native");
+var import_tamagui = require("tamagui");
+var import_ganttMath = require("./ganttMath.native.js");
+var import_matrixMath = require("./matrixMath.native.js");
+var CanvasScroller = import_tamagui.isWeb ? import_tamagui.ScrollView : import_react_native.ScrollView;
+var hairlineEnd = import_tamagui.isWeb ? {
+  borderInlineEndWidth: import_theme.hairlineWidth,
+  borderInlineEndStyle: "solid",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: import_theme.hairlineWidth
+};
+var FILL_FLOOR = 0.14;
+var ON_FILL_INK_FROM = 0.55;
+var LEGEND_STEPS = [0, 0.25, 0.5, 0.75, 1];
+function CellIntentWrap(param) {
+  var {
+    intent,
+    children
+  } = param;
+  if (!intent || intent === "accent") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Intent, {
+    name: intent,
+    children
+  });
+}
+function resolveFill(color, intent) {
+  return color !== null && color !== void 0 ? color : intent && intent !== "accent" ? "$color9" : "$accentBackground";
+}
+function fillOpacity(intensity) {
+  return FILL_FLOOR + (1 - FILL_FLOOR) * intensity;
+}
+function MatrixCellBox(param) {
+  var {
+    row,
+    bucket,
+    summary,
+    intensity,
+    fill,
+    text,
+    name,
+    width,
+    height,
+    lastColumn,
+    onPress
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var readable = (0, import_theme.useReadableTextOn)(fill);
+  var [keyboardRing, setKeyboardRing] = (0, import_react.useState)(false);
+  var empty = summary === void 0;
+  var state = summary === void 0 ? "empty" : summary.value === 0 ? "zero" : "value";
+  var ink = !empty && intensity >= ON_FILL_INK_FROM && readable ? readable : "$color";
+  var pressable = onPress !== void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    width,
+    height,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+    ...(lastColumn ? null : hairlineEnd),
+    borderColor: import_componentColors.componentColors.divider,
+    cursor: pressable ? "pointer" : void 0,
+    hoverStyle: pressable ? {
+      backgroundColor: import_componentColors.componentColors.interactive.hover
+    } : void 0,
+    pressStyle: pressable ? {
+      opacity: 0.8
+    } : void 0,
+    role: pressable ? "button" : void 0,
+    tabIndex: pressable ? 0 : void 0,
+    "aria-label": name,
+    // LC-71: one ring on the cell (the perceived control), keyboard-only.
+    ...(keyboardRing ? import_theme.keyboardFocusRingProps : {
+      outlineWidth: 0
+    }),
+    onFocus: pressable ? function () {
+      return setKeyboardRing((0, import_theme.wasKeyboardFocus)());
+    } : void 0,
+    onBlur: pressable ? function () {
+      return setKeyboardRing(false);
+    } : void 0,
+    onPress,
+    onKeyDown: pressable ? function (ke) {
+      var _ke_preventDefault;
+      if (ke.key !== "Enter" && ke.key !== " ") return;
+      (_ke_preventDefault = ke.preventDefault) === null || _ke_preventDefault === void 0 ? void 0 : _ke_preventDefault.call(ke);
+      onPress();
+    } : void 0,
+    "data-matrix-cell": `${row.id}:${bucket.key}`,
+    "data-matrix-cell-state": state,
+    ...((summary === null || summary === void 0 ? void 0 : summary.intent) ? {
+      "data-matrix-cell-intent": summary.intent
+    } : null),
+    children: [!empty && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: fill,
+      opacity: fillOpacity(intensity),
+      pointerEvents: "none",
+      "data-matrix-fill": String(intensity)
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.label,
+      color: empty ? import_componentColors.componentColors.text.subtle : ink,
+      numberOfLines: 1,
+      pointerEvents: "none",
+      zIndex: 1,
+      "aria-hidden": true,
+      children: empty ? "\xB7" : text
+    })]
+  });
+}
+function LegendSwatch(param) {
+  var {
+    intensity,
+    fill,
+    empty
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    width: 14,
+    height: 14,
+    ...knobProps.borderRadius,
+    position: "relative",
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: import_theme.hairlineWidth,
+    borderColor: import_componentColors.componentColors.surface.border,
+    "data-matrix-legend-swatch": empty ? "empty" : String(intensity !== null && intensity !== void 0 ? intensity : 1),
+    children: empty ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: 10,
+      lineHeight: 10,
+      color: import_componentColors.componentColors.text.subtle,
+      "aria-hidden": true,
+      children: "\xB7"
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: fill !== null && fill !== void 0 ? fill : "$accentBackground",
+      opacity: fillOpacity(intensity !== null && intensity !== void 0 ? intensity : 1)
+    })
+  });
+}
+var SKELETON_ROWS = [96, 72, 112, 64, 88];
+function MatrixSkeleton(param) {
+  var {
+    labelWidth,
+    columnWidth,
+    rowHeight
+  } = param;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var edgePad = knobProps.panelPadding.padding;
+  var columns = [0, 1, 2, 3, 4, 5];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    width: "100%",
+    "aria-busy": true,
+    "aria-label": t("Loading"),
+    "data-matrix-skeleton": "true",
+    "data-async-skeleton": "matrix",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      height: rowHeight,
+      alignItems: "center",
+      ...import_theme.hairline.bottom,
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        width: labelWidth,
+        paddingHorizontal: edgePad,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: 64,
+          height: 12
+        })
+      }), columns.map(function (column) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          width: columnWidth,
+          justifyContent: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+            width: Math.max(24, columnWidth - 24),
+            height: 12
+          })
+        }, column);
+      })]
+    }), SKELETON_ROWS.map(function (labelSkeletonWidth, index) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        height: rowHeight,
+        alignItems: "center",
+        ...(index < SKELETON_ROWS.length - 1 ? import_theme.hairline.bottom : null),
+        borderColor: import_componentColors.componentColors.divider,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          width: labelWidth,
+          paddingHorizontal: edgePad,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+            width: labelSkeletonWidth,
+            height: 12
+          })
+        }), columns.map(function (column) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            width: columnWidth,
+            justifyContent: "center",
+            children: (column + index) % 3 === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+              variant: "rounded",
+              width: Math.max(16, columnWidth - 16),
+              height: Math.max(10, rowHeight - 20)
+            })
+          }, column);
+        })]
+      }, index);
+    })]
+  });
+}
+function MatrixView(param) {
+  var {
+    rows,
+    cells,
+    rule: initialRule = "month",
+    onRuleChange,
+    range: rangeProp,
+    firstDayOfWeek = 0,
+    onCellPress,
+    formatCell,
+    isLoading = false,
+    error = null,
+    onRetry,
+    emptyTitle,
+    emptyDescription,
+    height: heightProp,
+    labelWidth = 180,
+    columnWidth: columnWidthProp,
+    subjectLabel,
+    showRuleSwitcher = true,
+    showLegend = true,
+    legendItems,
+    ...stackProps
+  } = param;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [rule, setRule] = (0, import_react.useState)(initialRule);
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
+  var sz = knobProps.sizeToken;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : sz === "$3" ? 400 : sz === "$5" ? 560 : 480;
+  var rowHeight = Math.max(import_theme.MIN_PRESS_TARGET, sz === "$3" ? 44 : sz === "$5" ? 56 : 48);
+  var columnWidth = Math.max(import_theme.MIN_PRESS_TARGET, columnWidthProp !== null && columnWidthProp !== void 0 ? columnWidthProp : sz === "$3" ? 56 : sz === "$5" ? 72 : 64);
+  var axisHeight = sz === "$3" ? 40 : sz === "$5" ? 52 : 46;
+  var range = (0, import_react.useMemo)(function () {
+    return rangeProp ? (0, import_matrixMath.alignMatrixRange)(rangeProp, rule, firstDayOfWeek) : (0, import_matrixMath.computeMatrixRange)(cells.map(function (cell) {
+      return cell.date;
+    }), rule, firstDayOfWeek);
+  }, [rangeProp, cells, rule, firstDayOfWeek]);
+  var buckets = (0, import_react.useMemo)(function () {
+    return (0, import_matrixMath.generateBuckets)(range, rule, firstDayOfWeek);
+  }, [range, rule, firstDayOfWeek]);
+  var summaries = (0, import_react.useMemo)(function () {
+    return (0, import_matrixMath.summarizeMatrixCells)(cells, rule, firstDayOfWeek);
+  }, [cells, rule, firstDayOfWeek]);
+  var maxValue = (0, import_react.useMemo)(function () {
+    var rowIds = new Set(rows.map(function (row) {
+      return row.id;
+    }));
+    var bucketKeys = new Set(buckets.map(function (bucket) {
+      return bucket.key;
+    }));
+    return (0, import_matrixMath.matrixMaxValue)(Array.from(summaries.values()).filter(function (summary) {
+      return rowIds.has(summary.rowId) && bucketKeys.has(summary.bucketKey);
+    }));
+  }, [summaries, rows, buckets]);
+  var gridWidth = buckets.length * columnWidth;
+  var rangeLabel = (0, import_react.useMemo)(function () {
+    return (0, import_ganttMath.formatRangeLabel)(range);
+  }, [range]);
+  var changeRule = (0, import_react.useCallback)(function (next) {
+    setRule(next);
+    onRuleChange === null || onRuleChange === void 0 ? void 0 : onRuleChange(next);
+  }, [onRuleChange]);
+  var cellText = (0, import_react.useCallback)(function (summary) {
+    var _summary_value;
+    if (formatCell) return formatCell(summary);
+    if (summary.label !== void 0) return summary.label;
+    return (0, import_theme.formatNumber)((_summary_value = summary.value) !== null && _summary_value !== void 0 ? _summary_value : summary.count);
+  }, [formatCell]);
+  var axisScrollRef = (0, import_react.useRef)(null);
+  var handleCanvasScroll = (0, import_react.useCallback)(function (event) {
+    var _ref;
+    var _event_nativeEvent_contentOffset, _event_nativeEvent, _axisScrollRef_current_scrollTo, _axisScrollRef_current;
+    var x = (_ref = event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : (_event_nativeEvent_contentOffset = _event_nativeEvent.contentOffset) === null || _event_nativeEvent_contentOffset === void 0 ? void 0 : _event_nativeEvent_contentOffset.x) !== null && _ref !== void 0 ? _ref : 0;
+    (_axisScrollRef_current = axisScrollRef.current) === null || _axisScrollRef_current === void 0 ? void 0 : (_axisScrollRef_current_scrollTo = _axisScrollRef_current.scrollTo) === null || _axisScrollRef_current_scrollTo === void 0 ? void 0 : _axisScrollRef_current_scrollTo.call(_axisScrollRef_current, {
+      x,
+      animated: false
+    });
+  }, []);
+  var scrollerDirection = {
+    direction: "ltr"
+  };
+  var showSkeleton = !error && isLoading && rows.length === 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {
+    loading: showSkeleton ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(MatrixSkeleton, {
+      labelWidth,
+      columnWidth,
+      rowHeight
+    }) : false,
+    empty: !error && !isLoading && rows.length === 0,
+    error,
+    onRetry,
+    emptyTitle: emptyTitle !== null && emptyTitle !== void 0 ? emptyTitle : t("No subjects"),
+    emptyDescription,
+    ...stackProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      height,
+      overflow: "hidden",
+      backgroundColor: "$background",
+      elevation: knobProps.elevation,
+      ...knobProps.containerRadius,
+      "data-matrix-view": rule,
+      "data-size": knobProps.size,
+      "data-density": knobProps.density,
+      children: [/* Header */
+      /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        justifyContent: "space-between",
+        ...knobProps.gap,
+        ...import_theme.hairline.bottom,
+        borderColor: "$borderColor",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.heading,
+          ...import_componentColors.sectionHeading,
+          numberOfLines: 1,
+          children: rangeLabel
+        }), showRuleSwitcher && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ViewSwitcher.ViewSwitcher, {
+          views: [{
+            type: "day",
+            label: t("Day")
+          }, {
+            type: "week",
+            label: t("Week")
+          }, {
+            type: "month",
+            label: t("Month")
+          }],
+          currentView: rule,
+          onViewChange: function onViewChange(val) {
+            return changeRule(val);
+          }
+        })]
+      }),
+      /* Pinned axis row: the subject header cell + the bucket header strip
+      stay put while rows scroll vertically. The strip follows the grid
+      scroller, so headers and cells can never drift apart. */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...import_theme.hairline.bottom,
+        borderColor: "$borderColor",
+        "data-matrix-axis-row": "true",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          width: labelWidth,
+          flexShrink: 0,
+          height: axisHeight,
+          alignItems: "center",
+          paddingHorizontal: knobProps.panelPadding.padding,
+          ...hairlineEnd,
+          borderColor: "$borderColor",
+          backgroundColor: import_componentColors.componentColors.surface.background,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            numberOfLines: 1,
+            children: subjectLabel !== null && subjectLabel !== void 0 ? subjectLabel : t("Subject")
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+          ref: axisScrollRef,
+          horizontal: true,
+          flex: 1,
+          scrollEnabled: false,
+          showsHorizontalScrollIndicator: false,
+          style: scrollerDirection,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            width: gridWidth,
+            height: axisHeight,
+            backgroundColor: import_componentColors.componentColors.surface.background,
+            "data-matrix-axis": rule,
+            children: buckets.map(function (bucket, index) {
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+                width: columnWidth,
+                height: axisHeight,
+                alignItems: "center",
+                justifyContent: "center",
+                ...(index === buckets.length - 1 ? null : hairlineEnd),
+                borderColor: import_componentColors.componentColors.divider,
+                "aria-label": bucket.name,
+                "data-matrix-column": bucket.key,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  ...knobProps.label,
+                  color: knobProps.textAccentColor,
+                  numberOfLines: 1,
+                  children: bucket.label
+                })
+              }, bucket.key);
+            })
+          })
+        })]
+      }),
+      /* Body: subject labels + grid share one vertical scroller so rows stay
+      aligned; the grid owns its horizontal scroller (LC-10). */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        flex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          "data-matrix-scroll-body": "true",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            width: labelWidth,
+            flexShrink: 0,
+            ...hairlineEnd,
+            borderColor: "$borderColor",
+            "data-matrix-labels": "true",
+            children: rows.map(function (row, index) {
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+                height: rowHeight,
+                alignItems: "center",
+                paddingHorizontal: knobProps.panelPadding.padding,
+                ...(index === rows.length - 1 ? null : import_theme.hairline.bottom),
+                borderColor: import_componentColors.componentColors.divider,
+                "data-matrix-row-label": row.id,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  ...knobProps.body,
+                  numberOfLines: 1,
+                  color: "$color",
+                  children: row.label
+                })
+              }, row.id);
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CanvasScroller, {
+            horizontal: true,
+            ...(import_tamagui.isWeb ? {
+              flex: 1
+            } : null),
+            showsHorizontalScrollIndicator: true,
+            onScroll: handleCanvasScroll,
+            scrollEventThrottle: 16,
+            style: import_tamagui.isWeb ? scrollerDirection : [{
+              flex: 1
+            }, scrollerDirection],
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              width: gridWidth,
+              "data-matrix-canvas": "true",
+              children: rows.map(function (row, rowIndex) {
+                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+                  height: rowHeight,
+                  ...(rowIndex === rows.length - 1 ? null : import_theme.hairline.bottom),
+                  borderColor: import_componentColors.componentColors.divider,
+                  "data-matrix-row": row.id,
+                  children: buckets.map(function (bucket, columnIndex) {
+                    var summary = summaries.get((0, import_matrixMath.matrixCellKey)(row.id, bucket.key));
+                    var intensity = summary ? (0, import_matrixMath.matrixCellIntensity)(summary, maxValue) : 0;
+                    var fill = resolveFill(summary === null || summary === void 0 ? void 0 : summary.color, summary === null || summary === void 0 ? void 0 : summary.intent);
+                    var text = summary ? cellText(summary) : t("No data");
+                    var name = (0, import_t.withInterp)(t("{{subject}}, {{bucket}}: {{value}}"), {
+                      subject: row.label,
+                      bucket: bucket.name,
+                      value: text
+                    });
+                    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellIntentWrap, {
+                      intent: (summary === null || summary === void 0 ? void 0 : summary.color) ? void 0 : summary === null || summary === void 0 ? void 0 : summary.intent,
+                      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(MatrixCellBox, {
+                        row,
+                        bucket,
+                        summary,
+                        intensity,
+                        fill,
+                        text,
+                        name,
+                        width: columnWidth,
+                        height: rowHeight,
+                        lastColumn: columnIndex === buckets.length - 1,
+                        onPress: onCellPress ? function () {
+                          return onCellPress({
+                            row,
+                            bucket,
+                            summary
+                          });
+                        } : void 0
+                      })
+                    }, bucket.key);
+                  })
+                }, row.id);
+              })
+            })
+          })]
+        })
+      }), showLegend && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        flexWrap: "wrap",
+        ...knobProps.gap,
+        ...import_theme.hairline.top,
+        borderColor: "$borderColor",
+        "data-matrix-legend": "true",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          gap: "$1.5",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(LegendSwatch, {
+            empty: true
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("No data")
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          gap: "$1.5",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("Less")
+          }), LEGEND_STEPS.map(function (step) {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(LegendSwatch, {
+              intensity: step
+            }, step);
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("More")
+          })]
+        }), legendItems === null || legendItems === void 0 ? void 0 : legendItems.map(function (item, index) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellIntentWrap, {
+            intent: item.color ? void 0 : item.intent,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              alignItems: "center",
+              gap: "$1.5",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(LegendSwatch, {
+                fill: resolveFill(item.color, item.intent)
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                ...knobProps.label,
+                color: knobProps.textAccentColor,
+                children: item.label
+              })]
+            })
+          }, `${item.label}-${index}`);
+        })]
+      })]
+    })
+  });
+}
+//# sourceMappingURL=Matrix.native.js.map