@bolio-ui/core 2.0.0-alpha.2 → 3.0.0-alpha.1

package/dist/chunk-DXHNQANX.js

@@ -0,0 +1,487 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkBSDZWWUSjs = require('./chunk-BSDZWWUS.js');
+
+
+
+var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+
+
+var _chunkRZBEZ26Ajs = require('./chunk-RZBEZ26A.js');
+
+
+var _chunkLMDBE6T6js = require('./chunk-LMDBE6T6.js');
+
+
+var _chunkNDERASK2js = require('./chunk-NDERASK2.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Button/Button.tsx
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Button/ButtonDrip.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/ButtonDrip.module.css.bolio-css-module-source
+var ButtonDrip_module_css_default = { "drip": "ButtonDrip-module_drip__NtSRS", "expand": "ButtonDrip-module_expand__Lajj1" };
+
+// core/Button/ButtonDrip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ButtonDrip = ({
+  x = 0,
+  y = 0,
+  color,
+  onCompleted
+}) => {
+  const dripRef = _react.useRef.call(void 0, null);
+  const top = Number.isNaN(+y) ? 0 : y - 10;
+  const left = Number.isNaN(+x) ? 0 : x - 10;
+  _react.useEffect.call(void 0, () => {
+    const drip = dripRef.current;
+    if (!drip) return;
+    drip.addEventListener("animationend", onCompleted);
+    return () => drip.removeEventListener("animationend", onCompleted);
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: dripRef, className: ButtonDrip_module_css_default.drip, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", style: { top, left }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { fill: color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "100%", height: "100%", rx: "10" }) }) }) }) });
+};
+ButtonDrip.displayName = "BolioUItButtonDrip";
+var ButtonDrip_default = ButtonDrip;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/ButtonLoading.module.css.bolio-css-module-source
+var ButtonLoading_module_css_default = { "btnLoading": "ButtonLoading-module_btnLoading__Rgay4" };
+
+// core/Button/ButtonLoading.tsx
+
+function ButtonLoading({ color }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ButtonLoading_module_css_default.btnLoading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLMDBE6T6js.Loading_default, { color }) });
+}
+ButtonLoading.displayName = "BolioUIButtonLoading";
+var ButtonLoading_default = ButtonLoading;
+
+// core/Button/utils.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/ButtonIcon.module.css.bolio-css-module-source
+var ButtonIcon_module_css_default = { "icon": "ButtonIcon-module_icon__faTDy" };
+
+// core/Button/ButtonIcon.tsx
+
+function ButtonIcon({ children, className = "", ...props }) {
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, ButtonIcon_module_css_default.icon, className);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: classes, ...props, children });
+}
+ButtonIcon.displayName = "BolioUIButtonIcon";
+var ButtonIcon_default = ButtonIcon;
+
+// core/Button/utils.tsx
+
+var getButtonChildrenWithIcon = (children, icons) => {
+  const { icon, iconRight } = icons;
+  const hasIcon = icon || iconRight;
+  const isRight = Boolean(iconRight);
+  if (!hasIcon) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text", children });
+  if (_react2.default.Children.count(children) === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonIcon_default, { children: hasIcon });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !isRight && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonIcon_default, { children: hasIcon }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text", children }),
+    isRight && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonIcon_default, { children: hasIcon })
+  ] });
+};
+var filterPropsWithGroup = (props, config) => {
+  if (!config.isButtonGroup) return props;
+  return {
+    ...props,
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  };
+};
+
+// core/Button/styles.ts
+var getButtonGhostColors = (palette, type) => _chunkGJZT47MPjs.isSemanticColorType.call(void 0, type) ? _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "outline") : null;
+var getButtonLightColors = (palette, type) => _chunkGJZT47MPjs.isSemanticColorType.call(void 0, type) ? _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "light") : null;
+var getButtonSubtleColors = (palette, type) => _chunkGJZT47MPjs.isSemanticColorType.call(void 0, type) ? _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "subtle") : null;
+var getButtonColors = (palette, props) => {
+  const { type, disabled, ghost, subtle } = props;
+  const colors = {
+    default: {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: palette.foreground
+    },
+    primary: {
+      bg: palette.primary,
+      border: palette.primary,
+      color: "#fff"
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.secondary,
+      color: "#fff"
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: "#fff"
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: "#fff"
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: "#fff"
+    },
+    info: {
+      bg: palette.info,
+      border: palette.info,
+      color: "#fff"
+    },
+    abort: {
+      bg: "transparent",
+      border: "transparent",
+      color: palette.accents_5
+    }
+  };
+  if (disabled)
+    return {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: palette.accents_4
+    };
+  const withoutLightType = type == null ? void 0 : type.replace("-light", "");
+  const isLight = type == null ? void 0 : type.endsWith("-light");
+  const defaultColor = colors.default;
+  if (ghost)
+    return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  if (subtle)
+    return getButtonSubtleColors(palette, withoutLightType) || defaultColor;
+  if (isLight)
+    return getButtonLightColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = (palette, type) => {
+  const colors = {
+    primary: {
+      bg: palette.primary,
+      border: palette.background,
+      color: "white"
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.background,
+      color: "white"
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: "white"
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: "white"
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: "white"
+    },
+    info: {
+      bg: palette.info,
+      border: palette.background,
+      color: "white"
+    }
+  };
+  const withoutLightType = type.replace("-light", "");
+  return colors[withoutLightType] || null;
+};
+var getButtonHoverColors = (palette, props) => {
+  const { type, disabled, loading, shadow, ghost } = props;
+  const defaultColor = getButtonColors(palette, props);
+  const alphaBackground = _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, defaultColor.bg, 0.85);
+  const colors = {
+    default: {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    primary: {
+      bg: palette.background,
+      border: palette.primary
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.secondary
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    info: {
+      bg: palette.background,
+      border: palette.info
+    },
+    abort: {
+      bg: "transparent",
+      border: "transparent",
+      color: palette.accents_5
+    },
+    "primary-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "secondary-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "success-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "warning-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "error-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "info-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    }
+  };
+  if (disabled)
+    return {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: "#ccc"
+    };
+  if (loading)
+    return {
+      ...defaultColor,
+      color: "transparent"
+    };
+  if (shadow) return defaultColor;
+  const hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors.default;
+  return {
+    ...hoverColor,
+    color: hoverColor.color || hoverColor.border
+  };
+};
+var getButtonCursor = (disabled, loading) => {
+  if (disabled)
+    return {
+      cursor: "not-allowed",
+      events: "auto"
+    };
+  if (loading)
+    return {
+      cursor: "default",
+      events: "none"
+    };
+  return {
+    cursor: "pointer",
+    events: "auto"
+  };
+};
+var getButtonDripColor = (palette, props) => {
+  const { type, subtle } = props;
+  if (subtle) return _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, getButtonColors(palette, props).color, 0.25);
+  const isLightHover = type == null ? void 0 : type.endsWith("light");
+  const hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, hoverColors.bg, 0.65) : _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, palette.accents_3, 0.65);
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/Button.module.css.bolio-css-module-source
+var Button_module_css_default = { "root": "Button-module_root__LhkYq", "spotlight": "Button-module_spotlight__D1OuR" };
+
+// core/Button/Button.tsx
+
+var defaultProps = {
+  type: "default",
+  htmlType: "button",
+  ghost: false,
+  subtle: false,
+  rounded: false,
+  loading: false,
+  shadow: false,
+  auto: false,
+  effect: true,
+  spotlight: false,
+  disabled: false,
+  className: ""
+};
+var ButtonComponent = _react2.default.forwardRef((btnProps, ref) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const buttonRef = _react.useRef.call(void 0, null);
+  _react.useImperativeHandle.call(void 0, ref, () => buttonRef.current);
+  const [dripShow, setDripShow] = _react.useState.call(void 0, false);
+  const [dripX, setDripX] = _react.useState.call(void 0, 0);
+  const [dripY, setDripY] = _react.useState.call(void 0, 0);
+  const groupConfig = _chunkNDERASK2js.useButtonGroupContext.call(void 0, );
+  const filteredProps = filterPropsWithGroup(
+    _chunkBSDZWWUSjs.use_default_props_default.call(void 0, btnProps, defaultProps),
+    groupConfig
+  );
+  const {
+    children,
+    disabled,
+    type,
+    loading,
+    shadow,
+    ghost,
+    subtle,
+    rounded,
+    effect,
+    spotlight,
+    onClick,
+    auto,
+    icon,
+    htmlType,
+    iconRight,
+    className,
+    ...props
+  } = filteredProps;
+  const { bg, border, color } = _react.useMemo.call(void 0, 
+    () => getButtonColors(theme.palette, filteredProps),
+    [theme.palette, filteredProps]
+  );
+  const { cursor, events } = _react.useMemo.call(void 0, 
+    () => getButtonCursor(disabled, loading),
+    [disabled, loading]
+  );
+  const dripColor = _react.useMemo.call(void 0, 
+    () => getButtonDripColor(theme.palette, filteredProps),
+    [theme.palette, filteredProps]
+  );
+  const dripCompletedHandle = () => {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+  const clickHandler = (event) => {
+    if (disabled || loading) return;
+    const showDrip = effect;
+    if (showDrip && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+    if (onClick) onClick(event);
+  };
+  const childrenWithIcon = _react.useMemo.call(void 0, 
+    () => getButtonChildrenWithIcon(children, {
+      icon,
+      iconRight
+    }),
+    [children, icon, iconRight]
+  );
+  const iconOnly = Boolean(icon || iconRight) && _react2.default.Children.count(children) === 0;
+  const [paddingLeft, paddingRight] = iconOnly ? [SCALES.pl(0), SCALES.pr(0)] : [SCALES.pl(1.15), SCALES.pr(1.15)];
+  const inGroup = groupConfig.isButtonGroup;
+  const dynamicStyle = {
+    borderRadius: inGroup ? void 0 : rounded ? "25px" : theme.layout.radius,
+    fontSize: SCALES.font(0.875),
+    color,
+    backgroundColor: bg,
+    border: inGroup && ghost ? void 0 : `1px solid ${border}`,
+    cursor,
+    pointerEvents: events,
+    boxShadow: shadow ? "0 4px 10px 0" + bg : "none",
+    "--bolio-ui-button-height": SCALES.height(2.5),
+    "--bolio-ui-button-color": color,
+    "--bolio-ui-button-bg": bg,
+    minWidth: iconOnly ? SCALES.width(2.5) : auto ? "min-content" : SCALES.width(10.5),
+    width: iconOnly ? SCALES.width(2.5) : auto ? "auto" : "initial",
+    height: SCALES.height(2.5),
+    padding: `${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...props.style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      ref: buttonRef,
+      type: htmlType,
+      className: _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+        "btn",
+        Button_module_css_default.root,
+        { [Button_module_css_default.spotlight]: spotlight },
+        className
+      ),
+      disabled,
+      onClick: clickHandler,
+      ...props,
+      onMouseMove: (event) => {
+        var _a;
+        if (spotlight) {
+          const rect = event.currentTarget.getBoundingClientRect();
+          event.currentTarget.style.setProperty(
+            "--x",
+            `${event.clientX - rect.left}px`
+          );
+          event.currentTarget.style.setProperty(
+            "--y",
+            `${event.clientY - rect.top}px`
+          );
+        }
+        (_a = props.onMouseMove) == null ? void 0 : _a.call(props, event);
+      },
+      style: dynamicStyle,
+      children: [
+        loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonLoading_default, { color }),
+        childrenWithIcon,
+        dripShow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ButtonDrip_default,
+          {
+            x: dripX,
+            y: dripY,
+            color: dripColor,
+            onCompleted: dripCompletedHandle
+          }
+        )
+      ]
+    }
+  );
+});
+ButtonComponent.displayName = "BolioUIButton";
+var Button = _chunkMAICNLTYjs.with_scale_default.call(void 0, ButtonComponent);
+var Button_default = Button;
+
+// core/Button/index.ts
+var Button_default2 = Button_default;
+
+
+
+exports.Button_default = Button_default2;