@multiplatform.one/components 5.0.27 → 6.0.0

package/dist/cjs/DotIndicator/DotIndicator.stories.native.js

@@ -0,0 +1,308 @@
+"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 DotIndicator_stories_exports = {};
+__export(DotIndicator_stories_exports, {
+  AllStates: () => AllStates,
+  CustomGap: () => CustomGap,
+  Default: () => Default,
+  DifferentCounts: () => DifferentCounts,
+  Disabled: () => Disabled,
+  ReadOnly: () => ReadOnly,
+  Variants: () => Variants,
+  default: () => DotIndicator_stories_default
+});
+module.exports = __toCommonJS(DotIndicator_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Components/DotIndicator",
+  component: import_index.DotIndicator,
+  parameters: {
+    status: {
+      type: "stable"
+    },
+    docs: {
+      description: {
+        component: "A dot-based indicator for showing position in a sequence. Used by Carousel and Pagination components. Supports multiple visual variants."
+      }
+    }
+  }
+};
+var DotIndicator_stories_default = meta;
+function ControlledDotIndicator(props) {
+  var [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DotIndicator, {
+    ...props,
+    activeIndex,
+    onChange: function onChange(index) {
+      var _props_onChange;
+      setActiveIndex(index);
+      (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, index);
+    }
+  });
+}
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+      total: 5,
+      onChange: (0, import_storybook.action)("onChange")
+    });
+  }
+};
+var Variants = {
+  render: function render2() {
+    var variants = ["dots", "bars", "pills"];
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$4",
+      children: variants.map(function (variant) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$4",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            width: 60,
+            fontSize: "$2",
+            color: "$color10",
+            children: variant
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+            total: 5,
+            variant,
+            onChange: (0, import_storybook.action)("onChange")
+          })]
+        }, variant);
+      })
+    });
+  }
+};
+var DifferentCounts = {
+  render: function render3() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          width: 80,
+          fontSize: "$2",
+          color: "$color10",
+          children: "3 items"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 3,
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          width: 80,
+          fontSize: "$2",
+          color: "$color10",
+          children: "5 items"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          width: 80,
+          fontSize: "$2",
+          color: "$color10",
+          children: "10 items"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 10,
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      })]
+    });
+  }
+};
+var CustomGap = {
+  render: function render4() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          width: 80,
+          fontSize: "$2",
+          color: "$color10",
+          children: 'gap="$1"'
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          gap: "$1",
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          width: 80,
+          fontSize: "$2",
+          color: "$color10",
+          children: 'gap="$2"'
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          gap: "$2",
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          width: 80,
+          fontSize: "$2",
+          color: "$color10",
+          children: 'gap="$4"'
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          gap: "$4",
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      })]
+    });
+  }
+};
+var Disabled = {
+  render: function render5() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "600",
+          children: "Interactive"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "600",
+          children: "Disabled"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          disabled: true,
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      })]
+    });
+  }
+};
+var ReadOnly = {
+  render: function render6() {
+    var [index, setIndex] = (0, import_react.useState)(2);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DotIndicator, {
+        total: 5,
+        activeIndex: index
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+        fontSize: "$2",
+        color: "$color10",
+        children: ["Item ", index + 1, " of 5 (no onChange - read only)"]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$2",
+          color: "$blue10",
+          cursor: "pointer",
+          onPress: function onPress() {
+            return setIndex(function (i) {
+              return Math.max(0, i - 1);
+            });
+          },
+          children: "Prev"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$2",
+          color: "$blue10",
+          cursor: "pointer",
+          onPress: function onPress() {
+            return setIndex(function (i) {
+              return Math.min(4, i + 1);
+            });
+          },
+          children: "Next"
+        })]
+      })]
+    });
+  }
+};
+var AllStates = {
+  render: function render7() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$6",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "600",
+          children: "Dots variant (default)"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          variant: "dots",
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "600",
+          children: "Bars variant"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          variant: "bars",
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "600",
+          children: "Pills variant"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          variant: "pills",
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontWeight: "600",
+          children: "Disabled"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ControlledDotIndicator, {
+          total: 5,
+          disabled: true,
+          onChange: (0, import_storybook.action)("onChange")
+        })]
+      })]
+    });
+  }
+};
+//# sourceMappingURL=DotIndicator.stories.native.js.map

