@bolio-ui/core 1.0.0

package/esm/button/styles.js

@@ -0,0 +1,232 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { addColorAlpha } from '../utils/color';
+export var getButtonGhostColors = function getButtonGhostColors(palette, type) {
+  var colors = {
+    primary: {
+      bg: palette.background,
+      border: palette.primary,
+      color: palette.primary
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.secondary,
+      color: palette.secondary
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success,
+      color: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning,
+      color: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error,
+      color: palette.error
+    },
+    info: {
+      bg: palette.background,
+      border: palette.info,
+      color: palette.info
+    }
+  };
+  return colors[type] || null;
+};
+export var getButtonColors = function getButtonColors(palette, props) {
+  var type = props.type,
+      disabled = props.disabled,
+      ghost = props.ghost;
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.border,
+      color: palette.accents_5
+    },
+    primary: {
+      bg: palette.primary,
+      border: palette.primary,
+      color: '#fff'
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.secondary,
+      color: '#fff'
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: '#fff'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: '#fff'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: '#fff'
+    },
+    info: {
+      bg: palette.info,
+      border: palette.info,
+      color: '#fff'
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    }
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+  /**
+   * The '-light' type is the same color as the common type,
+   * only hover's color is different.
+   * e.g.
+   *   Color['success'] === Color['success-light']
+   *   Color['warning'] === Color['warning-light']
+   */
+
+  var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
+  var defaultColor = colors["default"];
+  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+export var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, type) {
+  var colors = {
+    primary: {
+      bg: palette.primary,
+      border: palette.background,
+      color: 'white'
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.background,
+      color: 'white'
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: 'white'
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: 'white'
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: 'white'
+    },
+    info: {
+      bg: palette.info,
+      border: palette.background,
+      color: 'white'
+    }
+  };
+  var withoutLightType = type.replace('-light', '');
+  return colors[withoutLightType] || null;
+};
+export var getButtonHoverColors = function getButtonHoverColors(palette, props) {
+  var type = props.type,
+      disabled = props.disabled,
+      loading = props.loading,
+      shadow = props.shadow,
+      ghost = props.ghost;
+  var defaultColor = getButtonColors(palette, props);
+  var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  var colors = {
+    "default": {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    primary: {
+      bg: palette.background,
+      border: palette.primary
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.secondary
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    info: {
+      bg: palette.background,
+      border: palette.info
+    },
+    abort: {
+      bg: 'transparent',
+      border: 'transparent',
+      color: palette.accents_5
+    },
+    'primary-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'secondary-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'success-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'warning-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'error-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    }),
+    'info-light': _extends({}, defaultColor, {
+      bg: alphaBackground
+    })
+  };
+  if (disabled) return {
+    bg: palette.accents_1,
+    border: palette.accents_2,
+    color: '#ccc'
+  };
+  if (loading) return _extends({}, defaultColor, {
+    color: 'transparent'
+  });
+  if (shadow) return defaultColor;
+  var hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors["default"];
+  return _extends({}, hoverColor, {
+    color: hoverColor.color || hoverColor.border
+  });
+};
+export var getButtonCursor = function getButtonCursor(disabled, loading) {
+  if (disabled) return {
+    cursor: 'not-allowed',
+    events: 'auto'
+  };
+  if (loading) return {
+    cursor: 'default',
+    events: 'none'
+  };
+  return {
+    cursor: 'pointer',
+    events: 'auto'
+  };
+};
+export var getButtonDripColor = function getButtonDripColor(palette, props) {
+  var type = props.type;
+  var isLightHover = type === null || type === void 0 ? void 0 : type.endsWith('light');
+  var hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
+};

package/esm/button/utils.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import ButtonIcon from './button-icon';
+import useClasses from '../use-classes';
+export var getButtonChildrenWithIcon = function getButtonChildrenWithIcon() {
+  var auto = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var children = arguments.length > 1 ? arguments[1] : undefined;
+  var icons = arguments.length > 2 ? arguments[2] : undefined;
+  var icon = icons.icon,
+      iconRight = icons.iconRight;
+  var hasIcon = icon || iconRight;
+  var isRight = Boolean(iconRight);
+  var paddingForAutoMode = auto ? "calc(var(--bolio-ui-button-height) / 2 + var(--bolio-ui-button-icon-padding) * .5)" : 0; // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  var classes = useClasses('text', isRight ? 'right' : 'left');
+  if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, children);
+
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/React.createElement(ButtonIcon, {
+      isRight: isRight,
+      isSingle: true
+    }, hasIcon);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
+    isRight: isRight
+  }, hasIcon), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3568181479", [paddingForAutoMode, paddingForAutoMode]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3568181479",
+    dynamic: [paddingForAutoMode, paddingForAutoMode]
+  }, ".left.__jsx-style-dynamic-selector{padding-left:".concat(paddingForAutoMode, ";}.right.__jsx-style-dynamic-selector{padding-right:").concat(paddingForAutoMode, ";}"))));
+};
+export var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
+  if (!config.isButtonGroup) return props;
+  return _extends({}, props, {
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  });
+};

