@bolio-ui/core 1.0.0

package/esm/use-toasts/toast-item.js

@@ -0,0 +1,48 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import CssTransition from '../shared/css-transition';
+import { makeToastActions, getColors, getTranslateByPlacement } from './helpers';
+var ToastItem = /*#__PURE__*/React.memo(function (_ref) {
+  var toast = _ref.toast,
+      layout = _ref.layout;
+  var theme = useTheme();
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, toast.type);
+  }, [theme.palette, toast.type]),
+      color = _useMemo.color,
+      bgColor = _useMemo.bgColor;
+
+  var isReactNode = typeof toast.text !== 'string';
+  var padding = layout.padding,
+      margin = layout.margin,
+      maxHeight = layout.maxHeight,
+      maxWidth = layout.maxWidth,
+      width = layout.width,
+      placement = layout.placement;
+
+  var _useMemo2 = useMemo(function () {
+    return getTranslateByPlacement(placement);
+  }, [placement]),
+      enter = _useMemo2.enter,
+      leave = _useMemo2.leave;
+
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "toast",
+    visible: toast.visible,
+    clearTime: 350
+  }, /*#__PURE__*/React.createElement("div", {
+    key: toast.id,
+    className: _JSXStyle.dynamic([["1059503143", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "toast"
+  }, isReactNode ? toast.text : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1059503143", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "message"
+  }, toast.text), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1059503143", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "action"
+  }, makeToastActions(toast.actions, toast.cancel))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1059503143",
+    dynamic: [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]
+  }, ".toast.__jsx-style-dynamic-selector{max-height:".concat(maxHeight, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";background-color:").concat(bgColor, ";color:").concat(color, ";border:0;border-radius:").concat(theme.layout.radius, ";opacity:1;box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);overflow:hidden;}.message.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;font-size:0.875em;display:-webkit-box;word-break:break-all;overflow:hidden;max-height:100%;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1rem;}.toast-enter.__jsx-style-dynamic-selector{opacity:0;height:0;padding:0;margin:0;-webkit-transform:").concat(enter, ";-ms-transform:").concat(enter, ";transform:").concat(enter, ";}.toast-enter-active.__jsx-style-dynamic-selector{opacity:1;height:auto;margin:").concat(margin, ";padding:").concat(padding, ";-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}.toast-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);height:auto;margin:").concat(margin, ";padding:").concat(padding, ";}.toast-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(leave, ";-ms-transform:").concat(leave, ";transform:").concat(leave, ";}"))));
+});
+ToastItem.displayName = 'BolioUIToastItem';
+export default ToastItem;

package/esm/use-toasts/use-toast.js

@@ -0,0 +1,124 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useEffect } from 'react';
+import { defaultToastLayout, useBolioUIContext } from '../utils/use-bolio-ui-context';
+import { getId } from '../utils/collections';
+var defaultToast = {
+  delay: 2000,
+  type: 'default'
+};
+
+var useToasts = function useToasts(layout) {
+  var _useBolioUIContext = useBolioUIContext(),
+      updateToasts = _useBolioUIContext.updateToasts,
+      toasts = _useBolioUIContext.toasts,
+      updateToastLayout = _useBolioUIContext.updateToastLayout,
+      updateLastToastId = _useBolioUIContext.updateLastToastId;
+
+  useEffect(function () {
+    if (!layout) return;
+    updateToastLayout(function () {
+      return layout ? _extends({}, defaultToastLayout, layout) : defaultToastLayout;
+    });
+  }, []);
+
+  var cancel = function cancel(internalId) {
+    updateToasts(function (currentToasts) {
+      return currentToasts.map(function (item) {
+        if (item._internalIdent !== internalId) return item;
+        return _extends({}, item, {
+          visible: false
+        });
+      });
+    });
+    updateLastToastId(function () {
+      return internalId;
+    });
+  };
+
+  var removeAll = function removeAll() {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        return _extends({}, toast, {
+          visible: false
+        });
+      });
+    });
+  };
+
+  var findToastOneByID = function findToastOneByID(id) {
+    return toasts.find(function (t) {
+      return t.id === id;
+    });
+  };
+
+  var removeToastOneByID = function removeToastOneByID(id) {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        if (toast.id !== id) return toast;
+        return _extends({}, toast, {
+          visible: false
+        });
+      });
+    });
+  };
+
+  var setToast = function setToast(toast) {
+    var internalIdent = "toast-".concat(getId());
+    var delay = toast.delay || defaultToast.delay;
+
+    if (toast.id) {
+      var hasIdent = toasts.find(function (t) {
+        return t.id === toast.id;
+      });
+
+      if (hasIdent) {
+        throw new Error('Toast: Already have the same key: "ident"');
+      }
+    }
+
+    updateToasts(function (last) {
+      var newToast = {
+        delay: delay,
+        text: toast.text,
+        visible: true,
+        type: toast.type || defaultToast.type,
+        id: toast.id || internalIdent,
+        actions: toast.actions || [],
+        _internalIdent: internalIdent,
+        _timeout: window.setTimeout(function () {
+          cancel(internalIdent);
+
+          if (newToast._timeout) {
+            window.clearTimeout(newToast._timeout);
+            newToast._timeout = null;
+          }
+        }, delay),
+        cancel: function (_cancel) {
+          function cancel() {
+            return _cancel.apply(this, arguments);
+          }
+
+          cancel.toString = function () {
+            return _cancel.toString();
+          };
+
+          return cancel;
+        }(function () {
+          return cancel(internalIdent);
+        })
+      };
+      return [].concat(_toConsumableArray(last), [newToast]);
+    });
+  };
+
+  return {
+    toasts: toasts,
+    setToast: setToast,
+    removeAll: removeAll,
+    findToastOneByID: findToastOneByID,
+    removeToastOneByID: removeToastOneByID
+  };
+};
+
+export default useToasts;

