@multiplatform.one/components 7.7.4 → 7.8.0

package/dist/cjs/charts/ChartDataView.cjs

@@ -0,0 +1,212 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ChartDataView_exports = {};
+__export(ChartDataView_exports, {
+  ChartDataFrame: () => ChartDataFrame,
+  ChartDataView: () => ChartDataView,
+  useChartDataViewProps: () => useChartDataViewProps
+});
+module.exports = __toCommonJS(ChartDataView_exports);
+var import_forms = require("@multiplatform.one/forms");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.cjs");
+var import_i18n = require("../shared/i18n.cjs");
+var import_surfaces = require("../surfaces.cjs");
+var import_accessibility = require("./accessibility.cjs");
+var import_math = require("./math.cjs");
+var import_svg = require("./svg.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ChartDataContext = (0, import_react.createContext)(null);
+function ChartDataView({
+  data,
+  title,
+  valueFormatter,
+  children
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    knobProps: datumKnobs
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const id = `mpo-chart-data-${(0, import_react.useId)().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+  const triggerId = `${id}-trigger`;
+  const normalized = data.map((datum, index) => typeof datum === "number" ? {
+    label: String(index + 1),
+    value: datum
+  } : datum);
+  const format = valueFormatter ?? import_math.formatChartValue;
+  const actionLabel = title ? `${t("View data for")} ${title}` : t("View chart data");
+  const action = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Trigger, {
+    asChild: true,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      compact: true,
+      id: triggerId,
+      ...(import_platform.isWeb ? {
+        "aria-label": actionLabel
+      } : {
+        accessibilityLabel: actionLabel
+      }),
+      ...(0, import_svg.chartWebProps)({
+        "data-mpo-chart-data-trigger": id
+      }),
+      children: t("View data")
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartDataContext.Provider, {
+    value: {
+      id,
+      triggerId
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog, {
+      modal: true,
+      open,
+      onOpenChange: setOpen,
+      children: [children({
+        action,
+        data: normalized,
+        valueFormatter: format
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.DialogOverlay, {}, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.DialogContent, {
+          width: "90%",
+          maxWidth: 480,
+          maxHeight: "80%",
+          ...(0, import_svg.chartWebProps)({
+            "data-mpo-chart-data-panel": id
+          }),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+            ...knobProps.heading,
+            ...import_componentColors.sectionHeading,
+            children: title ? `${title}: ${t("data")}` : t("Chart data")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+            ...knobProps.body,
+            children: `${normalized.length} ${t("data points")}`
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            flexShrink: 1,
+            minHeight: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              ...knobProps.gap,
+              children: normalized.map((datum, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                alignItems: "flex-start",
+                flexWrap: "wrap",
+                ...datumKnobs.gap,
+                ...(0, import_svg.chartWebProps)({
+                  "data-mpo-chart-data-row": String(index)
+                }),
+                ...(!import_platform.isWeb ? {
+                  accessible: true,
+                  accessibilityLabel: (0, import_accessibility.describeDatum)({
+                    datum,
+                    formatValue: format
+                  })
+                } : {}),
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                  flexBasis: "50%",
+                  flexGrow: 1,
+                  flexShrink: 1,
+                  minWidth: 0,
+                  ...knobProps.body,
+                  ...(0, import_svg.chartWebProps)({
+                    "data-mpo-chart-data-label": "true"
+                  }),
+                  children: datum.label
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                  flexShrink: 1,
+                  maxWidth: "100%",
+                  ...knobProps.body,
+                  ...(0, import_svg.chartWebProps)({
+                    "data-mpo-chart-data-value": "true"
+                  }),
+                  children: format(datum.value)
+                })]
+              }, index))
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            justifyContent: "flex-end",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+              asChild: true,
+              "aria-label": t("Close"),
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                "aria-label": t("Close"),
+                ...(!import_platform.isWeb ? {
+                  accessibilityLabel: t("Close")
+                } : {}),
+                ...(0, import_svg.chartWebProps)({
+                  "data-mpo-chart-data-close": id
+                }),
+                children: t("Close")
+              })
+            })
+          })]
+        }, "content")]
+      })]
+    })
+  });
+}
+function ChartDataFrame({
+  data,
+  title,
+  valueFormatter,
+  width,
+  children
+}) {
+  const inherited = (0, import_react.useContext)(ChartDataContext);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  if (inherited) return children;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartDataView, {
+    data,
+    title,
+    valueFormatter,
+    children: ({
+      action
+    }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      minWidth: 0,
+      width: width ?? "100%",
+      maxWidth: "100%",
+      ...knobProps.gap,
+      children: [children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        justifyContent: "flex-end",
+        children: action
+      })]
+    })
+  });
+}
+function useChartDataViewProps() {
+  const context = (0, import_react.useContext)(ChartDataContext);
+  if (!context) return {};
+  return (0, import_svg.chartWebProps)({
+    "data-mpo-chart-data-view": context.id,
+    "aria-describedby": context.triggerId
+  });
+}

package/dist/cjs/charts/ChartDataView.native.js

@@ -0,0 +1,224 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ChartDataView_exports = {};
+__export(ChartDataView_exports, {
+  ChartDataFrame: () => ChartDataFrame,
+  ChartDataView: () => ChartDataView,
+  useChartDataViewProps: () => useChartDataViewProps
+});
+module.exports = __toCommonJS(ChartDataView_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_forms = require("@multiplatform.one/forms");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.native.js");
+var import_i18n = require("../shared/i18n.native.js");
+var import_surfaces = require("../surfaces.native.js");
+var import_accessibility = require("./accessibility.native.js");
+var import_math = require("./math.native.js");
+var import_svg = require("./svg.native.js");
+var ChartDataContext = /* @__PURE__ */(0, import_react.createContext)(null);
+function ChartDataView(param) {
+  var {
+    data,
+    title,
+    valueFormatter,
+    children
+  } = param;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var {
+    knobProps: datumKnobs
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  var [open, setOpen] = (0, import_react.useState)(false);
+  var id = `mpo-chart-data-${(0, import_react.useId)().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+  var triggerId = `${id}-trigger`;
+  var normalized = data.map(function (datum, index) {
+    return typeof datum === "number" ? {
+      label: String(index + 1),
+      value: datum
+    } : datum;
+  });
+  var format = valueFormatter !== null && valueFormatter !== void 0 ? valueFormatter : import_math.formatChartValue;
+  var actionLabel = title ? `${t("View data for")} ${title}` : t("View chart data");
+  var action = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Trigger, {
+    asChild: true,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      compact: true,
+      id: triggerId,
+      ...(import_platform.isWeb ? {
+        "aria-label": actionLabel
+      } : {
+        accessibilityLabel: actionLabel
+      }),
+      ...(0, import_svg.chartWebProps)({
+        "data-mpo-chart-data-trigger": id
+      }),
+      children: t("View data")
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartDataContext.Provider, {
+    value: {
+      id,
+      triggerId
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog, {
+      modal: true,
+      open,
+      onOpenChange: setOpen,
+      children: [children({
+        action,
+        data: normalized,
+        valueFormatter: format
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.DialogOverlay, {}, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.DialogContent, {
+          width: "90%",
+          maxWidth: 480,
+          maxHeight: "80%",
+          ...(0, import_svg.chartWebProps)({
+            "data-mpo-chart-data-panel": id
+          }),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+            ...knobProps.heading,
+            ...import_componentColors.sectionHeading,
+            children: title ? `${title}: ${t("data")}` : t("Chart data")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+            ...knobProps.body,
+            children: `${normalized.length} ${t("data points")}`
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            flexShrink: 1,
+            minHeight: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              ...knobProps.gap,
+              children: normalized.map(function (datum, index) {
+                return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  alignItems: "flex-start",
+                  flexWrap: "wrap",
+                  ...datumKnobs.gap,
+                  ...(0, import_svg.chartWebProps)({
+                    "data-mpo-chart-data-row": String(index)
+                  }),
+                  ...(!import_platform.isWeb ? {
+                    accessible: true,
+                    accessibilityLabel: (0, import_accessibility.describeDatum)({
+                      datum,
+                      formatValue: format
+                    })
+                  } : {}),
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                    flexBasis: "50%",
+                    flexGrow: 1,
+                    flexShrink: 1,
+                    minWidth: 0,
+                    ...knobProps.body,
+                    ...(0, import_svg.chartWebProps)({
+                      "data-mpo-chart-data-label": "true"
+                    }),
+                    children: datum.label
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                    flexShrink: 1,
+                    maxWidth: "100%",
+                    ...knobProps.body,
+                    ...(0, import_svg.chartWebProps)({
+                      "data-mpo-chart-data-value": "true"
+                    }),
+                    children: format(datum.value)
+                  })]
+                }, index);
+              })
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            justifyContent: "flex-end",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+              asChild: true,
+              "aria-label": t("Close"),
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                "aria-label": t("Close"),
+                ...(!import_platform.isWeb ? {
+                  accessibilityLabel: t("Close")
+                } : {}),
+                ...(0, import_svg.chartWebProps)({
+                  "data-mpo-chart-data-close": id
+                }),
+                children: t("Close")
+              })
+            })
+          })]
+        }, "content")]
+      })]
+    })
+  });
+}
+function ChartDataFrame(param) {
+  var {
+    data,
+    title,
+    valueFormatter,
+    width,
+    children
+  } = param;
+  var inherited = (0, import_react.useContext)(ChartDataContext);
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  if (inherited) return children;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartDataView, {
+    data,
+    title,
+    valueFormatter,
+    children: function children1(param2) {
+      var {
+        action
+      } = param2;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        minWidth: 0,
+        width: width !== null && width !== void 0 ? width : "100%",
+        maxWidth: "100%",
+        ...knobProps.gap,
+        children: [children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          justifyContent: "flex-end",
+          children: action
+        })]
+      });
+    }
+  });
+}
+function useChartDataViewProps() {
+  var context = (0, import_react.useContext)(ChartDataContext);
+  if (!context) return {};
+  return (0, import_svg.chartWebProps)({
+    "data-mpo-chart-data-view": context.id,
+    "aria-describedby": context.triggerId
+  });
+}
+//# sourceMappingURL=ChartDataView.native.js.map

