@bolio-ui/core 1.0.0

package/esm/pagination/pagination-previous.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import PaginationItem from './pagination-item';
+import { usePaginationContext } from './pagination-context';
+
+function PaginationPrevious(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _usePaginationContext = usePaginationContext(),
+      update = _usePaginationContext.update,
+      isFirst = _usePaginationContext.isFirst;
+
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('prev');
+    },
+    disabled: isFirst
+  }, props), children);
+}
+
+PaginationPrevious.displayName = 'BolioUIPaginationPrevious';
+export default PaginationPrevious;

package/esm/pagination/pagination.js

@@ -0,0 +1,105 @@
+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 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo } from 'react';
+import PaginationPrevious from './pagination-previous';
+import PaginationNext from './pagination-next';
+import PaginationPages from './pagination-pages';
+import { PaginationContext } from './pagination-context';
+import useCurrentState from '../utils/use-current-state';
+import { pickChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+
+function PaginationComponent(_ref) {
+  var customPage = _ref.page,
+      _ref$initialPage = _ref.initialPage,
+      initialPage = _ref$initialPage === void 0 ? 1 : _ref$initialPage,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 1 : _ref$count,
+      _ref$limit = _ref.limit,
+      limit = _ref$limit === void 0 ? 7 : _ref$limit,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useCurrentState = useCurrentState(initialPage),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      page = _useCurrentState2[0],
+      setPage = _useCurrentState2[1],
+      pageRef = _useCurrentState2[2];
+
+  var _pickChild = pickChild(children, PaginationPrevious),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      prevChildren = _pickChild2[1];
+
+  var _pickChild3 = pickChild(children, PaginationNext),
+      _pickChild4 = _slicedToArray(_pickChild3, 2),
+      nextChildren = _pickChild4[1];
+
+  var _useMemo = useMemo(function () {
+    var hasChildren = function hasChildren(c) {
+      return React.Children.count(c) > 0;
+    };
+
+    var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, "prev");
+    var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, "next");
+    return [hasChildren(prevChildren) ? prevChildren : prevDefault, hasChildren(nextChildren) ? nextChildren : nextDefault];
+  }, [prevChildren, nextChildren]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      prevItem = _useMemo2[0],
+      nextItem = _useMemo2[1];
+
+  var update = function update(type) {
+    if (type === 'prev' && pageRef.current > 1) {
+      setPage(function (last) {
+        return last - 1;
+      });
+    }
+
+    if (type === 'next' && pageRef.current < count) {
+      setPage(function (last) {
+        return last + 1;
+      });
+    }
+  };
+
+  var values = useMemo(function () {
+    return {
+      isFirst: page <= 1,
+      isLast: page >= count,
+      update: update
+    };
+  }, [page, count]);
+  useEffect(function () {
+    onChange && onChange(page);
+  }, [onChange, page]);
+  useEffect(function () {
+    if (customPage !== undefined) {
+      setPage(customPage);
+    }
+  }, [customPage, setPage]);
+  return /*#__PURE__*/React.createElement(PaginationContext.Provider, {
+    value: values
+  }, /*#__PURE__*/React.createElement("nav", _extends({}, props, {
+    className: _JSXStyle.dynamic([["77524905", [SCALES.font(2), SCALES.font(0.875), 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)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), prevItem, /*#__PURE__*/React.createElement(PaginationPages, {
+    count: count,
+    current: page,
+    limit: limit,
+    setPage: setPage
+  }), nextItem), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "77524905",
+    dynamic: [SCALES.font(2), SCALES.font(0.875), 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)]
+  }, "nav.__jsx-style-dynamic-selector{font-variant:tabular-nums;font-feature-settings:'tnum';--pagination-size:".concat(SCALES.font(2), ";font-size:").concat(SCALES.font(0.875), ";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), ";}nav.__jsx-style-dynamic-selector button:last-of-type{margin-right:0;}")));
+}
+
+PaginationComponent.displayName = 'BolioUIPagination';
+var Pagination = withScale(PaginationComponent);
+export default Pagination;

package/esm/pagination/stories.js

@@ -0,0 +1,49 @@
+import Pagination from '.';
+import Grid from '../grid';
+import { ChevronRight, ChevronLeft, ArrowRight, ArrowLeft, ArrowRightCircle, ArrowLeftCircle } from '@bolio-ui/icons';
+export default {
+  title: 'Navigation/Pagination',
+  component: Pagination
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 20,
+    initialPage: 3
+  })));
+};
+export var Limit = function Limit() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 10,
+    limit: 10
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 10,
+    initialPage: 6,
+    limit: 5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 10,
+    initialPage: 6
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 30,
+    initialPage: 6,
+    limit: 10
+  })));
+};
+export var Icon = function Icon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null)))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ArrowRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ArrowLeft, null)))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Pagination, {
+    count: 5
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ArrowRightCircle, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ArrowLeftCircle, null)))));
+};

