@gympass/yoga 7.88.0 → 7.88.2

package/esm/RadioGroup/RadioGroup.theme.js

@@ -0,0 +1,56 @@
+const RadioGroup = ({
+  radii,
+  colors,
+  fontWeights,
+  spacing,
+  borders,
+  fontSizes
+}) => ({
+  button: {
+    border: {
+      radius: radii.circle,
+      width: borders.small,
+      color: colors.elements.backgroundAndDisabled
+    },
+    backgroundColor: "transparent",
+    padding: {
+      right: spacing.large,
+      left: spacing.large
+    },
+    height: {
+      normal: 40,
+      small: 32
+    }
+  },
+  radio: {
+    size: 20,
+    backgroundColor: colors.elements.selectionAndIcons,
+    border: {
+      radius: radii.circle
+    }
+  },
+  font: {
+    size: fontSizes.small,
+    color: colors.text.primary
+  },
+  hover: {
+    backgroundColor: colors.elements.backgroundAndDisabled
+  },
+  disabled: {
+    backgroundColor: colors.elements.backgroundAndDisabled
+  },
+  checked: {
+    backgroundColor: colors.primary,
+    font: {
+      color: colors.white,
+      weight: fontWeights.bold
+    },
+    hover: {
+      backgroundColor: colors.primary
+    }
+  }
+});
+var RadioGroup_theme_default = RadioGroup;
+export {
+  RadioGroup_theme_default as default
+};

package/esm/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const RadioGroupContext = createContext({});
+var RadioGroupContext_default = RadioGroupContext;
+export {
+  RadioGroupContext_default as default
+};

package/esm/RadioGroup/index.js

@@ -0,0 +1,7 @@
+import { RadioGroup, RadioButton, Radio } from "./web";
+RadioGroup.Button = RadioButton;
+RadioGroup.Radio = Radio;
+var RadioGroup_default = RadioGroup;
+export {
+  RadioGroup_default as default
+};

package/esm/RadioGroup/index.native.js

@@ -0,0 +1,7 @@
+import { RadioGroup, RadioButton, Radio } from "./native";
+RadioGroup.Button = RadioButton;
+RadioGroup.Radio = Radio;
+var index_native_default = RadioGroup;
+export {
+  index_native_default as default
+};

package/esm/RadioGroup/native/Button/RadioButton.js

@@ -0,0 +1,113 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import React, { useContext } from "react";
+import { string, oneOfType, number, node } from "prop-types";
+import { TouchableWithoutFeedback } from "react-native";
+import styled from "styled-components";
+import RadioGroupContext from "../../RadioGroupContext";
+const RadioMark = styled.View(
+  ({
+    theme: {
+      yoga: {
+        components: { radiogroup }
+      }
+    },
+    small,
+    checked
+  }) => `
+  align-items: center;
+  justify-content: center;
+
+  height: ${small ? radiogroup.button.height.small : radiogroup.button.height.normal}px;
+  padding-left: ${radiogroup.button.padding.left}px;
+  padding-right: ${radiogroup.button.padding.right}px;
+
+  background-color: ${radiogroup.button.backgroundColor};
+  border-radius: ${radiogroup.button.border.radius}px;
+
+  font-size: ${radiogroup.font.size}px;
+
+  ${checked ? `
+          background-color: ${radiogroup.checked.backgroundColor};
+        ` : ``}
+`
+);
+const Text = styled.Text(
+  ({
+    theme: {
+      yoga: {
+        baseFont,
+        components: { radiogroup }
+      }
+    },
+    checked
+  }) => `
+    font-family: ${baseFont.family};
+    color: ${radiogroup.font.color};
+
+    ${checked ? `
+          color: ${radiogroup.checked.font.color};
+          font-weight: ${radiogroup.checked.font.weight};
+        ` : ""}
+    `
+);
+const RadioGroupButton = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { value, children } = _b, rest = __objRest(_b, ["value", "children"]);
+    const _a2 = useContext(RadioGroupContext), { onChange, small, selectedValue } = _a2, context = __objRest(_a2, ["onChange", "small", "selectedValue"]);
+    const inputValue = value || children;
+    const checked = inputValue === selectedValue;
+    return /* @__PURE__ */ jsx(
+      TouchableWithoutFeedback,
+      __spreadProps(__spreadValues({
+        onPress: () => {
+          onChange({ value: inputValue });
+        }
+      }, context), {
+        children: /* @__PURE__ */ jsx(RadioMark, __spreadProps(__spreadValues({ small, checked, ref }, rest), { children: /* @__PURE__ */ jsx(Text, { checked, children }) }))
+      })
+    );
+  }
+);
+RadioGroupButton.displayName = "RadioGroup.Button";
+RadioGroupButton.propTypes = {
+  value: oneOfType([string, number]),
+  children: node.isRequired
+};
+RadioGroupButton.defaultProps = {
+  value: ""
+};
+var RadioButton_default = RadioGroupButton;
+export {
+  RadioButton_default as default
+};

