@bolio-ui/core 1.0.4 → 1.0.5

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<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & 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<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & 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<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Card;

package/esm/Card/Card.js

@@ -0,0 +1,72 @@
+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", "hoverable", "rounded", "className", "shadow", "type"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { getStyles } from './styles';
+import CardFooter from './CardFooter';
+import CardContent from './CardContent';
+import Image from '../Image';
+import { hasChild, pickChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var defaultProps = {
+  type: 'default',
+  hoverable: false,
+  shadow: false,
+  className: ''
+};
+
+function CardComponent(_ref) {
+  var children = _ref.children,
+      hoverable = _ref.hoverable,
+      rounded = _ref.rounded,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      shadow = _ref.shadow,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var hoverShadow = useMemo(function () {
+    if (shadow) return theme.expressiveness.shadowMedium;
+    return hoverable ? theme.expressiveness.shadowSmall : 'none';
+  }, [hoverable, shadow, theme.expressiveness]);
+
+  var _useMemo = useMemo(function () {
+    return getStyles(type, theme.palette, shadow);
+  }, [type, theme.palette, shadow]),
+      color = _useMemo.color,
+      bgColor = _useMemo.bgColor,
+      borderColor = _useMemo.borderColor;
+
+  var _pickChild = pickChild(children, CardFooter),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      withoutFooterChildren = _pickChild2[0],
+      footerChildren = _pickChild2[1];
+
+  var _pickChild3 = pickChild(withoutFooterChildren, Image),
+      _pickChild4 = _slicedToArray(_pickChild3, 2),
+      withoutImageChildren = _pickChild4[0],
+      imageChildren = _pickChild4[1];
+
+  var hasContent = hasChild(withoutImageChildren, CardContent);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1209748169",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+}
+
+CardComponent.defaultProps = defaultProps;
+CardComponent.displayName = 'BolioUICard';
+var Card = withScale(CardComponent);
+export default Card;

package/esm/Card/CardContent.d.ts

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

package/esm/Card/CardFooter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    disableAutoMargin?: boolean;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type CardFooterProps = Props & NativeAttrs;
+declare const CardFooter: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default CardFooter;

package/esm/Card/index.d.ts

@@ -0,0 +1,15 @@
+import Card from "./Card";
+import CardFooter from "./CardFooter";
+import CardContent from "./CardContent";
+export declare type CardComponentType = typeof Card & {
+    Footer: typeof CardFooter;
+    Actions: typeof CardFooter;
+    Content: typeof CardContent;
+    Body: typeof CardContent;
+};
+export type { CardProps } from "./Card";
+export type { CardContentProps } from "./CardContent";
+export type { CardFooterProps } from "./CardFooter";
+export type { CardTypes } from "../utils/prop-types";
+declare const _default: CardComponentType;
+export default _default;

package/esm/Card/index.js

@@ -0,0 +1,8 @@
+import Card from './Card';
+import CardFooter from './CardFooter';
+import CardContent from './CardContent';
+Card.Footer = CardFooter;
+Card.Actions = CardFooter;
+Card.Content = CardContent;
+Card.Body = CardContent;
+export default Card;