@bolio-ui/core 1.0.4 → 1.0.6

package/esm/ButtonDropdown/ButtonDropdown.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 './ButtonDropdownItem';
+import { ButtonDropdownContext } from './ButtonDropdownContext';
+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/ButtonDropdown/ButtonDropdownContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export interface ButtonDropdownConfig {
+    type?: NormalTypes;
+    auto?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+export declare const ButtonDropdownContext: React.Context<ButtonDropdownConfig>;
+export declare const useButtonDropdown: () => ButtonDropdownConfig;

package/esm/ButtonDropdown/ButtonDropdownItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type ButtonDropdownItemTypes = NormalTypes;
+interface Props {
+    main?: boolean;
+    type?: ButtonDropdownItemTypes;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export declare type ButtonDropdownItemProps = Props & NativeAttrs;
+declare function ButtonDropdownItem({ children, onClick, className, main, type: selfType, ...props }: ButtonDropdownItemProps): JSX.Element;
+declare namespace ButtonDropdownItem {
+    var displayName: string;
+}
+export default ButtonDropdownItem;

package/esm/ButtonDropdown/ButtonDropdownItem.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 './ButtonDropdownContext';
+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/ButtonDropdown/Icon.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    color?: string;
+    height?: string;
+}
+declare function ButtonDropdownIcon({ color, height }: Props): JSX.Element;
+declare namespace ButtonDropdownIcon {
+    var displayName: string;
+}
+export default ButtonDropdownIcon;

package/esm/ButtonDropdown/index.d.ts

@@ -0,0 +1,9 @@
+import ButtonDropdown from "./ButtonDropdown";
+import ButtonDropdownItem from "./ButtonDropdownItem";
+declare type ButtonDropdownType = typeof ButtonDropdown & {
+    Item: typeof ButtonDropdownItem;
+};
+export type { ButtonDropdownProps, ButtonDropdownTypes } from "./ButtonDropdown";
+export type { ButtonDropdownItemProps, ButtonDropdownItemTypes } from "./ButtonDropdownItem";
+declare const _default: ButtonDropdownType;
+export default _default;

package/esm/ButtonDropdown/index.js

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

package/esm/ButtonDropdown/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/ButtonDropdown/styles.d.ts

@@ -0,0 +1,11 @@
+import { BolioUIThemesPalette } from "../Themes/Presets";
+import { NormalTypes } from "../utils/prop-types";
+declare type ButtonDropdownColors = {
+    color: string;
+    bgColor: string;
+    hoverBgColor: string;
+    hoverBorder: string;
+    borderLeftColor: string;
+};
+export declare const getColor: (palette: BolioUIThemesPalette, type: NormalTypes | undefined, disabled?: boolean) => ButtonDropdownColors;
+export {};

package/esm/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonTypes } from "../utils/prop-types";
+interface Props {
+    disabled?: boolean;
+    vertical?: boolean;
+    ghost?: boolean;
+    type?: ButtonTypes;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type ButtonGroupProps = Props & NativeAttrs;
+declare const ButtonGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default ButtonGroup;

package/esm/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "type", "ghost", "vertical", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { ButtonGroupContext } from './ButtonGroupContext';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var defaultProps = {
+  disabled: false,
+  vertical: false,
+  ghost: false,
+  type: 'default',
+  className: ''
+};
+
+var getGroupBorderColors = function getGroupBorderColors(palette, props) {
+  var ghost = props.ghost,
+      type = props.type;
+  if (!ghost && type !== 'default') return palette.background;
+  var colors = {
+    "default": palette.border,
+    success: palette.success,
+    secondary: palette.secondary,
+    error: palette.error,
+    warning: palette.warning
+  };
+  var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
+  return colors[withoutLightType] || colors["default"];
+};
+
+function ButtonGroupComponent(groupProps) {
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var disabled = groupProps.disabled,
+      type = groupProps.type,
+      ghost = groupProps.ghost,
+      vertical = groupProps.vertical,
+      children = groupProps.children,
+      className = groupProps.className,
+      props = _objectWithoutProperties(groupProps, _excluded);
+
+  var initialValue = useMemo(function () {
+    return {
+      disabled: disabled,
+      type: type,
+      ghost: ghost,
+      isButtonGroup: true
+    };
+  }, [disabled, ghost, type]);
+  var border = useMemo(function () {
+    return getGroupBorderColors(theme.palette, groupProps);
+  }, [theme.palette, groupProps]);
+  var classes = useClasses('btn-group', {
+    vertical: vertical,
+    horizontal: !vertical
+  }, className);
+  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3583665674", [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3583665674",
+    dynamic: [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]
+  }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
+}
+
+ButtonGroupComponent.defaultProps = defaultProps;
+ButtonGroupComponent.displayName = 'BolioUIButtonGroup';
+var ButtonGroup = withScale(ButtonGroupComponent);
+export default ButtonGroup;