package/esm/RadioGroup/native/Button/RadioButton.test.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import RadioGroup from "../..";
+import ThemeProvider from "../../../Theme";
+import RadioGroupContext from "../../RadioGroupContext";
+describe("<RadioGroup />", () => {
+  describe("<RadioGroup.Button />", () => {
+    describe("Snapshots", () => {
+      it("should match snapshot with default radio button", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Radio 1" }) })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+      it("should match snapshot with small radio button", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { small: true }, children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Radio 1" }) }) })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+    });
+    describe("Props", () => {
+      it("checked should be the selectedValue provided from Context", () => {
+        const { getAllByText } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { selectedValue: "Radio 2" }, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+            /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Radio 1" }),
+            /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Radio 2" })
+          ] }) })
+        );
+        const [radio, radio2] = getAllByText(/^Radio/);
+        expect(radio.props.checked).toBe(false);
+        expect(radio2.props.checked).toBe(true);
+      });
+    });
+    describe("Events", () => {
+      it("should call onchange from Context", () => {
+        const onChangeMock = jest.fn();
+        const { getByText } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { onChange: onChangeMock }, children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Radio 1" }) }) })
+        );
+        const radio = getByText(/^Radio/);
+        fireEvent.press(radio);
+        expect(onChangeMock).toHaveBeenCalled();
+      });
+      it("value should be as prop value", () => {
+        const onChangeMock = jest.fn();
+        const { getByText } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { onChange: onChangeMock }, children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Button, { value: "radio1", children: "Radio 1" }) }) })
+        );
+        const radio = getByText(/^Radio/);
+        fireEvent.press(radio);
+        expect(onChangeMock).toHaveBeenCalledWith({
+          value: "radio1"
+        });
+      });
+      it("value should be children if prop value is ommited", () => {
+        const onChangeMock = jest.fn();
+        const { getByText } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { onChange: onChangeMock }, children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Radio 1" }) }) })
+        );
+        const radio = getByText(/^Radio/);
+        fireEvent.press(radio);
+        expect(onChangeMock).toHaveBeenCalledWith({
+          value: "Radio 1"
+        });
+      });
+    });
+  });
+});

package/esm/RadioGroup/native/Radio/Radio.js

