@nobak/design-system 1.0.0

package/lib/shared/components/Person/Person.js

@@ -0,0 +1,81 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React from 'react';
+// import clsx from 'clsx';
+import { Avatar } from "../Avatar";
+export var Person = function Person(_ref) {
+  var Component = _ref.component,
+    imageUrl = _ref.imageUrl,
+    fullname = _ref.fullname,
+    details = _ref.details,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    to = _ref.to,
+    customCss = _ref.customCss;
+  var variantAssert = function variantAssert() {
+    switch (variant) {
+      case 'landscape':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-col space-y-[8px] m-[8px] w-fit"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "mx-auto"
+        }, /*#__PURE__*/React.createElement(Avatar, {
+          imageUrl: imageUrl,
+          size: "tiny"
+        })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+          className: "text-p3-bold text-neutral-800"
+        }, fullname)));
+      case 'lab':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex space-x-[16px] m-[8px] w-fit"
+        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
+          imageUrl: imageUrl,
+          size: "medium"
+        })), /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-col-reverse"
+        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "text-p2-bold text-neutral-800"
+        }, fullname), /*#__PURE__*/React.createElement("div", {
+          className: "text-caption-bold text-primary-500"
+        }, details))));
+      case 'profile':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex space-x-[16px] m-[8px] h-fit w-fit"
+        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
+          imageUrl: imageUrl,
+          size: "medium"
+        })), /*#__PURE__*/React.createElement("div", {
+          className: "grid content-center"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "text-p2-bold text-neutral-800"
+        }, fullname), /*#__PURE__*/React.createElement("div", {
+          className: "text-caption-bold text-primary-500"
+        }, details)));
+      case 'card':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex space-x-[8px] w-fit"
+        }, /*#__PURE__*/React.createElement(Avatar, {
+          imageUrl: imageUrl,
+          size: "xtiny"
+        }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "mt-[2px] text-p3-bold text-neutral-800 align-middle"
+        }, fullname)));
+      default:
+        return /*#__PURE__*/React.createElement("div", {
+          className: "flex space-x-4 w-fit"
+        }, /*#__PURE__*/React.createElement(Avatar, {
+          imageUrl: imageUrl,
+          size: "tiny"
+        }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "mt-[5px] text-p3-bold text-neutral-800 align-middle"
+        }, fullname)));
+    }
+  };
+  switch (_typeof(to)) {
+    case 'string':
+      if (!!Component) return /*#__PURE__*/React.createElement(Component, {
+        to: "/".concat(to)
+      }, variantAssert());
+    default:
+      return variantAssert();
+  }
+};

package/lib/shared/components/Person/index.js

@@ -0,0 +1 @@
+export { Person } from "./Person";

package/lib/shared/components/Popover/Popover.js

@@ -0,0 +1,39 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { Popover as PopoverComponent, PopoverPanel, Transition } from '@headlessui/react';
+import React, { Fragment } from 'react';
+import { Button } from '..';
+export var Popover = function Popover(_ref) {
+  var children = _ref.children,
+    button = _ref.button;
+  var icon = button.icon,
+    size = button.size,
+    name = button.name;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React.createElement(PopoverComponent, {
+    className: "relative"
+  }, function (_ref2) {
+    var open = _ref2.open;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, _extends({
+      type: "popover"
+    }, button, {
+      size: size,
+      text: name,
+      icon: icon
+    }))), /*#__PURE__*/React.createElement(Transition, {
+      as: Fragment,
+      enter: "transition ease-out duration-200",
+      enterFrom: "opacity-0 translate-y-1",
+      enterTo: "opacity-100 translate-y-0",
+      leave: "transition ease-in duration-150",
+      leaveFrom: "opacity-100 translate-y-0",
+      leaveTo: "opacity-0 translate-y-1"
+    }, /*#__PURE__*/React.createElement(PopoverPanel, {
+      className: "absolute right-0 w-[300px] mt-2 origin-top-right border border-neutral-200 rounded-[10px] z-50"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "overflow-hidden rounded-[10px] shadow-lg"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "relative bg-neutral-100"
+    }, children)))));
+  }));
+};

