@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Breadcrumbs/stories.js

@@ -0,0 +1,51 @@
+import NextLink from 'next/link';
+import Breadcrumbs from '.';
+import Grid from '../Grid';
+import { Home, Settings } from '@bolio-ui/icons';
+export default {
+  title: 'Navigation/Breadcrumbs',
+  component: Breadcrumbs
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Home"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
+    href: ""
+  }, "Settings"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "General"))));
+};
+export var Separator = function Separator() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, {
+    separator: "-"
+  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Home"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
+    href: ""
+  }, "Categories"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Add"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, {
+    separator: ">"
+  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Home"), /*#__PURE__*/React.createElement(Breadcrumbs.Separator, null, ":"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
+    href: ""
+  }, "Pages"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
+    href: ""
+  }, "Default"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "Index"))));
+};
+export var Icons = function Icons() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, /*#__PURE__*/React.createElement(Home, null)), /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
+    href: ""
+  }, /*#__PURE__*/React.createElement(Settings, null), " Settings"), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "General"))));
+};
+export var WithNextjs = function WithNextjs() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Breadcrumbs, null, /*#__PURE__*/React.createElement(NextLink, {
+    href: "/"
+  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
+    nextLink: true
+  }, "Home")), /*#__PURE__*/React.createElement(NextLink, {
+    href: "/settings"
+  }, /*#__PURE__*/React.createElement(Breadcrumbs.Item, {
+    nextLink: true
+  }, "Settings")), /*#__PURE__*/React.createElement(Breadcrumbs.Item, null, "General"))));
+};

