@bolio-ui/core 1.0.0

package/esm/radio/radio-description.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+
+function RadioDescriptionComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2910110723", [theme.palette.accents_3, SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0, 'calc(var(--radio-size) + var(--radio-size) * 0.375)')]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2910110723",
+    dynamic: [theme.palette.accents_3, SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0, 'calc(var(--radio-size) + var(--radio-size) * 0.375)')]
+  }, "span.__jsx-style-dynamic-selector{color:".concat(theme.palette.accents_3, ";font-size:").concat(SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'calc(var(--radio-size) + var(--radio-size) * 0.375)'), ";}")));
+}
+
+RadioDescriptionComponent.displayName = 'BolioUIRadioDescription';
+var RadioDescription = withScale(RadioDescriptionComponent);
+export default RadioDescription;

package/esm/radio/radio-group.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "onChange", "value", "children", "className", "initialValue", "useRow"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { RadioContext } from './radio-context';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function RadioGroupComponent(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      initialValue = _ref.initialValue,
+      _ref$useRow = _ref.useRow,
+      useRow = _ref$useRow === void 0 ? false : _ref$useRow,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfVal = _useState2[0],
+      setSelfVal = _useState2[1];
+
+  var updateState = function updateState(nextValue) {
+    setSelfVal(nextValue);
+    onChange && onChange(nextValue);
+  };
+
+  var providerValue = useMemo(function () {
+    return {
+      updateState: updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      value: selfVal
+    };
+  }, [disabled, selfVal]);
+  useEffect(function () {
+    if (value === undefined) return;
+    setSelfVal(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement(RadioContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2984632262", [useRow ? 'col' : 'column', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), useRow ? 0 : 'var(--radio-group-gap)', useRow ? 'var(--radio-group-gap)' : 0, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || useClasses('radio-group', className) || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2984632262",
+    dynamic: [useRow ? 'col' : 'column', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), useRow ? 0 : 'var(--radio-group-gap)', useRow ? 'var(--radio-group-gap)' : 0, SCALES.font(1)]
+  }, ".radio-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:".concat(useRow ? 'col' : 'column', ";-ms-flex-direction:").concat(useRow ? 'col' : 'column', ";flex-direction:").concat(useRow ? 'col' : 'column', ";--radio-group-gap:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.radio-group.__jsx-style-dynamic-selector .radio{margin-top:").concat(useRow ? 0 : 'var(--radio-group-gap)', ";margin-left:").concat(useRow ? 'var(--radio-group-gap)' : 0, ";--radio-size:").concat(SCALES.font(1), ";}.radio-group.__jsx-style-dynamic-selector .radio:first-of-type{margin:0;}")));
+}
+
+RadioGroupComponent.displayName = 'BolioUIRadioGroup';
+var RadioGroup = withScale(RadioGroupComponent);
+export default RadioGroup;

package/esm/radio/radio.js

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "checked", "onChange", "disabled", "type", "value", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { useRadioContext } from './radio-context';
+import RadioDescription from './radio-description';
+import { pickChild } from '../utils/collections';
+import useWarning from '../utils/use-warning';
+import { getColors } from './styles';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function RadioComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      checked = _ref.checked,
+      onChange = _ref.onChange,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      radioValue = _ref.value,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(!!checked),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfChecked = _useState2[0],
+      setSelfChecked = _useState2[1];
+
+  var _useRadioContext = useRadioContext(),
+      groupValue = _useRadioContext.value,
+      disabledAll = _useRadioContext.disabledAll,
+      inGroup = _useRadioContext.inGroup,
+      updateState = _useRadioContext.updateState;
+
+  var _pickChild = pickChild(children, RadioDescription),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      withoutDescChildren = _pickChild2[0],
+      DescChildren = _pickChild2[1];
+
+  if (inGroup) {
+    if (checked !== undefined) {
+      useWarning('Remove props "checked" if in the Radio.Group.', 'Radio');
+    }
+
+    if (radioValue === undefined) {
+      useWarning('Props "value" must be deinfed if in the Radio.Group.', 'Radio');
+    }
+
+    useEffect(function () {
+      setSelfChecked(groupValue === radioValue);
+    }, [groupValue, radioValue]);
+  }
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, type);
+  }, [theme.palette, type]),
+      label = _useMemo.label,
+      border = _useMemo.border,
+      bg = _useMemo.bg;
+
+  var isDisabled = useMemo(function () {
+    return disabled || disabledAll;
+  }, [disabled, disabledAll]);
+
+  var changeHandler = function changeHandler(event) {
+    if (isDisabled) return;
+    var selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: event.stopPropagation,
+      preventDefault: event.preventDefault,
+      nativeEvent: event
+    };
+    setSelfChecked(!selfChecked);
+
+    if (inGroup) {
+      updateState && updateState(radioValue);
+    }
+
+    onChange && onChange(selfEvent);
+  };
+
+  useEffect(function () {
+    if (checked === undefined) return;
+    setSelfChecked(Boolean(checked));
+  }, [checked]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('radio', className) || "")
+  }, /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]])
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    value: radioValue,
+    checked: selfChecked,
+    onChange: changeHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + "name"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('point', {
+      active: selfChecked
+    }) || "")
+  }), withoutDescChildren), DescChildren && DescChildren), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3162430237",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]
+  }, "input.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;font-size:0;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:").concat(isDisabled ? theme.palette.accents_4 : label, ";cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ").concat(border, ";-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:var(--radio-size);width:var(--radio-size);border-radius:50%;background-color:").concat(isDisabled ? theme.palette.accents_4 : bg, ";}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}")));
+}
+
+RadioComponent.displayName = 'BolioUIRadio';
+var Radio = withScale(RadioComponent);
+export default Radio;