package/esm/utils/calculations.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+/**
+ * Calculate the ratio of two numbers, maximum decimal length can be specified.
+ *
+ * (0, 100) => 0
+ * (50, 100) => 50
+ * (11.22, 100) => 11.22
+ * (11.22, 100, 4) => 11.2200
+ */
+
+export var getProportions = function getProportions(value, max) {
+  var maxFixed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  var val = value / max;
+  var couldBeDecimalValue = (Number.isNaN(val) ? 0 : val) * 100;
+  if (couldBeDecimalValue > 100) return 100;
+  if (couldBeDecimalValue < 0) return 0;
+  if (!"".concat(couldBeDecimalValue).includes('.')) return couldBeDecimalValue;
+  var decimal = "".concat(couldBeDecimalValue).split('.')[1];
+  if (decimal.length < maxFixed) return couldBeDecimalValue;
+  return +couldBeDecimalValue.toFixed(maxFixed);
+};
+export var useProportions = function useProportions(value, max) {
+  var maxFixed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  return useMemo(function () {
+    return getProportions(value, max, maxFixed);
+  }, [value, max, maxFixed]);
+};

package/esm/utils/collections.js

@@ -0,0 +1,138 @@
+import React from 'react';
+export var getId = function getId() {
+  return Math.random().toString(32).slice(2, 10);
+};
+export var capitalize = function capitalize(str) {
+  var safeStr = String(str).trim();
+  return safeStr.charAt(0).toUpperCase() + safeStr.slice(1);
+};
+export var hasChild = function hasChild(children, child) {
+  var types = React.Children.map(children, function (item) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return null;
+    return item.type;
+  });
+  return (types || []).includes(child);
+};
+export var pickChild = function pickChild(children, targetChild) {
+  var target = [];
+  var withoutTargetChildren = React.Children.map(children, function (item) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+
+    if (item.type === targetChild) {
+      target.push(item);
+      return null;
+    }
+
+    return item;
+  });
+  var targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutTargetChildren, targetChildren];
+};
+export var pickChildByProps = function pickChildByProps(children, key, value) {
+  var target = [];
+  var isArray = Array.isArray(value);
+  var withoutPropChildren = React.Children.map(children, function (item) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return null;
+    if (!item.props) return item;
+
+    if (isArray) {
+      if (value.includes(item.props[key])) {
+        target.push(item);
+        return null;
+      }
+
+      return item;
+    }
+
+    if (item.props[key] === value) {
+      target.push(item);
+      return null;
+    }
+
+    return item;
+  });
+  var targetChildren = target.length >= 0 ? target : undefined;
+  return [withoutPropChildren, targetChildren];
+};
+export var pickChildrenFirst = function pickChildrenFirst(children) {
+  return React.Children.toArray(children)[0];
+};
+export var setChildrenProps = function setChildrenProps(children, props) {
+  var targetComponents = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  if (React.Children.count(children) === 0) return [];
+  var allowAll = targetComponents.length === 0;
+
+  var clone = function clone(child) {
+    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return /*#__PURE__*/React.cloneElement(child, props);
+  };
+
+  return React.Children.map(children, function (item) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+    if (allowAll) return clone(item, props);
+    var isAllowed = targetComponents.find(function (child) {
+      return child === item.type;
+    });
+    if (isAllowed) return clone(item, props);
+    return item;
+  });
+};
+export var setChildrenIndex = function setChildrenIndex(children) {
+  var targetComponents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  if (React.Children.count(children) === 0) return [];
+  var allowAll = targetComponents.length === 0;
+
+  var clone = function clone(child) {
+    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return /*#__PURE__*/React.cloneElement(child, props);
+  };
+
+  var index = 0;
+  return React.Children.map(children, function (item) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+    index = index + 1;
+    if (allowAll) return clone(item, {
+      index: index
+    });
+    var isAllowed = targetComponents.find(function (child) {
+      return child === item.type;
+    });
+    if (isAllowed) return clone(item, {
+      index: index
+    });
+    index = index - 1;
+    return item;
+  });
+};
+export var getReactNode = function getReactNode(node) {
+  if (!node) return null;
+  if (typeof node !== 'function') return node;
+  return node();
+};
+export var isChildElement = function isChildElement(parent, child) {
+  if (!parent || !child) return false;
+  var node = child;
+
+  while (node) {
+    if (node === parent) return true;
+    node = node.parentNode;
+  }
+
+  return false;
+};
+export var isBolioUIElement = function isBolioUIElement(el) {
+  if (!el) return false;
+  if (el !== null && el !== void 0 && el.dataset && el !== null && el !== void 0 && el.dataset['bolio-ui']) return true;
+  el.attributes.getNamedItem('data-bolio-ui');
+  return !!el.attributes.getNamedItem('data-bolio-ui');
+};
+export var isBrowser = function isBrowser() {
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+};
+export var isMac = function isMac() {
+  if (!isBrowser()) return false;
+  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+};
+export var isCSSNumberValue = function isCSSNumberValue(value) {
+  return value !== undefined && !Number.isNaN(+value);
+};