package/dist/cjs/DotIndicator/DotIndicator.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DotIndicator_stories_exports","__export","AllStates","CustomGap","Default","DifferentCounts","Disabled","ReadOnly","Variants","default","DotIndicator_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react","import_tamagui","import_index","meta","title","component","DotIndicator","parameters","status","type","docs","description","ControlledDotIndicator","props","activeIndex","setActiveIndex","useState","jsx","onChange","index","_props_onChange","call","name","render","total","action","render2","variants","YStack","gap","children","map","variant","jsxs","XStack","alignItems","Text","width","fontSize","color","render3","render4"],"sources":["../../../src/DotIndicator/DotIndicator.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/DotIndicator/index.cjs

@@ -0,0 +1,114 @@
+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 DotIndicator_exports = {};
+__export(DotIndicator_exports, {
+  DotIndicator: () => DotIndicator
+});
+module.exports = __toCommonJS(DotIndicator_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const DotsContainer = (0, import_tamagui.styled)(import_tamagui.XStack, {
+  name: "DotIndicator",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$2"
+});
+const Dot = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "Dot",
+  borderRadius: 1e3,
+  backgroundColor: import_componentColors.componentColors.indicator.inactive,
+  cursor: "pointer",
+  hoverStyle: {
+    backgroundColor: import_componentColors.componentColors.indicator.hover
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: import_componentColors.componentColors.indicator.active
+      }
+    },
+    variant: {
+      dots: {
+        width: 8,
+        height: 8
+      },
+      bars: {
+        width: 6,
+        height: 6
+      },
+      pills: {
+        width: 8,
+        height: 8
+      }
+    },
+    activeVariant: {
+      dots: {
+        width: 24
+      },
+      bars: {
+        width: 24
+      },
+      pills: {
+        width: 24
+      }
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.5
+      }
+    }
+  }
+});
+function DotIndicator({
+  total,
+  activeIndex,
+  onChange,
+  variant = "dots",
+  gap = "$2",
+  disabled = false
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotsContainer, {
+    ...knobProps.gap,
+    gap,
+    children: Array.from({
+      length: total
+    }).map((_, index) => {
+      const isActive = index === activeIndex;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Dot, {
+        variant,
+        active: isActive,
+        activeVariant: isActive ? variant : void 0,
+        disabled: disabled || !onChange,
+        onPress: disabled || !onChange ? void 0 : () => onChange(index),
+        accessibilityRole: "button",
+        accessibilityLabel: `Go to item ${index + 1}`
+      }, index);
+    })
+  });
+}

package/dist/cjs/DotIndicator/index.native.js