package/esm/button-dropdown/button-dropdown-context.js

@@ -0,0 +1,11 @@
+import React from 'react';
+var defaultContext = {
+  type: 'default',
+  auto: false,
+  disabled: false,
+  loading: false
+};
+export var ButtonDropdownContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useButtonDropdown = function useButtonDropdown() {
+  return React.useContext(ButtonDropdownContext);
+};

package/esm/button-dropdown/button-dropdown-item.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "onClick", "className", "main", "type"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { getColor } from './styles';
+import { useButtonDropdown } from './button-dropdown-context';
+import Loading from '../loading';
+
+function ButtonDropdownItem(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$main = _ref.main,
+      main = _ref$main === void 0 ? false : _ref$main,
+      _ref$type = _ref.type,
+      selfType = _ref$type === void 0 ? 'default' : _ref$type,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useButtonDropdown = useButtonDropdown(),
+      parentType = _useButtonDropdown.type,
+      disabled = _useButtonDropdown.disabled,
+      loading = _useButtonDropdown.loading;
+
+  var type = main ? parentType : selfType;
+  var colors = getColor(theme.palette, type, disabled);
+
+  var clickHandler = function clickHandler(event) {
+    if (disabled || loading) return;
+    onClick && onClick(event);
+  };
+
+  var cursor = useMemo(function () {
+    if (loading) return 'default';
+    return disabled ? 'not-allowed' : 'pointer';
+  }, [loading, disabled]);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["3452455908", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), loading ? /*#__PURE__*/React.createElement(Loading, null) : children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3452455908",
+    dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]
+  }, "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--bolio-ui-dropdown-height);min-width:var(--bolio-ui-dropdown-min-width);padding:var(--bolio-ui-dropdown-padding);font-size:var(--bolio-ui-dropdown-font-size);}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")));
+}
+
+ButtonDropdownItem.displayName = 'BolioUIButtonDropdownItem';
+export default ButtonDropdownItem;

package/esm/button-dropdown/button-dropdown.js

@@ -0,0 +1,111 @@
+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 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import useClickAway from '../utils/use-click-away';
+import { getColor } from './styles';
+import ButtonDropdownIcon from './icon';
+import ButtonDropdownItem from './button-dropdown-item';
+import { ButtonDropdownContext } from './button-dropdown-context';
+import { pickChild, pickChildByProps } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var stopPropagation = function stopPropagation(event) {
+  event.stopPropagation();
+  event.nativeEvent.stopImmediatePropagation();
+};
+
+function ButtonDropdownComponent(_ref) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$auto = _ref.auto,
+      auto = _ref$auto === void 0 ? false : _ref$auto,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      icon = _ref.icon,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var ref = useRef(null);
+  var theme = useTheme();
+  var colors = getColor(theme.palette, type);
+  var itemChildren = pickChild(children, ButtonDropdownItem)[1];
+
+  var _pickChildByProps = pickChildByProps(itemChildren, 'main', true),
+      _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
+      itemChildrenWithoutMain = _pickChildByProps2[0],
+      mainItemChildren = _pickChildByProps2[1];
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var clickHandler = useCallback(function (event) {
+    event.preventDefault();
+    stopPropagation(event);
+    if (disabled || loading) return;
+    setVisible(!visible);
+  }, [disabled, loading, visible]);
+  var initialValue = {
+    type: type,
+    auto: auto,
+    disabled: disabled,
+    loading: loading
+  };
+  var bgColor = useMemo(function () {
+    if (disabled || loading) return theme.palette.accents_1;
+    return visible ? colors.hoverBgColor : colors.bgColor;
+  }, [disabled, loading, theme.palette.accents_1, visible, colors.hoverBgColor, colors.bgColor]);
+  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+      paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+  useClickAway(ref, function () {
+    return setVisible(false);
+  });
+  return /*#__PURE__*/React.createElement(ButtonDropdownContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    onClick: stopPropagation
+  }, props, {
+    className: _JSXStyle.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || useClasses('btn-dropdown', className) || "")
+  }), mainItemChildren, /*#__PURE__*/React.createElement("details", {
+    open: visible,
+    className: _JSXStyle.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement("summary", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-box"
+  }, icon ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: colors.color,
+      height: SCALES.height(2.5),
+      width: SCALES.height(2.5)
+    },
+    className: _JSXStyle.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-icon"
+  }, icon) : /*#__PURE__*/React.createElement(ButtonDropdownIcon, {
+    color: colors.color,
+    height: SCALES.height(2.5)
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
+  }, itemChildrenWithoutMain)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2624345116",
+    dynamic: [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]
+  }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border:1px solid ".concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";--bolio-ui-dropdown-height:").concat(SCALES.height(2.5), ";--bolio-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--bolio-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--bolio-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";border-left:1px solid ").concat(colors.borderLeftColor, ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;padding:0 1px;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;}summary.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";-webkit-transform:translateY(").concat(theme.layout.gapHalf, ");-ms-transform:translateY(").concat(theme.layout.gapHalf, ");transform:translateY(").concat(theme.layout.gapHalf, ");background-color:").concat(theme.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"))));
+}
+
+ButtonDropdownComponent.displayName = 'BolioUIButtonDropdown';
+var ButtonDropdown = withScale(ButtonDropdownComponent);
+export default ButtonDropdown;