package/esm/utils/color.js

@@ -0,0 +1,43 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+var hexToRgb = function hexToRgb(color) {
+  var fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  var full = color.replace(fullReg, function (_, r, g, b) {
+    return "".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+  });
+  var values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+
+  if (!values) {
+    throw new Error("Bolio UI: Unsupported ".concat(color, " color."));
+  }
+
+  return [Number.parseInt(values[1], 16), Number.parseInt(values[2], 16), Number.parseInt(values[3], 16)];
+};
+
+export var colorToRgbValues = function colorToRgbValues(color) {
+  if (color.charAt(0) === '#') return hexToRgb(color);
+  var safeColor = color.replace(/ /g, '');
+  var colorType = color.substr(0, 4);
+  var regArray = safeColor.match(/\((.+)\)/);
+
+  if (!colorType.startsWith('rgb') || !regArray) {
+    console.log(color);
+    throw new Error("Bolio UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.");
+  }
+
+  return regArray[1].split(',').map(function (str) {
+    return Number.parseFloat(str);
+  });
+};
+export var addColorAlpha = function addColorAlpha(color, alpha) {
+  if (!/^#|rgb|RGB/.test(color)) return color;
+
+  var _colorToRgbValues = colorToRgbValues(color),
+      _colorToRgbValues2 = _slicedToArray(_colorToRgbValues, 3),
+      r = _colorToRgbValues2[0],
+      g = _colorToRgbValues2[1],
+      b = _colorToRgbValues2[2];
+
+  var safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(safeAlpha, ")");
+};

package/esm/utils/layouts.js

@@ -0,0 +1,82 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useState } from 'react';
+export var getElementOffset = function getElementOffset(el) {
+  if (!el) return {
+    top: 0,
+    left: 0
+  };
+
+  var _el$getBoundingClient = el.getBoundingClientRect(),
+      top = _el$getBoundingClient.top,
+      left = _el$getBoundingClient.left;
+
+  return {
+    top: top,
+    left: left
+  };
+};
+var defaultRect = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  width: 0,
+  height: 0,
+  elementTop: -1000
+};
+
+var getRectFromDOMWithContainer = function getRectFromDOMWithContainer(domRect, getContainer) {
+  if (!domRect) return defaultRect;
+  var container = getContainer ? getContainer() : null;
+  var scrollElement = container || document.documentElement;
+
+  var _getElementOffset = getElementOffset(container),
+      offsetTop = _getElementOffset.top,
+      offsetLeft = _getElementOffset.left;
+
+  return _extends({}, domRect, {
+    width: domRect.width || domRect.right - domRect.left,
+    height: domRect.height || domRect.top - domRect.bottom,
+    top: domRect.bottom + scrollElement.scrollTop - offsetTop,
+    left: domRect.left + scrollElement.scrollLeft - offsetLeft,
+    elementTop: domRect.top + scrollElement.scrollTop - offsetTop
+  });
+};
+
+export var isUnplacedRect = function isUnplacedRect(rect) {
+  if (!rect) return true;
+  return rect.top === defaultRect.top && rect.left === defaultRect.left;
+};
+export var getRefRect = function getRefRect(ref, getContainer) {
+  if (!ref || !ref.current) return defaultRect;
+  var rect = ref.current.getBoundingClientRect();
+  return getRectFromDOMWithContainer(rect, getContainer);
+};
+export var getEventRect = function getEventRect(event, getContainer) {
+  var _event$target;
+
+  var rect = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.getBoundingClientRect();
+  if (!rect) return defaultRect;
+  return getRectFromDOMWithContainer(rect, getContainer);
+};
+
+var isRefTarget = function isRefTarget(eventOrRef) {
+  return typeof (eventOrRef === null || eventOrRef === void 0 ? void 0 : eventOrRef.target) === 'undefined';
+};
+
+export var useRect = function useRect(initialState) {
+  var _useState = useState(initialState || defaultRect),
+      _useState2 = _slicedToArray(_useState, 2),
+      rect = _useState2[0],
+      setRect = _useState2[1];
+
+  var updateRect = function updateRect(eventOrRef, getContainer) {
+    if (isRefTarget(eventOrRef)) return setRect(getRefRect(eventOrRef, getContainer));
+    setRect(getEventRect(eventOrRef, getContainer));
+  };
+
+  return {
+    rect: rect,
+    setRect: updateRect
+  };
+};