@@ -0,0 +1,120 @@
+"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 DotIndicator_exports = {};
+__export(DotIndicator_exports, {
+  DotIndicator: () => DotIndicator
+});
+module.exports = __toCommonJS(DotIndicator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.native.js");
+var DotsContainer = (0, import_tamagui.styled)(import_tamagui.XStack, {
+  name: "DotIndicator",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$2"
+});
+var Dot = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "Dot",
+  borderRadius: 1e3,
+  backgroundColor: import_componentColors.componentColors.indicator.inactive,
+  cursor: "pointer",
+  hoverStyle: {
+    backgroundColor: import_componentColors.componentColors.indicator.hover
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: import_componentColors.componentColors.indicator.active
+      }
+    },
+    variant: {
+      dots: {
+        width: 8,
+        height: 8
+      },
+      bars: {
+        width: 6,
+        height: 6
+      },
+      pills: {
+        width: 8,
+        height: 8
+      }
+    },
+    activeVariant: {
+      dots: {
+        width: 24
+      },
+      bars: {
+        width: 24
+      },
+      pills: {
+        width: 24
+      }
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.5
+      }
+    }
+  }
+});
+function DotIndicator(param) {
+  var {
+    total,
+    activeIndex,
+    onChange,
+    variant = "dots",
+    gap = "$2",
+    disabled = false
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotsContainer, {
+    ...knobProps.gap,
+    gap,
+    children: Array.from({
+      length: total
+    }).map(function (_, index) {
+      var isActive = index === activeIndex;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Dot, {
+        variant,
+        active: isActive,
+        activeVariant: isActive ? variant : void 0,
+        disabled: disabled || !onChange,
+        onPress: disabled || !onChange ? void 0 : function () {
+          return onChange(index);
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: `Go to item ${index + 1}`
+      }, index);
+    })
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/DotIndicator/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DotIndicator_exports","__export","DotIndicator","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_componentColors","DotsContainer","styled","XStack","name","alignItems","justifyContent","gap","Dot","View","borderRadius","backgroundColor","componentColors","indicator","inactive","cursor","hoverStyle","hover","variants","active","true","variant","dots","width","height","bars","pills","activeVariant","disabled","opacity","param","total","activeIndex","onChange","knobProps","useResolvedKnobs","jsx","children","Array","from","length","map","_","index","isActive","onPress","accessibilityRole","accessibilityLabel"],"sources":["../../../src/DotIndicator/index.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,YAAiC,CAAAK,oBAAA;AAEjC,IAAAK,kBAAqC,GAAAC,OAAA;AACrC,IAAAC,YAAA,GAAAD,OAAA,2BAAgC;AA+FtB,IAAAE,cAAA,GAAAF,OAAA;AAxEV,IAAAG,sBAAsB,GAAAH,OAAA,+BAAO;AAAQ,IACnCI,aAAM,OAAAF,cAAA,CAAAG,MAAA,EAAAH,cAAA,CAAAI,MAAA;EACNC,IAAA,gBAAY;EACZC,UAAA,UAAgB;EAChBC,cAAK;EACNC,GAAA;AAED;AAAyB,IACvBC,GAAA,GAAM,IAAAT,cAAA,CAAAG,MAAA,EAAAH,cAAA,CAAAU,IAAA;EACNL,IAAA;EACAM,YAAA,KAAiB;EACjBC,eAAQ,EAAAX,sBAAA,CAAAY,eAAA,CAAAC,SAAA,CAAAC,QAAA;EACRC,MAAA,WAAY;EAAAC,UACV;IACFL,eAAA,EAAAX,sBAAA,CAAAY,eAAA,CAAAC,SAAA,CAAAI;EACA;EAAUC,QACR,EAAQ;IAAAC,MACN,EAAM;MAAAC,IACJ;QACFT,eAAA,EAAAX,sBAAA,CAAAY,eAAA,CAAAC,SAAA,CAAAM;MACF;IACA;IAASE,OACP,EAAM;MAAAC,IACJ;QACAC,KAAA,GAAQ;QACVC,MAAA;MACA;MAAMC,IACJ;QACAF,KAAA,GAAQ;QACVC,MAAA;MACA;MAAOE,KACL;QACAH,KAAA,GAAQ;QACVC,MAAA;MACF;IACA;IAAeG,aACP;MAAAL,IACJ;QACFC,KAAA;MACA;MAAME,IACJ;QACFF,KAAA;MACA;MAAOG,KACL;QACFH,KAAA;MACF;IACA;IAAUK,QACF;MAAAR,IACJ;QACAL,MAAA,eAAS;QACXc,OAAA;MACF;IACF;EACD;AAIM;AAAsB,SAC3BpC,aAAAqC,KAAA;EACA;IAAAC,KAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAZ,OAAA;IAAAd,GAAA;IAAAqB,QAAA;EAAA,IAAAE,KAAA;EACA;IAAAI;EAAA,QAAApC,YAAA,CAAAqC,gBAAA;EACA,sBAAU,IAAAvC,kBAAA,CAAAwC,GAAA,EAAAnC,aAAA;IACV,GAAAiC,SAAM,CAAA3B,GAAA;IACNA,GAAA;IACoB8B,QAAA,EAAAC,KAAA,CAAAC,IAAA;MACpBC,MAAQ,EAAAT;IAER,GAAAU,GACE,WAAAC,CAAA,EAAAC,KAAA;MAEI,IAAMC,QAAA,GAAWD,KAAA,KAAUX,WAAA;MAC3B,OACE,mBAAApC,kBAAA,CAAAwC,GAAA,EAAA5B,GAAA;QAACa,OAAA;QAAAF,MAAA,EAAAyB,QAAA;QAECjB,aAAA,EAAAiB,QAAA,GAAAvB,OAAA;QACAO,QAAQ,EAAAA,QAAA,KAAAK,QAAA;QACRY,OAAA,EAAAjB,QAAe,KAAAK,QAAW,QAAU;UACpC,OAAAA,QAAU,CAAAU,KAAa;QACvB;QACAG,iBAAA,EAAkB;QAClBC,kBAAA,EAAoB,cAAcJ,KAAA,GAAQ,CAAC;MAAA,GAAAA,KAAA;IAAA;EAPtC,EAQP;AAAA","ignoreList":[]}

package/dist/cjs/ErrorBoundary/ErrorBoundary.spec.cjs

@@ -0,0 +1,48 @@
+var import_react = require("@testing-library/react");
+var import_tamagui = require("tamagui");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ChildThatThrows = () => {
+  throw new Error("Test Error");
+};
+const ChildThatRenders = () => {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H1, {
+    children: "Hello from child!"
+  });
+};
+describe("ErrorBoundary", () => {
+  it("should render children when no error occurs", () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatRenders, {})
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("Hello from child!")).toBeInTheDocument();
+  });
+  it("should show error message and retry button when an error occurs", () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatThrows, {})
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("Oops, there is an error!")).toBeInTheDocument();
+    (0, import_vitest.expect)(import_react.screen.getByText("Try again?")).toBeInTheDocument();
+  });
+  it("should reset error state and re-render children when retry button is clicked", async () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatThrows, {})
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("Oops, there is an error!")).toBeInTheDocument();
+    (0, import_vitest.expect)(import_react.screen.getByText("Try again?")).toBeInTheDocument();
+    import_react.fireEvent.click(import_react.screen.getByText("Try again?"));
+  });
+  it("should log errors when componentDidCatch is triggered", () => {
+    const spy = import_vitest.vitest.spyOn(console, "info");
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatThrows, {})
+    }));
+    (0, import_vitest.expect)(spy).toHaveBeenCalledWith(import_vitest.expect.objectContaining({
+      error: import_vitest.expect.any(Error),
+      errorInfo: import_vitest.expect.any(Object)
+    }));
+    spy.mockRestore();
+  });
+});