package/lib/shared/components/Popover/index.js

@@ -0,0 +1 @@
+export { Popover } from "./Popover";

package/lib/shared/components/QRCode/QRCode.js

@@ -0,0 +1,329 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { isEqual } from "../../helpers";
+import qrGenerator from 'qrcode-generator';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+var QRCode = /*#__PURE__*/function (_React$Component) {
+  function QRCode(props) {
+    var _this;
+    _classCallCheck(this, QRCode);
+    _this = _callSuper(this, QRCode, [props]);
+    _this.canvas = /*#__PURE__*/React.createRef();
+    return _this;
+  }
+  _inherits(QRCode, _React$Component);
+  return _createClass(QRCode, [{
+    key: "drawRoundedSquare",
+    value:
+    /**
+     * Draw a rounded square in the canvas
+     */
+    function drawRoundedSquare(lineWidth, x, y, size, color, radii, fill, ctx) {
+      ctx.lineWidth = lineWidth;
+      ctx.fillStyle = color;
+      ctx.strokeStyle = color;
+
+      // Adjust coordinates so that the outside of the stroke is aligned to the edges
+      y += lineWidth / 2;
+      x += lineWidth / 2;
+      size -= lineWidth;
+      if (!Array.isArray(radii)) {
+        radii = [radii, radii, radii, radii];
+      }
+
+      // Radius should not be greater than half the size or less than zero
+      radii = radii.map(function (r) {
+        r = Math.min(r, size / 2);
+        return r < 0 ? 0 : r;
+      });
+      var rTopLeft = radii[0] || 0;
+      var rTopRight = radii[1] || 0;
+      var rBottomRight = radii[2] || 0;
+      var rBottomLeft = radii[3] || 0;
+      ctx.beginPath();
+      ctx.moveTo(x + rTopLeft, y);
+      ctx.lineTo(x + size - rTopRight, y);
+      if (rTopRight) ctx.quadraticCurveTo(x + size, y, x + size, y + rTopRight);
+      ctx.lineTo(x + size, y + size - rBottomRight);
+      if (rBottomRight) ctx.quadraticCurveTo(x + size, y + size, x + size - rBottomRight, y + size);
+      ctx.lineTo(x + rBottomLeft, y + size);
+      if (rBottomLeft) ctx.quadraticCurveTo(x, y + size, x, y + size - rBottomLeft);
+      ctx.lineTo(x, y + rTopLeft);
+      if (rTopLeft) ctx.quadraticCurveTo(x, y, x + rTopLeft, y);
+      ctx.closePath();
+      ctx.stroke();
+      if (fill) {
+        ctx.fill();
+      }
+    }
+
+    /**
+     * Draw a single positional pattern eye.
+     */
+  }, {
+    key: "drawPositioningPattern",
+    value: function drawPositioningPattern(ctx, cellSize, offset, row, col, color) {
+      var radii = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [0, 0, 0, 0];
+      var lineWidth = Math.ceil(cellSize);
+      var radiiOuter;
+      var radiiInner;
+      if (typeof radii !== 'number' && !Array.isArray(radii)) {
+        radiiOuter = radii.outer || 0;
+        radiiInner = radii.inner || 0;
+      } else {
+        radiiOuter = radii;
+        radiiInner = radiiOuter;
+      }
+      var colorOuter;
+      var colorInner;
+      if (typeof color !== 'string') {
+        colorOuter = color.outer;
+        colorInner = color.inner;
+      } else {
+        colorOuter = color;
+        colorInner = color;
+      }
+      var y = row * cellSize + offset;
+      var x = col * cellSize + offset;
+      var size = cellSize * 7;
+      if (!Array.isArray(radiiOuter)) return;
+      // Outer box
+      this.drawRoundedSquare(lineWidth, x, y, size, colorOuter, radiiOuter, false, ctx);
+      if (!Array.isArray(radiiInner)) return;
+      // Inner box
+      size = cellSize * 3;
+      y += cellSize * 2;
+      x += cellSize * 2;
+      this.drawRoundedSquare(lineWidth, x, y, size, colorInner, radiiInner, true, ctx);
+    }
+  }, {
+    key: "isInPositioninZone",
+    value:
+    /**
+     * Is this dot inside a positional pattern zone.
+     */
+    function isInPositioninZone(col, row, zones) {
+      return zones.some(function (zone) {
+        return row >= zone.row && row <= zone.row + 7 && col >= zone.col && col <= zone.col + 7;
+      });
+    }
+  }, {
+    key: "transformPixelLengthIntoNumberOfCells",
+    value: function transformPixelLengthIntoNumberOfCells(pixelLength, cellSize) {
+      return pixelLength / cellSize;
+    }
+  }, {
+    key: "isCoordinateInImage",
+    value: function isCoordinateInImage(col, row, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage) {
+      if (logoImage) {
+        var numberOfCellsMargin = 2;
+        var firstRowOfLogo = this.transformPixelLengthIntoNumberOfCells(dxLogo, cellSize);
+        var firstColumnOfLogo = this.transformPixelLengthIntoNumberOfCells(dyLogo, cellSize);
+        var logoWidthInCells = this.transformPixelLengthIntoNumberOfCells(dWidthLogo, cellSize) - 1;
+        var logoHeightInCells = this.transformPixelLengthIntoNumberOfCells(dHeightLogo, cellSize) - 1;
+        return row >= firstRowOfLogo - numberOfCellsMargin && row <= firstRowOfLogo + logoWidthInCells + numberOfCellsMargin // check rows
+        && col >= firstColumnOfLogo - numberOfCellsMargin && col <= firstColumnOfLogo + logoHeightInCells + numberOfCellsMargin; // check cols
+      } else {
+        return false;
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      return !isEqual(this.props, nextProps);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.update();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.update();
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      var _this$props = this.props,
+        value = _this$props.value,
+        ecLevel = _this$props.ecLevel,
+        enableCORS = _this$props.enableCORS,
+        size = _this$props.size,
+        quietZone = _this$props.quietZone,
+        bgColor = _this$props.bgColor,
+        fgColor = _this$props.fgColor,
+        logoImage = _this$props.logoImage,
+        logoWidth = _this$props.logoWidth,
+        logoHeight = _this$props.logoHeight,
+        logoOpacity = _this$props.logoOpacity,
+        removeQrCodeBehindLogo = _this$props.removeQrCodeBehindLogo,
+        qrStyle = _this$props.qrStyle,
+        eyeRadius = _this$props.eyeRadius,
+        eyeColor = _this$props.eyeColor;
+      var qrCode = qrGenerator(0, ecLevel);
+      qrCode.addData(QRCode.utf16to8(value));
+      qrCode.make();
+      var canvas = ReactDOM.findDOMNode(this.canvas.current);
+      var ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      var canvasSize = +size + 2 * +quietZone;
+      var length = qrCode.getModuleCount();
+      var cellSize = size / length;
+      var scale = window.devicePixelRatio || 1;
+      canvas.height = canvas.width = canvasSize * scale;
+      ctx.scale(scale, scale);
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, canvasSize, canvasSize);
+      var offset = +quietZone;
+      var dWidthLogo = logoWidth || size * 0.2;
+      var dHeightLogo = logoHeight || dWidthLogo;
+      var dxLogo = (size - dWidthLogo) / 2;
+      var dyLogo = (size - dHeightLogo) / 2;
+      var positioningZones = [{
+        row: 0,
+        col: 0
+      }, {
+        row: 0,
+        col: length - 7
+      }, {
+        row: length - 7,
+        col: 0
+      }];
+      ctx.strokeStyle = fgColor;
+      if (qrStyle === 'dots') {
+        ctx.fillStyle = fgColor;
+        var radius = cellSize / 2;
+        for (var row = 0; row < length; row++) {
+          for (var col = 0; col < length; col++) {
+            if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones) && !(removeQrCodeBehindLogo && logoImage && this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
+              ctx.beginPath();
+              ctx.arc(Math.round(col * cellSize) + radius + offset, Math.round(row * cellSize) + radius + offset, radius / 100 * 75, 0, 2 * Math.PI, false);
+              ctx.closePath();
+              ctx.fill();
+            }
+          }
+        }
+      } else {
+        for (var _row = 0; _row < length; _row++) {
+          for (var _col = 0; _col < length; _col++) {
+            if (qrCode.isDark(_row, _col) && !this.isInPositioninZone(_row, _col, positioningZones) && !(removeQrCodeBehindLogo && logoImage && this.isCoordinateInImage(_row, _col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
+              ctx.fillStyle = fgColor;
+              var w = Math.ceil((_col + 1) * cellSize) - Math.floor(_col * cellSize);
+              var h = Math.ceil((_row + 1) * cellSize) - Math.floor(_row * cellSize);
+              ctx.fillRect(Math.round(_col * cellSize) + offset, Math.round(_row * cellSize) + offset, w, h);
+            }
+          }
+        }
+      }
+
+      // Draw positioning patterns
+      for (var i = 0; i < 3; i++) {
+        var _positioningZones$i = positioningZones[i],
+          _row2 = _positioningZones$i.row,
+          _col2 = _positioningZones$i.col;
+        var radii = eyeRadius;
+        var color = void 0;
+        if (Array.isArray(radii)) {
+          radii = radii[i];
+        }
+        if (typeof radii == 'number') {
+          radii = [radii, radii, radii, radii];
+        }
+        if (!eyeColor) {
+          // if not specified, eye color is the same as foreground, 
+          color = fgColor;
+        } else {
+          if (Array.isArray(eyeColor)) {
+            // if array, we pass the single color
+            color = eyeColor[i];
+          } else {
+            color = eyeColor;
+          }
+        }
+        this.drawPositioningPattern(ctx, cellSize, offset, _row2, _col2, color, radii);
+      }
+      if (logoImage) {
+        var image = new Image();
+        if (enableCORS) {
+          image.crossOrigin = 'Anonymous';
+        }
+        image.onload = function () {
+          ctx.save();
+          ctx.globalAlpha = logoOpacity;
+          ctx.drawImage(image, dxLogo + offset, dyLogo + offset, dWidthLogo, dHeightLogo);
+          ctx.restore();
+        };
+        image.src = logoImage;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$id;
+      var size = +this.props.size + 2 * +this.props.quietZone;
+      return /*#__PURE__*/React.createElement('canvas', {
+        id: (_this$props$id = this.props.id) !== null && _this$props$id !== void 0 ? _this$props$id : 'react-qrcode-logo',
+        height: size,
+        width: size,
+        style: {
+          height: size + 'px',
+          width: size + 'px',
+          borderRadius: this.props.borderRadius
+        },
+        ref: this.canvas
+      });
+    }
+  }], [{
+    key: "utf16to8",
+    value: function utf16to8(str) {
+      var out = '',
+        i,
+        c;
+      var len = str.length;
+      for (i = 0; i < len; i++) {
+        c = str.charCodeAt(i);
+        if (c >= 0x0001 && c <= 0x007F) {
+          out += str.charAt(i);
+        } else if (c > 0x07FF) {
+          out += String.fromCharCode(0xE0 | c >> 12 & 0x0F);
+          out += String.fromCharCode(0x80 | c >> 6 & 0x3F);
+          out += String.fromCharCode(0x80 | c >> 0 & 0x3F);
+        } else {
+          out += String.fromCharCode(0xC0 | c >> 6 & 0x1F);
+          out += String.fromCharCode(0x80 | c >> 0 & 0x3F);
+        }
+      }
+      return out;
+    }
+  }]);
+}(React.Component);
+_defineProperty(QRCode, "defaultProps", {
+  value: 'https://reactjs.org/',
+  ecLevel: 'M',
+  enableCORS: false,
+  size: 300,
+  quietZone: 10,
+  bgColor: 'black',
+  fgColor: 'white',
+  logoOpacity: 1,
+  removeQrCodeBehindLogo: true,
+  qrStyle: 'dots',
+  eyeColor: 'white',
+  eyeRadius: [10, 10, 10],
+  borderRadius: 20
+});
+export { QRCode };

package/lib/shared/components/QRCode/index.js

@@ -0,0 +1 @@
+export { QRCode } from "./QRCode";

package/lib/shared/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,35 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from 'react';
+import { useState } from 'react';
+import { DefaultGroup, VerticalGroup } from "./components";
+
+// import { iconAssert } from 'components/Icon/Icon';
+
+export var RadioGroup = function RadioGroup(_ref) {
+  var options = _ref.options,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'horizontal' : _ref$variant,
+    setValue = _ref.setValue;
+  var _useState = useState(options[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var handleSelection = function handleSelection(value) {
+    setValue && setValue(value);
+    setSelected(value);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, variant === 'horizontal' && /*#__PURE__*/React.createElement(DefaultGroup, {
+    handleSelection: handleSelection,
+    options: options,
+    selected: selected
+  }), variant === 'vertical' && /*#__PURE__*/React.createElement(VerticalGroup, {
+    handleSelection: handleSelection,
+    options: options,
+    selected: selected
+  })));
+};

package/lib/shared/components/RadioGroup/components/DefaultGroup.js

@@ -0,0 +1,71 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../..";
+import { RadioGroup as RadioGroupComponent } from '@headlessui/react';
+export var DefaultGroup = function DefaultGroup(_ref) {
+  var handleSelection = _ref.handleSelection,
+    selected = _ref.selected,
+    options = _ref.options;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full py-[16px]"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-full mx-auto"
+  }, /*#__PURE__*/React.createElement(RadioGroupComponent, {
+    value: selected,
+    onChange: function onChange(e) {
+      return handleSelection(e);
+    }
+  }, /*#__PURE__*/React.createElement(RadioGroupComponent.Label, {
+    className: "sr-only"
+  }, "Label"), /*#__PURE__*/React.createElement("div", {
+    className: "space-y-[12px]"
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(RadioGroupComponent.Option, {
+      key: option.name,
+      value: option,
+      disabled: option.disabled,
+      className: function className(_ref2) {
+        var active = _ref2.active,
+          checked = _ref2.checked;
+        return "".concat(active ? 'ring-[2px] ring-secondary-1000' : "\n                    hover:border-[1px] hover:border-secondary-800\n                    hover:ring-[2px] hover:ring-secondary-1000 hover:ring-offset-neutral-50\n                    focus:border-[2px] focus:border-secondary-800\n                    focus:ring-[2px] focus:ring-primary-1000 focus:ring-offset-neutral-50\n                    ", "\n                ").concat(checked ? 'bg-neutral-100 border-secondary-400' : 'bg-neutral-50 text-neutral-800', "\n                  relative rounded-[16px] shadow-md px-5 py-4 cursor-pointer flex outline-none\n                  border-[1px]\n                  ");
+      }
+    }, function (_ref3) {
+      var active = _ref3.active,
+        checked = _ref3.checked;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "text-p3-bold"
+      }, /*#__PURE__*/React.createElement(RadioGroupComponent.Label, {
+        as: "div"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(active ? 'text-secondary-1000' : checked ? 'text-secondary-800' : 'text-neutral-1200')
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: option.icon
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(active ? 'text-secondary-1000' : checked ? 'text-secondary-800' : 'text-neutral-1200')
+      }, option.name)), /*#__PURE__*/React.createElement(RadioGroupComponent.Description, {
+        as: "span",
+        className: "inline ".concat(checked ? 'text-secondary-1400' : 'text-neutral-1400')
+      }))), checked && /*#__PURE__*/React.createElement("div", {
+        className: "flex-shrink-0 text-neutral-800 bg-gradient-to-tr from-primary-1100 via-secondary-1100 to-secondary-1300 rounded-full"
+      }, /*#__PURE__*/React.createElement(CheckIcon, {
+        className: "w-6 h-6"
+      }))));
+    });
+  }))))));
+};
+function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M7 13l3 3 7-7",
+    stroke: "#fff",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}