@@ -0,0 +1,171 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useContext, useState } from "react";
+import styled from "styled-components";
+import { string, oneOfType, number, bool } from "prop-types";
+import { TouchableWithoutFeedback } from "react-native";
+import { hexToRgb } from "@gympass/yoga-common";
+import RadioGroupContext from "../../RadioGroupContext";
+const RadioMark = styled.View(
+  ({
+    theme: {
+      yoga: {
+        colors: { white },
+        components: { radiogroup }
+      }
+    },
+    checked,
+    disabled,
+    pressed
+  }) => `
+  justify-content: center;
+  align-items: center;
+  
+  height: ${radiogroup.radio.size}px;
+  width: ${radiogroup.radio.size}px;
+
+  background-color: ${pressed ? hexToRgb(radiogroup.hover.backgroundColor, 0.75) : white};
+
+  border-width: ${radiogroup.radio.size * 0.1}px;
+  border-style: solid;
+  border-color: ${radiogroup.radio.backgroundColor};
+  border-radius: ${radiogroup.radio.border.radius}px;
+
+  ${checked ? `
+          border-color: ${radiogroup.checked.backgroundColor};
+          background-color: ${pressed ? hexToRgb(radiogroup.checked.hover.backgroundColor, 0.75) : white}
+        ` : ``}
+
+  ${disabled ? `
+          border-color: ${radiogroup.disabled.backgroundColor};
+        ` : ``}
+`
+);
+const Dot = styled.View(
+  ({
+    theme: {
+      yoga: {
+        components: { radiogroup }
+      }
+    },
+    checked,
+    disabled
+  }) => `
+  height: ${radiogroup.radio.size * 0.5}px;
+  width: ${radiogroup.radio.size * 0.5}px;
+
+  background-color: ${radiogroup.radio.backgroundColor};
+  border-radius: ${radiogroup.radio.border.radius}px;
+
+  ${checked ? `
+          background-color: ${radiogroup.checked.backgroundColor};
+        ` : ``}
+
+  ${disabled ? `
+          background-color: ${radiogroup.disabled.backgroundColor};
+        ` : ``}
+`
+);
+const Shadow = styled.View(
+  ({
+    checked,
+    theme: {
+      yoga: {
+        components: { radiogroup }
+      }
+    }
+  }) => `
+  position: absolute;
+  height: ${radiogroup.radio.size + radiogroup.radio.size * 0.4 * 2}px;
+  width: ${radiogroup.radio.size + radiogroup.radio.size * 0.4 * 2}px;
+
+  border-width: ${radiogroup.radio.size * 0.4}px;
+  border-style: solid;
+  border-color: ${checked ? hexToRgb(radiogroup.checked.hover.backgroundColor, 0.75) : hexToRgb(radiogroup.hover.backgroundColor, 0.75)};
+  border-radius: ${radiogroup.radio.border.radius}px;
+
+  opacity: 0.75;
+`
+);
+const RadioGroupRadio = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { value, disabled } = _b, rest = __objRest(_b, ["value", "disabled"]);
+    const _a2 = useContext(RadioGroupContext), { onChange, small, selectedValue } = _a2, context = __objRest(_a2, ["onChange", "small", "selectedValue"]);
+    const [pressing, togglePressing] = useState(false);
+    const inputValue = value;
+    const checked = inputValue === selectedValue;
+    return /* @__PURE__ */ jsx(
+      TouchableWithoutFeedback,
+      __spreadProps(__spreadValues({
+        onPressIn: () => {
+          togglePressing(true);
+        },
+        onPress: () => {
+          onChange({ value: inputValue });
+        },
+        onPressOut: () => {
+          togglePressing(false);
+        },
+        disabled
+      }, context), {
+        children: /* @__PURE__ */ jsxs(
+          RadioMark,
+          __spreadProps(__spreadValues({
+            checked,
+            disabled,
+            pressed: pressing,
+            ref
+          }, rest), {
+            children: [
+              checked && /* @__PURE__ */ jsx(Dot, { checked, disabled }),
+              pressing && /* @__PURE__ */ jsx(Shadow, { checked })
+            ]
+          })
+        )
+      })
+    );
+  }
+);
+RadioGroupRadio.displayName = "RadioGroup.Radio";
+RadioGroupRadio.propTypes = {
+  disabled: bool,
+  value: oneOfType([string, number])
+};
+RadioGroupRadio.defaultProps = {
+  disabled: false,
+  value: ""
+};
+var Radio_default = RadioGroupRadio;
+export {
+  Radio_default as default
+};

package/esm/RadioGroup/native/Radio/Radio.test.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import RadioGroup from "../..";
+import ThemeProvider from "../../../Theme";
+import RadioGroupContext from "../../RadioGroupContext";
+describe("<RadioGroup />", () => {
+  describe("<RadioGroup.Radio />", () => {
+    describe("Snapshots", () => {
+      it("should match snapshot with default radio", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Radio, {}) })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+      it("should match snapshot with disabled radio", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Radio, { disabled: true }) })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+      it("should match snapshot with default radio", () => {
+        const { root, toJSON } = render(
+          /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Radio, {}) })
+        );
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+      it("should match snapshot with default radio pressed", () => {
+        const onChangeMock = jest.fn();
+        const { root, getByTestId, toJSON } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { onChange: onChangeMock }, children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Radio, { testID: "radio" }) }) })
+        );
+        const radio = getByTestId(/^radio/);
+        fireEvent.press(radio);
+        expect(toJSON(root)).toMatchSnapshot();
+      });
+    });
+    describe("Props", () => {
+      it("checked should be the selectedValue provided from Context", () => {
+        const { getAllByTestId } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { selectedValue: "Radio 2" }, children: /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+            /* @__PURE__ */ jsx(RadioGroup.Radio, { testID: "radio", value: "Radio 1" }),
+            /* @__PURE__ */ jsx(RadioGroup.Radio, { testID: "radio", value: "Radio 2" })
+          ] }) })
+        );
+        const [radio, radio2] = getAllByTestId(/^radio/);
+        expect(radio.props.checked).toBe(false);
+        expect(radio2.props.checked).toBe(true);
+      });
+    });
+    describe("Events", () => {
+      it("should call onchange from Context", () => {
+        const onChangeMock = jest.fn();
+        const { getByTestId } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { onChange: onChangeMock }, children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Radio, { testID: "radio" }) }) })
+        );
+        const radio = getByTestId(/^radio/);
+        fireEvent.press(radio);
+        expect(onChangeMock).toHaveBeenCalled();
+      });
+      it("value should be as prop value", () => {
+        const onChangeMock = jest.fn();
+        const { getByTestId } = render(
+          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { onChange: onChangeMock }, children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup.Radio, { value: "radio1", testID: "radio" }) }) })
+        );
+        const radio = getByTestId(/^radio/);
+        fireEvent.press(radio);
+        expect(onChangeMock).toHaveBeenCalledWith({
+          value: "radio1"
+        });
+      });
+    });
+  });
+});