package/esm/ButtonGroup/ButtonGroupContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ButtonTypes } from "../utils/prop-types";
+export interface ButtonGroupConfig {
+    type?: ButtonTypes;
+    ghost?: boolean;
+    disabled?: boolean;
+    isButtonGroup: boolean;
+}
+export declare const ButtonGroupContext: React.Context<ButtonGroupConfig>;
+export declare const useButtonGroupContext: () => ButtonGroupConfig;

package/esm/ButtonGroup/index.d.ts

@@ -0,0 +1,4 @@
+import ButtonGroup from "./ButtonGroup";
+export type { ButtonGroupProps } from "./ButtonGroup";
+export type { ButtonTypes } from "../utils/prop-types";
+export default ButtonGroup;

package/esm/ButtonGroup/index.js

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

package/esm/ButtonGroup/stories.js

@@ -0,0 +1,66 @@
+import ButtonGroup from '.';
+import Button from '../Button';
+import Grid from '../Grid';
+export default {
+  title: 'Data Entry/ButtonGroup',
+  component: ButtonGroup
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"))));
+};
+export var Variant = function Variant() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "success"
+  }, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "abort"
+  }, /*#__PURE__*/React.createElement(Button, null, "Action1"), /*#__PURE__*/React.createElement(Button, null, "Action2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "warning",
+    ghost: true
+  }, /*#__PURE__*/React.createElement(Button, null, "Action1"), /*#__PURE__*/React.createElement(Button, null, "Action2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "success-light"
+  }, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"))));
+};
+export var Sizes = function Sizes() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    scale: 2 / 3
+  }, /*#__PURE__*/React.createElement(Button, {
+    scale: 2 / 3
+  }, "One"), /*#__PURE__*/React.createElement(Button, {
+    scale: 2 / 3
+  }, "Two"), /*#__PURE__*/React.createElement(Button, {
+    scale: 2 / 3
+  }, "Three"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    scale: 1 / 3
+  }, /*#__PURE__*/React.createElement(Button, {
+    scale: 1 / 3
+  }, "Action1"), /*#__PURE__*/React.createElement(Button, {
+    scale: 1 / 3
+  }, "Action2"))));
+};
+export var Vertical = function Vertical() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    vertical: true
+  }, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"), /*#__PURE__*/React.createElement(Button, null, "Four"))));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    scale: 0.5,
+    disabled: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    scale: 0.5
+  }, "One"), /*#__PURE__*/React.createElement(Button, {
+    scale: 0.5
+  }, "Two"), /*#__PURE__*/React.createElement(Button, {
+    scale: 0.5
+  }, "Three"))));
+};

package/esm/Capacity/Capacity.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    value?: number;
+    limit?: number;
+    color?: string;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type CapacityProps = Props & NativeAttrs;
+declare const Capacity: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Capacity;

package/esm/Capacity/index.d.ts

@@ -0,0 +1,3 @@
+import Capacity from "./Capacity";
+export type { CapacityProps } from "./Capacity";
+export default Capacity;

package/esm/Capacity/index.js

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

package/esm/Capacity/stories.js

@@ -0,0 +1,55 @@
+import useTheme from '../use-theme';
+import Capacity from '.';
+import Grid from '../Grid';
+export default {
+  title: 'Data Display/Capacity',
+  component: Capacity
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 15,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 45,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 95,
+    width: "200px"
+  })));
+};
+export var FixedColor = function FixedColor() {
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.foreground,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.primary,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.secondary,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.success,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.warning,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.error,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.info,
+    width: "200px"
+  })));
+};

package/esm/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CardTypes } from "../utils/prop-types";
+interface Props {
+    hoverable?: boolean;
+    rounded?: boolean;
+    shadow?: boolean;
+    className?: string;
+    type?: CardTypes;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type CardProps = Props & NativeAttrs;
+declare const Card: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Card;