package/esm/popover/index.js

@@ -0,0 +1,5 @@
+import Popover from './popover';
+import PopoverItem from './popover-item';
+Popover.Item = PopoverItem;
+Popover.Option = PopoverItem;
+export default Popover;

package/esm/popover/popover-context.js

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+var defaultContext = {
+  disableItemsAutoClose: false,
+  onItemClick: function onItemClick() {}
+};
+export var PopoverContext = /*#__PURE__*/React.createContext(defaultContext);
+export var usePopoverContext = function usePopoverContext() {
+  return useContext(PopoverContext);
+};

package/esm/popover/popover-item.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "line", "title", "className", "onClick", "disableAutoClose"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import { usePopoverContext } from './popover-context';
+import useClasses from '../use-classes';
+
+function PopoverItemComponent(_ref) {
+  var children = _ref.children,
+      _ref$line = _ref.line,
+      line = _ref$line === void 0 ? false : _ref$line,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? false : _ref$title,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      onClick = _ref.onClick,
+      _ref$disableAutoClose = _ref.disableAutoClose,
+      disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _usePopoverContext = usePopoverContext(),
+      disableItemsAutoClose = _usePopoverContext.disableItemsAutoClose,
+      onItemClick = _usePopoverContext.onItemClick;
+
+  var hasHandler = Boolean(onClick);
+  var dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line;
+  var classes = useClasses('item', {
+    line: line,
+    title: title
+  }, className);
+
+  var clickHandler = function clickHandler(event) {
+    onClick && onClick(event);
+
+    if (dontCloseByClick) {
+      return event.stopPropagation();
+    }
+
+    onItemClick(event);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["2829879905", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2829879905",
+    dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(theme.palette.accents_5, ";-webkit-transition:color,background-color 150ms linear;transition:color,background-color 150ms linear;line-height:1.25em;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.75), ";cursor:").concat(hasHandler ? 'pointer' : 'default', ";}.item.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.item.line.__jsx-style-dynamic-selector{line-height:0;padding:0;background-color:").concat(theme.palette.border, ";height:").concat(SCALES.height(0.0625), ";margin:").concat(SCALES.mt(0.35), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.35), " ").concat(SCALES.ml(0), ";width:").concat(SCALES.width(1, '100%'), ";}.item.title.__jsx-style-dynamic-selector{font-weight:500;font-size:").concat(SCALES.font(0.925), ";color:").concat(theme.palette.foreground, ";}"))), title && /*#__PURE__*/React.createElement(PopoverItem, {
+    line: true,
+    title: false
+  }));
+}
+
+PopoverItemComponent.displayName = 'BolioUIPopoverItem';
+var PopoverItem = withScale(PopoverItemComponent);
+export default PopoverItem;

package/esm/popover/popover.js