package/esm/radio/stories.js

@@ -0,0 +1,98 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Radio from '.';
+import Grid from '../grid';
+export default {
+  title: 'Data Entry/Radio',
+  component: Radio
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false
+  }, "Option 1")));
+};
+export var Text = function Text() {
+  var _useState = useState('1'),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var handler = function handler(val) {
+    setState(val);
+    console.log(val);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
+    value: state,
+    onChange: handler
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "1"
+  }, "Option 1"), /*#__PURE__*/React.createElement(Radio, {
+    value: "2"
+  }, "Option 2"))));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false
+  }, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false,
+    type: "primary"
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false,
+    type: "secondary"
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false,
+    type: "success"
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false,
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false,
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio, {
+    checked: false,
+    type: "info"
+  }, "Info")));
+};
+export var Description = function Description() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
+    value: "1",
+    onChange: function onChange(val) {
+      return console.log(val);
+    }
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "1"
+  }, "Option 1", /*#__PURE__*/React.createElement(Radio.Description, null, "Example description for Option 1")))));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
+    value: "1",
+    disabled: true
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "1"
+  }, "Option 1"), /*#__PURE__*/React.createElement(Radio, {
+    value: "2"
+  }, "Option 2"))));
+};
+export var Row = function Row() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Radio.Group, {
+    value: "1",
+    useRow: true
+  }, /*#__PURE__*/React.createElement(Radio, {
+    value: "1"
+  }, "Option 1", /*#__PURE__*/React.createElement(Radio.Desc, null, "Description for Option1")), /*#__PURE__*/React.createElement(Radio, {
+    value: "2"
+  }, "Option 2", /*#__PURE__*/React.createElement(Radio.Desc, null, "Description for Option2")))));
+};

package/esm/radio/styles.js

@@ -0,0 +1,41 @@
+export var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      label: palette.foreground,
+      border: palette.border,
+      bg: palette.foreground
+    },
+    primary: {
+      label: palette.primary,
+      border: palette.primary,
+      bg: palette.primary
+    },
+    secondary: {
+      label: palette.secondary,
+      border: palette.secondary,
+      bg: palette.secondary
+    },
+    success: {
+      label: palette.success,
+      border: palette.success,
+      bg: palette.success
+    },
+    warning: {
+      label: palette.warning,
+      border: palette.warning,
+      bg: palette.warning
+    },
+    error: {
+      label: palette.error,
+      border: palette.error,
+      bg: palette.error
+    },
+    info: {
+      label: palette.info,
+      border: palette.info,
+      bg: palette.info
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};

package/esm/rating/index.js

@@ -0,0 +1,2 @@
+import Rating from './rating';
+export default Rating;

package/esm/rating/rating-icon.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+function RatingIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+  }));
+}
+
+RatingIcon.displayName = 'BolioUIRatingIcon';
+export default RatingIcon;

package/esm/rating/rating.js