package/esm/utils/prop-types.js

@@ -0,0 +1,22 @@
+export var tuple = function tuple() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return args;
+};
+export var tupleNumber = function tupleNumber() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  return args;
+};
+var buttonTypes = tuple('default', 'primary', 'secondary', 'info', 'success', 'warning', 'error', 'abort', 'primary-light', 'secondary-light', 'info-light', 'success-light', 'warning-light', 'error-light');
+var normalTypes = tuple('default', 'primary', 'secondary', 'success', 'warning', 'error', 'info');
+var snippetTypes = tuple('default', 'primary', 'secondary', 'success', 'warning', 'error', 'info', 'dark', 'lite');
+var cardTypes = tuple('default', 'primary', 'secondary', 'success', 'warning', 'error', 'dark', 'lite', 'info');
+var copyTypes = tuple('default', 'silent', 'prevent');
+var triggerTypes = tuple('hover', 'click');
+var placement = tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
+var dividerAlign = tuple('start', 'center', 'end', 'left', 'right');

package/esm/utils/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/use-body-scroll.js

@@ -0,0 +1,2 @@
+import useBodyScroll from '../use-body-scroll';
+export default useBodyScroll;

package/esm/utils/use-bolio-ui-context.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export var defaultToastLayout = {
+  padding: '12px 16px',
+  margin: '8px 0',
+  width: '420px',
+  maxWidth: '90vw',
+  maxHeight: '75px',
+  placement: 'bottomRight'
+};
+var defaultParams = {
+  toasts: [],
+  toastLayout: defaultToastLayout,
+  updateToastLayout: function updateToastLayout(t) {
+    return t;
+  },
+  updateToasts: function updateToasts(t) {
+    return t;
+  },
+  lastUpdateToastId: null,
+  updateLastToastId: function updateLastToastId() {
+    return null;
+  }
+};
+export var BolioUIContent = /*#__PURE__*/React.createContext(defaultParams);
+export var useBolioUIContext = function useBolioUIContext() {
+  return React.useContext(BolioUIContent);
+};