@@ -0,0 +1,83 @@
+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 = ["content", "children", "disableItemsAutoClose", "trigger", "placement", "portalClassName", "type", "visible", "onVisibleChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import Tooltip from '../tooltip/tooltip';
+import { getReactNode } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import { PopoverContext } from './popover-context';
+import useClasses from '../use-classes';
+
+function PopoverComponent(_ref) {
+  var content = _ref.content,
+      children = _ref.children,
+      _ref$disableItemsAuto = _ref.disableItemsAutoClose,
+      disableItemsAutoClose = _ref$disableItemsAuto === void 0 ? false : _ref$disableItemsAuto,
+      _ref$trigger = _ref.trigger,
+      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+      _ref$portalClassName = _ref.portalClassName,
+      portalClassName = _ref$portalClassName === void 0 ? '' : _ref$portalClassName,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      customVisible = _ref.visible,
+      _ref$onVisibleChange = _ref.onVisibleChange,
+      onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var textNode = useMemo(function () {
+    return getReactNode(content);
+  }, [content]);
+
+  var onChildClick = function onChildClick() {
+    onPopoverVisibleChange(false);
+  };
+
+  var value = useMemo(function () {
+    return {
+      onItemClick: onChildClick,
+      disableItemsAutoClose: disableItemsAutoClose
+    };
+  }, [disableItemsAutoClose]);
+  var classes = useClasses('popover', portalClassName);
+
+  var onPopoverVisibleChange = function onPopoverVisibleChange(next) {
+    setVisible(next);
+    onVisibleChange(next);
+  };
+
+  useEffect(function () {
+    if (customVisible === undefined) return;
+    onPopoverVisibleChange(customVisible);
+  }, [customVisible]);
+  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(Tooltip, _extends({
+    initialVisible: false,
+    text: textNode,
+    trigger: trigger,
+    placement: placement,
+    portalClassName: classes,
+    visible: visible,
+    type: type,
+    onVisibleChange: onPopoverVisibleChange
+  }, props), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "421785314",
+    dynamic: [SCALES.pt(0.9), SCALES.pr(0), SCALES.pb(0.9), SCALES.pl(0)]
+  }, ".tooltip-content.popover > .inner{padding:".concat(SCALES.pt(0.9), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.9), " ").concat(SCALES.pl(0), ";}"))));
+}
+
+PopoverComponent.displayName = 'BolioUIPopover';
+var Popover = withScale(PopoverComponent);
+export default Popover;

package/esm/popover/stories.js

@@ -0,0 +1,84 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Popover from '.';
+import Link from '../link';
+import Spacer from '../spacer';
+import Grid from '../grid';
+export default {
+  title: 'Data Display/Popover',
+  component: Popover
+};
+export var Default = function Default() {
+  var content = function content() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '0 10px'
+      }
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: "#"
+    }, "A hyperlink"), /*#__PURE__*/React.createElement(Spacer, {
+      h: 0.5
+    }), /*#__PURE__*/React.createElement(Link, {
+      color: true,
+      href: "#"
+    }, "External link"));
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
+    content: content
+  }, "Menu")));
+};
+export var PresetItem = function PresetItem() {
+  var content = function content() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover.Item, {
+      title: true
+    }, /*#__PURE__*/React.createElement("span", null, "User Settings")), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Link, {
+      href: "#"
+    }, "A hyperlink")), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Link, {
+      color: true,
+      href: "#"
+    }, "A hyperlink for edit profile")), /*#__PURE__*/React.createElement(Popover.Item, {
+      line: true
+    }), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement("span", null, "Command-Line")));
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
+    content: content
+  }, "Menu")));
+};
+export var CloseManual = function CloseManual() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var changeHandler = function changeHandler(next) {
+    setVisible(next);
+  };
+
+  var content = function content() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '0 10px'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return setVisible(false);
+      }
+    }, "Click to close"), /*#__PURE__*/React.createElement(Spacer, {
+      h: 0.5
+    }), /*#__PURE__*/React.createElement("span", null, "Nothing"));
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Popover, {
+    content: content,
+    visible: visible,
+    onVisibleChange: changeHandler
+  }, "Menu")));
+};

package/esm/progress/index.js

@@ -0,0 +1,2 @@
+import Progress from './progress';
+export default Progress;