package/lib/shared/components/RadioGroup/components/VerticalGroup.js

@@ -0,0 +1,83 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Image, Badge } from "../..";
+import { RadioGroup as RadioGroupComponent } from '@headlessui/react';
+import { motion } from "framer-motion";
+export var VerticalGroup = function VerticalGroup(_ref) {
+  var handleSelection = _ref.handleSelection,
+    selected = _ref.selected,
+    options = _ref.options;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioGroupComponent, {
+    value: selected,
+    onChange: function onChange(e) {
+      return handleSelection(e);
+    }
+  }, /*#__PURE__*/React.createElement(RadioGroupComponent.Label, {
+    className: "sr-only"
+  }, "Label"), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row space-x-[20px]"
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(RadioGroupComponent.Option, {
+      key: option.name,
+      value: option,
+      disabled: option.disabled,
+      className: function className(_ref2) {
+        var active = _ref2.active,
+          checked = _ref2.checked;
+        return "".concat(active ? 'ring-2 ring-offset-2 ring-offset-sky-300 ring-white ring-opacity-60' : '', "\n                ").concat(checked ? 'bg-neutral-100 text-neutral-800' : 'bg-neutral-50 text-neutral-800', "\n                  bg-primary-400 relative rounded-lg shadow-md   ").concat(option.disabled ? 'cursor-not-allowed' : 'cursor-pointer', " flex focus:outline-none w-[200px] overflow-hidden");
+      }
+    }, function (_ref3) {
+      var active = _ref3.active,
+        checked = _ref3.checked;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center"
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RadioGroupComponent.Label, {
+        as: "p",
+        className: "font-medium  ".concat(checked ? 'text-neutral-800' : 'text-neutral-900')
+      }, /*#__PURE__*/React.createElement(motion.div, {
+        className: "absolute",
+        initial: {
+          scale: 1
+        },
+        whileHover: {
+          scale: option.disabled ? 1 : 1.2
+        }
+      }, /*#__PURE__*/React.createElement(Image, {
+        fullHeight: true,
+        imageUrl: option.image_url,
+        customCss: "z-[1] ".concat(option.disabled && 'filter grayscale')
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "relative h-[300px]"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-col justify-end w-[200px]  px-[16px] py-[20px]"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex flex-row justify-between h-6"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ""
+      }, option.name), checked && /*#__PURE__*/React.createElement("div", {
+        className: "flex-shrink-0 text-neutral-800 bg-gradient-to-tr from-primary-500 via-secondary-500 to-secondary-400 rounded-full"
+      }, /*#__PURE__*/React.createElement(CheckIcon, {
+        className: "w-6 h-6"
+      })), !!option.badge && /*#__PURE__*/React.createElement(Badge, {
+        title: option.badge
+      }))))), /*#__PURE__*/React.createElement(RadioGroupComponent.Description, {
+        as: "span",
+        className: "inline ".concat(checked ? 'text-neutral-300' : 'text-neutral-600')
+      })))));
+    });
+  }))));
+};
+function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M7 13l3 3 7-7",
+    stroke: "#fff",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}

package/lib/shared/components/RadioGroup/components/index.js

@@ -0,0 +1,2 @@
+export { DefaultGroup } from "./DefaultGroup";
+export { VerticalGroup } from "./VerticalGroup";

package/lib/shared/components/RadioGroup/index.js

@@ -0,0 +1 @@
+export { RadioGroup } from "./RadioGroup";