package/esm/Button/Button.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonTypes } from "../utils/prop-types";
+interface Props {
+    type?: ButtonTypes;
+    ghost?: boolean;
+    rounded?: boolean;
+    loading?: boolean;
+    shadow?: boolean;
+    auto?: boolean;
+    effect?: boolean;
+    disabled?: boolean;
+    htmlType?: React.ButtonHTMLAttributes<unknown>['type'];
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
+export declare type ButtonProps = Props & NativeAttrs;
+declare const Button: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLButtonElement> & import("../use-scale").ScaleProps, "form" | "slot" | "style" | "title" | "children" | keyof import("../use-scale").ScaleProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | keyof Props | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "key"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/esm/Button/Button.js

@@ -0,0 +1,146 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
+import useScale, { withScale } from '../use-scale';
+import useTheme from '../use-theme';
+import ButtonDrip from './ButtonDrip';
+import ButtonLoading from './ButtonLoading';
+import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils';
+import { useButtonGroupContext } from '../ButtonGroup/ButtonGroupContext';
+import { getButtonColors, getButtonCursor, getButtonDripColor, getButtonHoverColors } from './styles';
+import useClasses from '../use-classes';
+var defaultProps = {
+  type: 'default',
+  htmlType: 'button',
+  ghost: false,
+  rounded: false,
+  loading: false,
+  shadow: false,
+  auto: false,
+  effect: true,
+  disabled: false,
+  className: ''
+};
+var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var buttonRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      dripShow = _useState2[0],
+      setDripShow = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      dripX = _useState4[0],
+      setDripX = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dripY = _useState6[0],
+      setDripY = _useState6[1];
+
+  var groupConfig = useButtonGroupContext();
+  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+
+  var children = filteredProps.children,
+      disabled = filteredProps.disabled,
+      type = filteredProps.type,
+      loading = filteredProps.loading,
+      shadow = filteredProps.shadow,
+      ghost = filteredProps.ghost,
+      rounded = filteredProps.rounded,
+      effect = filteredProps.effect,
+      onClick = filteredProps.onClick,
+      auto = filteredProps.auto,
+      icon = filteredProps.icon,
+      htmlType = filteredProps.htmlType,
+      iconRight = filteredProps.iconRight,
+      className = filteredProps.className,
+      props = _objectWithoutProperties(filteredProps, _excluded);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+
+  var _useMemo = useMemo(function () {
+    return getButtonColors(theme.palette, filteredProps);
+  }, [theme.palette, filteredProps]),
+      bg = _useMemo.bg,
+      border = _useMemo.border,
+      color = _useMemo.color;
+
+  var hover = useMemo(function () {
+    return getButtonHoverColors(theme.palette, filteredProps);
+  }, [theme.palette, filteredProps]);
+
+  var _useMemo2 = useMemo(function () {
+    return getButtonCursor(disabled, loading);
+  }, [disabled, loading]),
+      cursor = _useMemo2.cursor,
+      events = _useMemo2.events;
+
+  var dripColor = useMemo(function () {
+    return getButtonDripColor(theme.palette, filteredProps);
+  }, [theme.palette, filteredProps]);
+
+  var dripCompletedHandle = function dripCompletedHandle() {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+
+  var clickHandler = function clickHandler(event) {
+    if (disabled || loading) return;
+    var showDrip = effect;
+
+    if (showDrip && buttonRef.current) {
+      var rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+
+    onClick && onClick(event);
+  };
+
+  var childrenWithIcon = useMemo(function () {
+    return getButtonChildrenWithIcon(auto, children, {
+      icon: icon,
+      iconRight: iconRight
+    });
+  }, [auto, children, icon, iconRight]);
+  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.15),
+      paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.15);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: buttonRef,
+    type: htmlType,
+    disabled: disabled,
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["3337261033", [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
+    x: dripX,
+    y: dripY,
+    color: dripColor,
+    onCompleted: dripCompletedHandle
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3337261033",
+    dynamic: [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:500;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--bolio-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-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;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
+});
+ButtonComponent.defaultProps = defaultProps;
+ButtonComponent.displayName = 'BolioUIButton';
+var Button = withScale(ButtonComponent);
+export default Button;

package/esm/Button/ButtonDrip.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    x: number;
+    y: number;
+    onCompleted: () => void;
+    color: string;
+}
+export declare type ButtonDrip = Props;
+declare const ButtonDrip: React.FC<ButtonDrip>;
+export default ButtonDrip;

package/esm/Button/ButtonIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    isRight?: boolean;
+    isSingle?: boolean;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type ButtonIconProps = Props & NativeAttrs;
+declare function ButtonIcon({ isRight, isSingle, children, className, ...props }: ButtonIconProps): JSX.Element;
+declare namespace ButtonIcon {
+    var displayName: string;
+}
+export default ButtonIcon;

package/esm/Button/ButtonLoading.d.ts

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

package/esm/Button/ButtonLoading.js

@@ -0,0 +1,17 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import Loading from '../Loading';
+
+function ButtonLoading(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-412966635" + " " + "btn-loading"
+  }, /*#__PURE__*/React.createElement(Loading, {
+    color: color
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "412966635"
+  }, ".btn-loading.jsx-412966635{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--bolio-ui-button-bg);}"));
+}
+
+ButtonLoading.displayName = 'BolioUIButtonLoading';
+export default ButtonLoading;

package/esm/Button/index.d.ts

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

package/esm/Button/index.js

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

package/esm/Button/stories.js