package/esm/progress/progress.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "max", "className", "type", "colors", "fixedTop", "fixedBottom"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import { useProportions } from '../utils/calculations';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getCurrentColor = function getCurrentColor(ratio, palette, type) {
+  var colors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var defaultColors = {
+    "default": palette.foreground,
+    primary: palette.primary,
+    success: palette.success,
+    secondary: palette.secondary,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  var colorKeys = Object.keys(colors);
+  if (colorKeys.length === 0) return defaultColors[type];
+  var customColorKey = colorKeys.find(function (key) {
+    return ratio <= +key;
+  });
+  if (!customColorKey || Number.isNaN(+customColorKey)) return defaultColors[type];
+  return colors[+customColorKey];
+};
+
+function ProgressComponent(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      colors = _ref.colors,
+      _ref$fixedTop = _ref.fixedTop,
+      fixedTop = _ref$fixedTop === void 0 ? false : _ref$fixedTop,
+      _ref$fixedBottom = _ref.fixedBottom,
+      fixedBottom = _ref$fixedBottom === void 0 ? false : _ref$fixedBottom,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var percentValue = useProportions(value, max);
+  var currentColor = getCurrentColor(percentValue, theme.palette, type, colors);
+  var fixed = fixedTop || fixedBottom;
+  var classes = useClasses('progress', {
+    fixed: fixed
+  }, className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3126216551", [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    title: "".concat(percentValue, "%"),
+    className: _JSXStyle.dynamic([["3126216551", [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]]]) + " " + "inner"
+  }), /*#__PURE__*/React.createElement("progress", _extends({
+    value: value,
+    max: max
+  }, props, {
+    className: _JSXStyle.dynamic([["3126216551", [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]]]) + " " + (props && props.className != null && props.className || className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3126216551",
+    dynamic: [theme.palette.accents_2, theme.layout.radius, SCALES.width(1, '100%'), SCALES.height(0.625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.layout.radius, currentColor, percentValue]
+  }, "progress.__jsx-style-dynamic-selector{position:fixed;top:-1000px;opacity:0;visibility:hidden;pointer-events:none;}.progress.__jsx-style-dynamic-selector{position:relative;background-color:".concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(0.625), ";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), ";}.fixed.__jsx-style-dynamic-selector{position:fixed;top:").concat(fixedTop ? 0 : 'unset', ";bottom:").concat(fixedBottom ? 0 : 'unset', ";left:0;border-radius:0;}.fixed.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{border-radius:0;}.inner.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;height:100%;bottom:0;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;border-radius:").concat(theme.layout.radius, ";background-color:").concat(currentColor, ";width:").concat(percentValue, "%;}")));
+}
+
+ProgressComponent.displayName = 'BolioUIProgress';
+var Progress = withScale(ProgressComponent);
+export default Progress;

package/esm/progress/stories.js

@@ -0,0 +1,114 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import useTheme from '../use-theme';
+import Progress from '.';
+import Grid from '../grid';
+import Button from '../button';
+export default {
+  title: 'Feedback/Progress',
+  component: Progress
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: 50
+  })));
+};
+export var CustomMax = function CustomMax() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: 45,
+    max: 50
+  })));
+};
+export var DynamicColors = function DynamicColors() {
+  var theme = useTheme();
+
+  var _useState = useState(20),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var colors = {
+    20: theme.palette.error,
+    40: theme.palette.warning,
+    60: theme.palette.success,
+    80: '#000'
+  };
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: value,
+    colors: colors
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setValue(value + 20);
+    },
+    auto: true,
+    scale: 0.5
+  }, "Add")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setValue(20);
+    },
+    auto: true,
+    scale: 0.5,
+    type: "error"
+  }, "Remove")));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    value: 3
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "primary",
+    value: 74
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "secondary",
+    value: 10
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "success",
+    value: 45
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "warning",
+    value: 100
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "error",
+    value: 21
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React.createElement(Progress, {
+    type: "info",
+    value: 34
+  })));
+};

package/esm/radio/index.js

@@ -0,0 +1,7 @@
+import Radio from './radio';
+import RadioGroup from './radio-group';
+import RadioDescription from './radio-description';
+Radio.Group = RadioGroup;
+Radio.Description = RadioDescription;
+Radio.Desc = RadioDescription;
+export default Radio;

package/esm/radio/radio-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false
+};
+export var RadioContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useRadioContext = function useRadioContext() {
+  return React.useContext(RadioContext);
+};