package/esm/button-dropdown/icon.js

@@ -0,0 +1,30 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+function ButtonDropdownIcon(_ref) {
+  var color = _ref.color,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    stroke: color,
+    style: {
+      color: color
+    },
+    viewBox: "0 0 24 24",
+    width: height,
+    height: height,
+    strokeWidth: "1",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: "jsx-3359574434"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 9l6 6 6-6",
+    className: "jsx-3359574434"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3359574434"
+  }, "svg.jsx-3359574434{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"));
+}
+
+ButtonDropdownIcon.displayName = 'BolioUIButtonDropdownIcon';
+export default ButtonDropdownIcon;

package/esm/button-dropdown/index.js

@@ -0,0 +1,4 @@
+import ButtonDropdown from './button-dropdown';
+import ButtonDropdownItem from './button-dropdown-item';
+ButtonDropdown.Item = ButtonDropdownItem;
+export default ButtonDropdown;

package/esm/button-dropdown/stories.js

@@ -0,0 +1,92 @@
+import ButtonDropdown from '.';
+import Grid from '../grid';
+import { Plus } from '@bolio-ui/icons';
+export default {
+  title: 'Navigation/ButtonDropdown',
+  component: ButtonDropdown
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, null, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Default Button"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Secondary Button"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Tertiary Button"))));
+};
+export var Loading = function Loading() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    loading: true
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Default Button"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Secondary Button"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Tertiary Button"))));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    disabled: true
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Default Button"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Secondary Button"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Tertiary Button"))));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    type: "primary",
+    scale: 0.5
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Primary Button"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    type: "secondary",
+    scale: 0.5
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Secondary Button"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    type: "success",
+    scale: 0.5
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Success Button"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    type: "warning",
+    scale: 0.5
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Warning Button"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    type: "error",
+    scale: 0.5
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Error Button"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    type: "info",
+    scale: 0.5
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Info Button"))));
+};
+export var MultipleType = function MultipleType() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    scale: 2 / 3,
+    auto: true
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Check"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Block"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Lock"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    type: "error"
+  }, "Destroy"))));
+};
+export var CustomIcon = function CustomIcon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonDropdown, {
+    scale: 2 / 3,
+    auto: true,
+    icon: /*#__PURE__*/React.createElement(Plus, null)
+  }, /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    main: true
+  }, "Check User"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Block User"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, null, "Lock User"), /*#__PURE__*/React.createElement(ButtonDropdown.Item, {
+    type: "error"
+  }, "Destroy User"))));
+};

package/esm/button-dropdown/styles.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var getColor = function getColor(palette, type) {
+  var disabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var colors = {
+    "default": {
+      color: palette.accents_5,
+      bgColor: palette.background,
+      borderLeftColor: palette.accents_2,
+      hoverBgColor: palette.accents_1,
+      hoverBorder: palette.accents_2
+    },
+    primary: {
+      color: palette.background,
+      bgColor: palette.primary,
+      borderLeftColor: palette.primaryDark,
+      hoverBgColor: palette.primaryDark,
+      hoverBorder: palette.primaryDark
+    },
+    secondary: {
+      color: palette.background,
+      bgColor: palette.secondary,
+      borderLeftColor: palette.secondaryDark,
+      hoverBgColor: palette.secondaryDark,
+      hoverBorder: palette.secondaryDark
+    },
+    success: {
+      color: palette.background,
+      bgColor: palette.success,
+      borderLeftColor: palette.successDark,
+      hoverBgColor: palette.successDark,
+      hoverBorder: palette.successDark
+    },
+    warning: {
+      color: palette.background,
+      bgColor: palette.warning,
+      borderLeftColor: palette.warningDark,
+      hoverBgColor: palette.warningDark,
+      hoverBorder: palette.warningDark
+    },
+    error: {
+      color: palette.background,
+      bgColor: palette.error,
+      borderLeftColor: palette.errorDark,
+      hoverBgColor: palette.errorDark,
+      hoverBorder: palette.errorDark
+    },
+    info: {
+      color: palette.background,
+      bgColor: palette.info,
+      borderLeftColor: palette.infoDark,
+      hoverBgColor: palette.infoDark,
+      hoverBorder: palette.infoDark
+    }
+  };
+  if (disabled) return _extends({}, colors["default"], {
+    bgColor: palette.accents_1,
+    color: palette.accents_4
+  });
+  return type ? colors[type] : colors["default"];
+};

package/esm/button-group/button-group-context.js

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