package/dist/cjs/ErrorBoundary/ErrorBoundary.spec.native.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@testing-library/react");
+var import_tamagui = require("tamagui");
+var import_vitest = require("vitest");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_index = require("./index.native.js");
+var ChildThatThrows = function ChildThatThrows2() {
+  throw new Error("Test Error");
+};
+var ChildThatRenders = function ChildThatRenders2() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H1, {
+    children: "Hello from child!"
+  });
+};
+describe("ErrorBoundary", function () {
+  it("should render children when no error occurs", function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatRenders, {})
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("Hello from child!")).toBeInTheDocument();
+  });
+  it("should show error message and retry button when an error occurs", function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatThrows, {})
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("Oops, there is an error!")).toBeInTheDocument();
+    (0, import_vitest.expect)(import_react.screen.getByText("Try again?")).toBeInTheDocument();
+  });
+  it("should reset error state and re-render children when retry button is clicked", async function () {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatThrows, {})
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("Oops, there is an error!")).toBeInTheDocument();
+    (0, import_vitest.expect)(import_react.screen.getByText("Try again?")).toBeInTheDocument();
+    import_react.fireEvent.click(import_react.screen.getByText("Try again?"));
+  });
+  it("should log errors when componentDidCatch is triggered", function () {
+    var spy = import_vitest.vitest.spyOn(console, "info");
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.ErrorBoundary, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildThatThrows, {})
+    }));
+    (0, import_vitest.expect)(spy).toHaveBeenCalledWith(import_vitest.expect.objectContaining({
+      error: import_vitest.expect.any(Error),
+      errorInfo: import_vitest.expect.any(Object)
+    }));
+    spy.mockRestore();
+  });
+});
+//# sourceMappingURL=ErrorBoundary.spec.native.js.map