package/esm/utils/use-click-anywhere.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+var useClickAnyWhere = function useClickAnyWhere(handler) {
+  useEffect(function () {
+    var callback = function callback(event) {
+      return handler(event);
+    };
+
+    document.addEventListener('click', callback);
+    return function () {
+      return document.removeEventListener('click', callback);
+    };
+  }, [handler]);
+};
+
+export default useClickAnyWhere;

package/esm/utils/use-click-away.js

@@ -0,0 +1,2 @@
+import { default as useClickAway } from '../use-click-away';
+export default useClickAway;

package/esm/utils/use-clipboard.js

@@ -0,0 +1,2 @@
+import useClipboard from '../use-clipboard';
+export default useClipboard;

package/esm/utils/use-context-state/create-bolio-ui-context.js

@@ -0,0 +1,57 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useImperativeHandle } from 'react';
+import useContextState from './use-context-state';
+import { capitalize } from '../collections';
+
+var makeVirtualValues = function makeVirtualValues(values) {
+  var keys = Object.keys(values);
+  var handlers = keys.reduce(function (pre, current) {
+    var updateHandler = _defineProperty({}, "set".concat(capitalize(current)), function set(_next) {});
+
+    return _extends({}, pre, updateHandler);
+  }, {}); // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+  var update = function update(_key, _next) {};
+
+  return _extends({
+    update: update
+  }, values, handlers);
+};
+
+export var createBolioUIContext = function createBolioUIContext(name, initialStates) {
+  var _ref2;
+
+  var virtualValues = makeVirtualValues(initialStates);
+  var Context = /*#__PURE__*/React.createContext(virtualValues);
+  var BolioUIContext = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var defaultValues = _ref.defaultValues,
+        children = _ref.children,
+        onChange = _ref.onChange,
+        onChangeBefore = _ref.onChangeBefore;
+    var initialValues = typeof defaultValues === 'function' ? defaultValues() : defaultValues;
+
+    var mergedValues = _extends({}, initialStates, initialValues);
+
+    var _useContextState = useContextState(mergedValues, {
+      onChange: onChange ? onChange : function () {},
+      filter: onChangeBefore ? onChangeBefore : function () {
+        return true;
+      }
+    }),
+        _useContextState2 = _slicedToArray(_useContextState, 3),
+        states = _useContextState2[0],
+        statesRef = _useContextState2[2];
+
+    useImperativeHandle(ref, function () {
+      return statesRef.current;
+    }, [statesRef.current]);
+    return /*#__PURE__*/React.createElement(Context.Provider, {
+      value: states
+    }, children);
+  });
+  return _ref2 = {}, _defineProperty(_ref2, "".concat(capitalize(name), "Provider"), BolioUIContext), _defineProperty(_ref2, "use".concat(capitalize(name), "Context"), function useContext() {
+    return React.useContext(Context);
+  }), _ref2;
+};

package/esm/utils/use-context-state/use-context-state.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useMemo } from 'react';
+import useCurrentState from '../use-current-state';
+import { capitalize } from '../collections';
+
+var useContextState = function useContextState(initialState, options) {
+  var _useCurrentState = useCurrentState(initialState),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      state = _useCurrentState2[0],
+      setState = _useCurrentState2[1],
+      stateRef = _useCurrentState2[2];
+
+  var update = function update(key, next) {
+    var allowChange = options !== null && options !== void 0 && options.filter ? options === null || options === void 0 ? void 0 : options.filter(key, next) : true;
+    if (!allowChange) return;
+    setState(function (last) {
+      return _extends({}, last, _defineProperty({}, key, next));
+    });
+    (options === null || options === void 0 ? void 0 : options.onChange) && (options === null || options === void 0 ? void 0 : options.onChange(key, next));
+  };
+
+  var makeUpdates = function makeUpdates() {
+    var keys = Object.keys(state);
+    return keys.reduce(function (pre, current) {
+      var updateHandler = _defineProperty({}, "set".concat(capitalize(current)), function set(nextValue) {
+        update(current, nextValue);
+      });
+
+      return _extends({}, pre, updateHandler);
+    }, {});
+  };
+
+  var updates = makeUpdates();
+  var stateMemo = useMemo(function () {
+    return _extends({
+      update: update
+    }, state, updates);
+  }, [state]);
+  return [stateMemo, setState, stateRef];
+};
+
+export default useContextState;

package/esm/utils/use-current-state.js

@@ -0,0 +1,2 @@
+import useCurrentState from '../use-current-state';
+export default useCurrentState;