@@ -0,0 +1,115 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { tupleNumber } from '../utils/prop-types';
+import RatingIcon from './rating-icon';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var ratingCountTuple = tupleNumber(2, 3, 4, 5, 6, 7, 8, 9, 10);
+var ratingValueTuple = tupleNumber(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
+
+var getColor = function getColor(type, palette) {
+  var colors = {
+    "default": palette.accents_6,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  return colors[type] || colors["default"];
+};
+
+function RatingComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(RatingIcon, null) : _ref$icon,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 5 : _ref$count,
+      customValue = _ref.value,
+      _ref$initialValue = _ref.initialValue,
+      initialValue = _ref$initialValue === void 0 ? 1 : _ref$initialValue,
+      onValueChange = _ref.onValueChange,
+      _ref$locked = _ref.locked,
+      locked = _ref$locked === void 0 ? false : _ref$locked,
+      onLockedChange = _ref.onLockedChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var color = useMemo(function () {
+    return getColor(type, theme.palette);
+  }, [type, theme.palette]);
+
+  var _useState = useState(initialValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(locked),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isLocked = _useState4[0],
+      setIsLocked = _useState4[1];
+
+  var lockedChangeHandler = function lockedChangeHandler(next) {
+    setIsLocked(next);
+    onLockedChange && onLockedChange(next);
+  };
+
+  var valueChangeHandler = function valueChangeHandler(next) {
+    setValue(next);
+    var emitValue = next > count ? count : next;
+    onValueChange && onValueChange(emitValue);
+  };
+
+  var clickHandler = function clickHandler(index) {
+    if (isLocked) return lockedChangeHandler(false);
+    valueChangeHandler(index);
+    lockedChangeHandler(true);
+  };
+
+  var mouseEnterHandler = function mouseEnterHandler(index) {
+    if (isLocked) return;
+    valueChangeHandler(index);
+  };
+
+  useEffect(function () {
+    if (typeof customValue === 'undefined') return;
+    setValue(customValue < 0 ? 0 : customValue);
+  }, [customValue]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2801573450", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (props && props.className != null && props.className || useClasses('rating', className) || "")
+  }), _toConsumableArray(Array(count)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      onMouseEnter: function onMouseEnter() {
+        return mouseEnterHandler(index + 1);
+      },
+      onClick: function onClick() {
+        return clickHandler(index + 1);
+      },
+      className: _JSXStyle.dynamic([["2801573450", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (useClasses('icon-box', {
+        hovered: index + 1 <= value
+      }) || "")
+    }, icon);
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2801573450",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]
+  }, ".rating.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;--rating-font-size:".concat(SCALES.font(1), ";font-size:var(--rating-font-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.icon-box.__jsx-style-dynamic-selector{box-sizing:border-box;color:").concat(color, ";width:calc(var(--rating-font-size) * 1.5);height:calc(var(--rating-font-size) * 1.5);margin-right:calc(var(--rating-font-size) * 1 / 5);cursor:").concat(isLocked ? 'default' : 'pointer', ";}.icon-box.__jsx-style-dynamic-selector svg{width:100%;height:100%;fill:transparent;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform,color,fill 30ms linear;-webkit-transition:transform,color,fill 30ms linear;transition:transform,color,fill 30ms linear;}.hovered.__jsx-style-dynamic-selector svg{fill:").concat(color, ";-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}")));
+}
+
+RatingComponent.displayName = 'BolioUIRating';
+var Rating = withScale(RatingComponent);
+export default Rating;

package/esm/rating/stories.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Rating from '.';
+import Grid from '../grid';
+import { Umbrella, Zap } from '@bolio-ui/icons';
+export default {
+  title: 'Feedback/Rating',
+  component: Rating
+};
+export var Default = function Default() {
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      locked = _useState4[0],
+      setLocked = _useState4[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    onLockedChange: setLocked,
+    value: value,
+    onValueChange: setValue
+  })), /*#__PURE__*/React.createElement(Grid, null, "Selection: ", value), /*#__PURE__*/React.createElement(Grid, null, "Locked: ", locked ? 'true' : 'false'));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "primary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "secondary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "success"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "error"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "warning"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "info"
+  })));
+};
+export var CustomAmount = function CustomAmount() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    count: 2
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    value: 3,
+    count: 6
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    value: 4,
+    count: 8
+  })));
+};
+export var Icon = function Icon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    value: 4,
+    count: 6,
+    type: "success",
+    icon: /*#__PURE__*/React.createElement(Umbrella, null)
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    count: 7,
+    type: "error",
+    icon: /*#__PURE__*/React.createElement(Zap, null)
+  })));
+};

package/esm/row/index.js

@@ -0,0 +1,2 @@
+import Row from './row';
+export default Row;

package/esm/row/row.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "component", "gap", "justify", "align", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+var defaultProps = {
+  gap: 0,
+  justify: 'start',
+  align: 'top',
+  component: 'div',
+  className: ''
+};
+
+var getFlexAlignment = function getFlexAlignment(justify, align) {
+  var flexJustifyMap = {
+    end: 'flex-end',
+    center: 'center',
+    'space-around': 'space-around',
+    'space-between': 'space-between'
+  };
+  var flexAlignMap = {
+    middle: 'center',
+    bottom: 'flex-end'
+  };
+  return {
+    justifyValue: flexJustifyMap[justify] || 'normal',
+    alignValue: flexAlignMap[align] || 'normal'
+  };
+};
+
+function Row(_ref) {
+  var children = _ref.children,
+      component = _ref.component,
+      gap = _ref.gap,
+      justify = _ref.justify,
+      align = _ref.align,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Component = component;
+  var theme = useTheme();
+
+  var _useMemo = useMemo(function () {
+    return getFlexAlignment(justify, align);
+  }, [justify, align]),
+      justifyValue = _useMemo.justifyValue,
+      alignValue = _useMemo.alignValue;
+
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    className: _JSXStyle.dynamic([["2529451939", [gap, theme.layout.gap, gap, theme.layout.gap, gap, theme.layout.gap, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "row ".concat(className))
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2529451939",
+    dynamic: [gap, theme.layout.gap, gap, theme.layout.gap, gap, theme.layout.gap, justifyValue, alignValue]
+  }, ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;box-sizing:border-box;margin-left:calc(".concat(gap, " * ").concat(theme.layout.gap, " / 2);margin-right:calc(").concat(gap, " * ").concat(theme.layout.gap, " / 2);--row-gap:calc(").concat(gap, " * ").concat(theme.layout.gap, ");-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
+}
+
+Row.defaultProps = defaultProps;
+Row.displayName = 'BolioUIRow';
+export default Row;

package/esm/section/index.js

@@ -0,0 +1,2 @@
+import Section from './section';
+export default Section;