package/esm/RadioGroup/native/RadioGroup.js

@@ -0,0 +1,107 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { View } from "react-native";
+import { string, func, oneOfType, number, bool, node } from "prop-types";
+import styled from "styled-components";
+import RadioGroupContext from "../RadioGroupContext";
+import RadioButton from "./Button/RadioButton";
+const Group = styled.View(
+  () => `
+    align-self: center;
+    position: relative;
+    flex-direction: row;
+  `
+);
+const GrayLine = styled.View(
+  ({
+    theme: {
+      yoga: {
+        components: { radiogroup }
+      }
+    }
+  }) => `
+    position: absolute;
+    height: 100%;
+    border-radius: ${radiogroup.button.border.radius}px;
+    border-width: ${radiogroup.button.border.width}px;
+    border-color: ${radiogroup.button.border.color};
+  `
+);
+const RadioGroup = (_a) => {
+  var _b = _a, { onChange, selectedValue, small, children } = _b, rest = __objRest(_b, ["onChange", "selectedValue", "small", "children"]);
+  const [groupSize, setGroupSize] = useState(0);
+  const isButton = React.Children.map(children, (child) => child.type).every(
+    (child) => child === RadioButton
+  );
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: __spreadValues({
+        selectedValue,
+        onChange,
+        small
+      }, rest),
+      children: /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsxs(
+        Group,
+        __spreadProps(__spreadValues({}, rest), {
+          onLayout: ({
+            nativeEvent: {
+              layout: { width }
+            }
+          }) => setGroupSize(width),
+          children: [
+            Boolean(isButton && groupSize) && /* @__PURE__ */ jsx(GrayLine, { style: { width: groupSize } }),
+            children
+          ]
+        })
+      ) })
+    }
+  );
+};
+RadioGroup.propTypes = {
+  onChange: func,
+  selectedValue: oneOfType([string, number]),
+  small: bool,
+  children: node.isRequired
+};
+RadioGroup.defaultProps = {
+  onChange: () => {
+  },
+  selectedValue: "",
+  small: false
+};
+var RadioGroup_default = RadioGroup;
+export {
+  RadioGroup_default as default
+};

package/esm/RadioGroup/native/RadioGroup.test.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import RadioGroup from "..";
+import ThemeProvider from "../../Theme";
+describe("<RadioGroup />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot with radio button as children", () => {
+      const { root, getAllByText, toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { children: [
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
+        ] }) })
+      );
+      expect(toJSON(root)).toMatchSnapshot();
+      expect(getAllByText(/^Option/)).toHaveLength(3);
+    });
+    it("should match snapshot with small radios", () => {
+      const { root, toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { small: true, children: [
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
+        ] }) })
+      );
+      expect(toJSON(root)).toMatchSnapshot();
+    });
+    it("should has setted the selected value", () => {
+      const { toJSON, getByText } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { selectedValue: "Option 2", children: [
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
+          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
+        ] }) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText("Option 2").props.checked).toBe(true);
+    });
+  });
+});
+describe("Events", () => {
+  it("should set the onchange for its children", () => {
+    const onChangeMock = jest.fn();
+    const { getByText } = render(
+      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { onChange: onChangeMock, children: [
+        /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
+        /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
+        /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
+      ] }) })
+    );
+    const firstOption = getByText("Option 1");
+    fireEvent.press(firstOption);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});

package/esm/RadioGroup/native/index.js

@@ -0,0 +1,8 @@
+import RadioGroup from "./RadioGroup";
+import RadioButton from "./Button/RadioButton";
+import Radio from "./Radio/Radio";
+export {
+  Radio,
+  RadioButton,
+  RadioGroup
+};