package/dist/cjs/charts/ChartDataView.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ChartDataView_exports","__export","ChartDataFrame","ChartDataView","useChartDataViewProps","module","exports","import_jsx_runtime","require","import_forms","import_platform","import_theme","import_react","import_tamagui","import_componentColors","import_i18n","import_surfaces","import_accessibility","import_math","import_svg","ChartDataContext","createContext","param","data","title","valueFormatter","children","t","useTranslation","knobProps","useResolvedKnobs","datumKnobs","compact","open","setOpen","useState","id","useId","replace","triggerId","normalized","map","datum","index","label","String","format","formatChartValue","actionLabel","action","jsx","Dialog","Trigger","asChild","Button","isWeb","accessibilityLabel","chartWebProps","Provider","jsxs","modal","onOpenChange","Portal","DialogOverlay","DialogContent","width","maxWidth","maxHeight","Title","heading","sectionHeading","Description","body","length","ScrollView","flexShrink","minHeight","YStack","gap","XStack","alignItems","flexWrap","accessible","describeDatum","formatValue","Paragraph","flexBasis","flexGrow","minWidth","justifyContent","Close"],"sources":["../../../src/charts/ChartDataView.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/charts/ChartSurface.cjs

@@ -28,15 +28,18 @@ module.exports = __toCommonJS(ChartSurface_exports);
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_svg = require("./svg.cjs");
+var import_ChartDataView = require("./ChartDataView.cjs");
 var import_useChartTheme = require("./useChartTheme.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ChartSurface({
   label,
+  proof,
   height = 200,
   width: widthProp,
   children,
   ...stackProps
 }) {
+  const dataViewProps = (0, import_ChartDataView.useChartDataViewProps)();
   const {
     transition,
     animationEnabled
@@ -63,7 +66,8 @@ function ChartSurface({
     children: width > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_svg.Svg, {
       width,
       height,
-      ...(0, import_svg.chartRootA11yProps)(label),
+      ...(0, import_svg.chartRootA11yProps)(label, proof),
+      ...dataViewProps,
       children: children({
         width,
         height

package/dist/cjs/charts/ChartSurface.native.js

@@ -31,15 +31,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_svg = require("./svg.native.js");
+var import_ChartDataView = require("./ChartDataView.native.js");
 var import_useChartTheme = require("./useChartTheme.native.js");
 function ChartSurface(param) {
   var {
     label,
+    proof,
     height = 200,
     width: widthProp,
     children,
     ...stackProps
   } = param;
+  var dataViewProps = (0, import_ChartDataView.useChartDataViewProps)();
   var {
     transition,
     animationEnabled
@@ -68,7 +71,8 @@ function ChartSurface(param) {
     children: width > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_svg.Svg, {
       width,
       height,
-      ...(0, import_svg.chartRootA11yProps)(label),
+      ...(0, import_svg.chartRootA11yProps)(label, proof),
+      ...dataViewProps,
       children: children({
         width,
         height

package/dist/cjs/charts/ChartSurface.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","ChartSurface_exports","ChartSurface","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_svg","import_useChartTheme","param","label","height","width","widthProp","children","stackProps","transition","animationEnabled","useChartTheme","measuredWidth","setMeasuredWidth","useState","handleLayout","useCallback","event","next","nativeEvent","layout","prev","Math","abs","jsx","YStack","overflow","onLayout","enterStyle","opacity","y","Svg","chartRootA11yProps"],"sources":["ChartSurface.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar ChartSurface_exports = {};\n__export(ChartSurface_exports, {\n  ChartSurface: () => ChartSurface\n});\nmodule.exports = __toCommonJS(ChartSurface_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_react = require(\"react\");\nvar import_tamagui = require(\"tamagui\");\nvar import_svg = require(\"./svg\");\nvar import_useChartTheme = require(\"./useChartTheme\");\nfunction ChartSurface(param) {\n  var { label, height = 200, width: widthProp, children, ...stackProps } = param;\n  var { transition, animationEnabled } = (0, import_useChartTheme.useChartTheme)();\n  var [measuredWidth, setMeasuredWidth] = (0, import_react.useState)(0);\n  var width = widthProp !== null && widthProp !== void 0 ? widthProp : measuredWidth;\n  var handleLayout = (0, import_react.useCallback)(function(event) {\n    var next = event.nativeEvent.layout.width;\n    setMeasuredWidth(function(prev) {\n      return Math.abs(prev - next) >= 0.5 ? next : prev;\n    });\n  }, []);\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, {\n    width: \"100%\",\n    height,\n    overflow: \"hidden\",\n    onLayout: widthProp === void 0 ? handleLayout : void 0,\n    ...animationEnabled ? {\n      transition,\n      enterStyle: {\n        opacity: 0,\n        y: 6\n      }\n    } : {},\n    ...stackProps,\n    children: width > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_svg.Svg, {\n      width,\n      height,\n      ...(0, import_svg.chartRootA11yProps)(label),\n      children: children({\n        width,\n        height\n      })\n    }) : null\n  });\n}\n//# sourceMappingURL=ChartSurface.js.map\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ChartSurface_exports","__export","ChartSurface","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_svg","import_ChartDataView","import_useChartTheme","param","label","proof","height","width","widthProp","children","stackProps","dataViewProps","useChartDataViewProps","transition","animationEnabled","useChartTheme","measuredWidth","setMeasuredWidth","useState","handleLayout","useCallback","event","next","nativeEvent","layout","prev","Math","abs","jsx","YStack","overflow","onLayout","enterStyle","opacity","y","Svg"],"sources":["../../../src/charts/ChartSurface.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAsD,CAAAK,oBAAA;AAEtD,IAAAK,kBAAyC,GAAAC,OAAA;AACzC,IAAAC,YAAA,GAAoED,OAAA;AACpE,IAAAE,cAAA,GAAAF,OAAsC;AAEtC,IAAAG,UAAA,GAAAH,OAAA,kBAA8B;AA8DtB,IAAAI,oBAAA,GAAAJ,OAAA;AA5BD,IAAAK,oBAAsB,GAAAL,OAAA;AAAA,SAC3BJ,aAAAU,KAAA;EACA;IAAAC,KAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,KAAA,EAAAC,SAAA;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAAAP,KAAA;EACA,IAAAQ,aAAS,OAAAV,oBAAA,CAAAW,qBAAA;EACT;IAAAC,UAAO;IAAAC;EAAA,QAAAZ,oBAAA,CAAAa,aAAA;EACP,KAAAC,aAAA,EAAAC,gBAAA,QAAAnB,YAAA,CAAAoB,QAAA;EACA,IAAGX,KAAA,GAAAC,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAAQ,aAAA;EACL,IAAsBG,YAAA,OAAArB,YAAA,CAAAsB,WAAA,YAAAC,KAAA;IACpB,IAAMC,IAAA,GAAAD,KAAA,CAAAE,WAAgB,CAAAC,MAAA,CAAAjB,KAAA;IACtBU,gBAAQ,WAAYQ,IAAA;MACpB,OAAOC,IAAA,CAAAC,GAAA,CAAAF,IAAe,GAAAH,IAAA,QAAgB,GAAAA,IAAI,GAAAG,IAAA;IAC1C;EAEA,MAAM;EACJ,sBAAmB,IAAA7B,kBAAmB,CAAAgC,GAAA,EAAA7B,cAAA,CAAA8B,MAAA;IACtCtB,KAAA;IACFD,MAAK;IAELwB,QACE;IAACC,QAAA,EAAAvB,SAAA,cAAAW,YAAA;IAAA,IAAAL,gBAAA;MACCD,UAAM;MACNmB,UAAA;QACAC,OAAA,EAAS;QACTC,CAAA;MACC;IAA2E,IAC3E,CAAG;IAAA,GAEHxB,UAAA;IAIGD,QAAA,EAAAF,KAAA,0BAAAX,kBAAA,CAAAgC,GAAA,EAAA5B,UAAA,CAAAmC,GAAA;MACN5B,KAAA;MAEJD,MAAA","ignoreList":[]}