package/dist/cjs/ErrorBoundary/ErrorBoundary.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_react","import_tamagui","import_vitest","import_test_utils","import_index","ChildThatThrows","ChildThatThrows2","Error","ChildThatRenders","ChildThatRenders2","jsx","H1","children","describe","it","renderWithProviders","ErrorBoundary","expect","screen","getByText","toBeInTheDocument","fireEvent","click","spy","vitest","spyOn","console","toHaveBeenCalledWith","objectContaining","error","any","errorInfo","Object","mockRestore"],"sources":["../../../src/ErrorBoundary/ErrorBoundary.spec.tsx"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,kBAAmB,GAAAC,OAAA;AACnB,IAAAC,YAAA,GAAAD,OAA+B;AAC/B,IAAAE,cAAA,GAAAF,OAAoC;AACpC,IAAAG,aAAA,GAA8BH,OAAA;AAMrB,IAAAI,iBAAA,GAAAJ,OAAA;AAJT,IAAAK,YAAM,GAAAL,OAAkB,oBAAM;AAC5B,IAAAM,eAAgB,YAAYC,iBAAA;EAC9B,UAAAC,KAAA;AACA;AACE,IAAAC,gBAAO,YAAAC,kBAAA;EACT,0BAAAX,kBAAA,CAAAY,GAAA,EAAAT,cAAA,CAAAU,EAAA;IAEAC,QAAS;EACP;AACE;AAAAC,QACE;EAEAC,EACF;IACA,IAAAX,iBAAA,CAAAY,mBAAO,iBAAiB,IAAAjB,kBAAsB,CAAAY,GAAA,EAAAN,YAAkB,CAAAY,aAAA;MACjEJ,QAAA,qBAAAd,kBAAA,CAAAY,GAAA,EAAAF,gBAAA;IAED,CAAG;IACD,IAAAN,aAAA,CAAAe,MAAA,EAAAjB,YAAA,CAAAkB,MAAA,CAAAC,SAAA,uBAAAC,iBAAA;EAAA;EAGEN,EACF;IACA,IAAAX,iBAAA,CAAAY,mBAAO,iBAAiB,IAAAjB,kBAAA,CAA0BY,GAAG,EAAAN,YAAA,CAAAY,aAAkB;MACvEJ,QAAA,iBAAO,IAAAd,kBAAO,CAAAY,GAAA,EAAUL,eAAe;IACxC;IAED,CAAG,GAAAH,aAAA,CAAAe,MAAA,EAAAjB,YAAA,CAAAkB,MAAA,CAAAC,SAAA,2BAAgF,GAAAC,iBAAY;IAC7F,IAAAlB,aAAA,CAAAe,MAAA,EAAAjB,YAAA,CAAAkB,MAAA,CAAAC,SAAA,gBAAAC,iBAAA;EAAA;EAGEN,EACF;IACA,IAAAX,iBAAA,CAAAY,mBAAO,iBAAiB,IAAAjB,kBAAA,CAA0BY,GAAG,EAAAN,YAAA,CAAAY,aAAkB;MACvEJ,QAAA,iBAAO,IAAAd,kBAAO,CAAAY,GAAA,EAAUL,eAAe;IACvC;IACD,IAAAH,aAAA,CAAAe,MAAA,EAAAjB,YAAA,CAAAkB,MAAA,CAAAC,SAAA,8BAAAC,iBAAA;IAED,CAAG,GAAAlB,aAAA,CAAAe,MAAA,EAAAjB,YAAA,CAAAkB,MAAA,CAAAC,SAAA,aAA+D,GAAAC,iBAAA;IAChEpB,YAAY,CAAAqB,SAAA,CAAAC,KAAA,CAAAtB,YAAa,CAAAkB,MAAS,CAAAC,SAAM;EACxC;EAAAL,EAAA,wDACG;IAGH,IAAAS,GAAA,GAAArB,aAAA,CAAAsB,MAAA,CAAAC,KAAA,CAAAC,OAAA;IACA,IAAAvB,iBAAA,CAAAY,mBAAY,qBAAAjB,kBAAA,CAAAY,GAAA,EAAAN,YAAA,CAAAY,aAAA;MACVJ,QAAA,iBAAO,IAAAd,kBAAiB,CAAAY,GAAA,EAAAL,eAAA;IAAA;IACC,IACvBH,aAAW,CAAAe,MAAA,EAAAM,GAAA,EAAAI,oBAAiB,CAAAzB,aAAA,CAAAe,MAAA,CAAAW,gBAAA;MAC9BC,KAAC,EAAA3B,aAAA,CAAAe,MAAA,CAAAa,GAAA,CAAAvB,KAAA;MACHwB,SAAA,EAAA7B,aAAA,CAAAe,MAAA,CAAAa,GAAA,CAAAE,MAAA;IACA;IACDT,GAAA,CAAAU,WAAA;EACF","ignoreList":[]}