@@ -0,0 +1,221 @@
+import Button from '.';
+import Grid from '../Grid';
+import { Zap, ZapOff, AlertCircle, XSquare } from '@bolio-ui/icons';
+export default {
+  title: 'General/Button',
+  component: Button
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, null, "Button")));
+};
+export var Loading = function Loading() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    loading: true
+  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    loading: true,
+    scale: 0.75
+  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    loading: true,
+    auto: true,
+    type: "primary",
+    scale: 2 / 3
+  }, "Button")));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    disabled: true
+  }, "Button")));
+};
+export var Shadow = function Shadow() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    shadow: true,
+    type: "primary"
+  }, "Button Shadow")));
+};
+export var TypeColors = function TypeColors() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "primary"
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "secondary"
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "success"
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "info"
+  }, "Info")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "abort"
+  }, "Abort")));
+};
+export var Lighted = function Lighted() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "primary-light"
+  }, "Primary Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "secondary-light"
+  }, "Secondary Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "success-light"
+  }, "Success Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "warning-light"
+  }, "Warning Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "error-light"
+  }, "Error Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    type: "info-light"
+  }, "Info Light")));
+};
+export var Ghost = function Ghost() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "secondary",
+    ghost: true,
+    auto: true,
+    scale: 0.7
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    ghost: true,
+    auto: true,
+    scale: 0.7
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    ghost: true,
+    auto: true,
+    scale: 0.7
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "error",
+    ghost: true,
+    auto: true,
+    scale: 0.7
+  }, "Error")));
+};
+export var Rounded = function Rounded() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "secondary",
+    rounded: true,
+    auto: true,
+    scale: 0.7
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "success",
+    rounded: true,
+    auto: true,
+    scale: 0.7
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "warning",
+    rounded: true,
+    auto: true,
+    scale: 0.7
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    type: "error",
+    rounded: true,
+    auto: true,
+    scale: 0.7
+  }, "Error")));
+};
+export var Scale = function Scale() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 0.25
+  }, "0.25")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 0.35
+  }, "0.35")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 2
+  }, "1 / 2")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 0.75
+  }, "0.75")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    padding: 0
+  }, "NoPadding")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    font: 0.25
+  }, "Small Font")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    pl: 0,
+    ml: "25px"
+  }, "Offset")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Button, {
+    width: "100%"
+  }, "Full Width")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    width: "30%",
+    mx: "5px"
+  }, "proportion"), /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    width: "30%",
+    mx: "5px"
+  }, "proportion"), /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    width: "30%",
+    mx: "5px"
+  }, "proportion")));
+};
+export var WithIcons = function WithIcons() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    iconRight: /*#__PURE__*/React.createElement(Zap, null),
+    auto: true,
+    scale: 2 / 3
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    iconRight: /*#__PURE__*/React.createElement(ZapOff, null),
+    auto: true,
+    scale: 2 / 3,
+    px: 0.6
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(AlertCircle, null),
+    auto: true
+  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    iconRight: /*#__PURE__*/React.createElement(AlertCircle, null),
+    type: "success",
+    scale: 0.85
+  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(AlertCircle, null),
+    type: "warning",
+    scale: 0.85
+  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(AlertCircle, null),
+    type: "secondary"
+  }, "Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(XSquare, null),
+    type: "error",
+    ghost: true
+  }, "Remove Button")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(XSquare, null),
+    disabled: true
+  }, "Remove Button")));
+};

package/esm/Button/styles.d.ts

@@ -0,0 +1,18 @@
+import { BolioUIThemesPalette } from "../Themes/Presets";
+import { ButtonTypes } from "../utils/prop-types";
+import { ButtonProps } from "./Button";
+export interface ButtonColorGroup {
+    bg: string;
+    border: string;
+    color: string;
+}
+export declare const getButtonGhostColors: (palette: BolioUIThemesPalette, type: ButtonTypes) => ButtonColorGroup | null;
+export declare const getButtonColors: (palette: BolioUIThemesPalette, props: ButtonProps) => ButtonColorGroup;
+export declare const getButtonGhostHoverColors: (palette: BolioUIThemesPalette, type: ButtonTypes) => ButtonColorGroup | null;
+export declare const getButtonHoverColors: (palette: BolioUIThemesPalette, props: ButtonProps) => ButtonColorGroup;
+export interface ButtonCursorGroup {
+    cursor: string;
+    events: string;
+}
+export declare const getButtonCursor: (disabled?: boolean | undefined, loading?: boolean | undefined) => ButtonCursorGroup;
+export declare const getButtonDripColor: (palette: BolioUIThemesPalette, props: ButtonProps) => string;

package/esm/Button/utils.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { ButtonProps } from "./Button";
+import { ButtonGroupConfig } from "../ButtonGroup/ButtonGroupContext";
+export declare const getButtonChildrenWithIcon: (auto: boolean | undefined, children: ReactNode, icons: {
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+}) => JSX.Element;
+export declare const filterPropsWithGroup: <T extends React.PropsWithChildren<ButtonProps>>(props: T, config: ButtonGroupConfig) => T;

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 './ButtonIcon';
+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/ButtonDropdown/ButtonDropdown.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type ButtonDropdownTypes = NormalTypes;
+interface Props {
+    type?: ButtonDropdownTypes;
+    auto?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    icon?: React.ReactNode;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type ButtonDropdownProps = Props & NativeAttrs;
+declare const ButtonDropdown: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default ButtonDropdown;