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

package/esm/{chunk-CPIFYIT3.js → chunk-XF4TPE2W.js}

@@ -23,21 +23,32 @@ import {
 import {
   use_scale_default,
   with_scale_default
-} from "./chunk-S62PPQHN.js";
+} from "./chunk-MAICNLTY.js";
 import {
   use_theme_default
-} from "./chunk-45MVPPJN.js";
+} from "./chunk-V5I4ORQQ.js";
 import {
+  joinClasses,
   use_classes_default
 } from "./chunk-5KUROAEP.js";
 
 // core/Tooltip/Tooltip.tsx
-import _JSXStyle3 from "styled-jsx/style";
-import React3, { useEffect as useEffect2, useId, useImperativeHandle, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import React3, {
+  useEffect as useEffect2,
+  useId,
+  useImperativeHandle,
+  useMemo as useMemo3,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
 
 // core/Tooltip/TooltipContent.tsx
-import _JSXStyle2 from "styled-jsx/style";
-import { useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import {
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
 import { createPortal } from "react-dom";
 
 // core/Tooltip/styles.ts
@@ -228,20 +239,29 @@ var getIconPosition = (placement, offsetX, offsetY, offsetAbsolute = "3px") => {
 };
 
 // core/Tooltip/TooltipIcon.tsx
-import _JSXStyle from "styled-jsx/style";
 import { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tooltip/TooltipIcon.module.css.bolio-css-module-source
+var TooltipIcon_module_css_default = { "icon": "TooltipIcon-module_icon__lx2Kw" };
+
+// core/Tooltip/TooltipIcon.tsx
 import { jsx } from "react/jsx-runtime";
-var TooltipIcon = ({
-  placement
-}) => {
-  const {
-    transform,
-    top,
-    left,
-    right,
-    bottom
-  } = useMemo(() => getIconPosition(placement, "var(--tooltip-icon-offset-x)", "var(--tooltip-icon-offset-y)"), [placement]);
-  return /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["1429608490", [left, top, right, bottom, transform]]]), children: /* @__PURE__ */ jsx(_JSXStyle, { id: "1429608490", dynamic: [left, top, right, bottom, transform], children: `span.__jsx-style-dynamic-selector{width:0;height:0;border-style:solid;border-width:6px 7px 6px 0;border-color:transparent var(--tooltip-content-bg) transparent transparent;position:absolute;left:${left};top:${top};right:${right};bottom:${bottom};-webkit-transform:${transform};-ms-transform:${transform};transform:${transform};}` }) });
+var TooltipIcon = ({ placement }) => {
+  const { transform, top, left, right, bottom } = useMemo(
+    () => getIconPosition(
+      placement,
+      "var(--tooltip-icon-offset-x)",
+      "var(--tooltip-icon-offset-y)"
+    ),
+    [placement]
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: TooltipIcon_module_css_default.icon,
+      style: { left, top, right, bottom, transform }
+    }
+  );
 };
 var TooltipIcon_default = TooltipIcon;
 
@@ -268,6 +288,9 @@ var getRect = (ref) => {
   };
 };
 
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tooltip/TooltipContent.module.css.bolio-css-module-source
+var TooltipContent_module_css_default = { "tooltipContent": "TooltipContent-module_tooltipContent__zfz-P", "inner": "TooltipContent-module_inner__pAcL5" };
+
 // core/Tooltip/TooltipContent.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var TooltipContent = ({
@@ -287,19 +310,20 @@ var TooltipContent = ({
   subtle = false
 }) => {
   const theme = use_theme_default();
-  const {
-    SCALES
-  } = use_scale_default();
+  const { SCALES } = use_scale_default();
   const el = use_portal_default("tooltip");
   const selfRef = useRef(null);
   const [rect, setRect] = useState(defaultTooltipPosition);
-  const colors = useMemo2(() => getColors(type, theme.palette, {
-    light,
-    ghost,
-    subtle
-  }), [type, theme.palette, light, ghost, subtle]);
+  const colors = useMemo2(
+    () => getColors(type, theme.palette, { light, ghost, subtle }),
+    [type, theme.palette, light, ghost, subtle]
+  );
   const hasShadow = type === "default";
-  const classes = use_classes_default("tooltip-content", className);
+  const classes = use_classes_default(
+    "tooltip-content",
+    TooltipContent_module_css_default.tooltipContent,
+    className
+  );
   const updateRect = () => {
     const position = getPosition(placement, getRect(parent), offset);
     setRect(position);
@@ -317,142 +341,186 @@ var TooltipContent = ({
       passive: true,
       capture: true
     });
-    return () => window.removeEventListener("scroll", handleScroll, {
-      capture: true
-    });
+    return () => window.removeEventListener("scroll", handleScroll, { capture: true });
   }, [visible, latestUpdate]);
   const preventHandler = (event) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
   };
+  const contentStyle = {
+    "--tooltip-icon-offset-x": iconOffset.x,
+    "--tooltip-icon-offset-y": iconOffset.y,
+    "--tooltip-content-bg": colors.bgColor,
+    top: rect.top,
+    left: rect.left,
+    transform: rect.transform,
+    color: colors.color,
+    border: `1px solid ${colors.borderColor}`,
+    borderRadius: theme.layout.radius,
+    boxShadow: hasShadow ? theme.expressiveness.shadowMedium : "none",
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto")
+  };
+  const isPopover = className == null ? void 0 : className.split(" ").includes("popover");
+  const innerStyle = {
+    fontSize: SCALES.font(1),
+    padding: isPopover ? `${SCALES.pt(0.9)} ${SCALES.pr(0)} ${SCALES.pb(0.9)} ${SCALES.pl(0)}` : `${SCALES.pt(0.65)} ${SCALES.pr(0.9)} ${SCALES.pb(0.65)} ${SCALES.pl(0.9)}`
+  };
   if (!parent || !el) return null;
-  return createPortal(/* @__PURE__ */ jsx2(css_transition_default, { visible, children: /* @__PURE__ */ jsxs("div", { id, role, ref: selfRef, onClick: preventHandler, className: _JSXStyle2.dynamic([["1478656486", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, colors.borderColor, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : "none", SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " " + (classes || ""), children: [
-    /* @__PURE__ */ jsxs("div", { className: _JSXStyle2.dynamic([["1478656486", [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, colors.borderColor, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : "none", SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)]]]) + " inner", children: [
-      !hideArrow && /* @__PURE__ */ jsx2(TooltipIcon_default, { placement, shadow: hasShadow }),
-      children
-    ] }),
-    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "1478656486", dynamic: [iconOffset.x, iconOffset.y, colors.bgColor, rect.top, rect.left, rect.transform, colors.color, colors.borderColor, theme.layout.radius, hasShadow ? theme.expressiveness.shadowMedium : "none", SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.font(1), SCALES.pt(0.65), SCALES.pr(0.9), SCALES.pb(0.65), SCALES.pl(0.9)], children: `.tooltip-content.__jsx-style-dynamic-selector{--tooltip-icon-offset-x:${iconOffset.x};--tooltip-icon-offset-y:${iconOffset.y};--tooltip-content-bg:${colors.bgColor};box-sizing:border-box;position:absolute;top:${rect.top};left:${rect.left};-webkit-transform:${rect.transform};-ms-transform:${rect.transform};transform:${rect.transform};background-color:var(--tooltip-content-bg);color:${colors.color};border:1px solid ${colors.borderColor};border-radius:${theme.layout.radius};padding:0;z-index:1000;box-shadow:${hasShadow ? theme.expressiveness.shadowMedium : "none"};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};}.inner.__jsx-style-dynamic-selector{box-sizing:border-box;position:relative;font-size:${SCALES.font(1)};padding:${SCALES.pt(0.65)} ${SCALES.pr(0.9)} ${SCALES.pb(0.65)} ${SCALES.pl(0.9)};height:100%;}` })
-  ] }) }), el);
+  return createPortal(
+    /* @__PURE__ */ jsx2(css_transition_default, { visible, children: /* @__PURE__ */ jsx2(
+      "div",
+      {
+        id,
+        role,
+        className: classes,
+        ref: selfRef,
+        onClick: preventHandler,
+        style: contentStyle,
+        children: /* @__PURE__ */ jsxs("div", { className: joinClasses("inner", TooltipContent_module_css_default.inner), style: innerStyle, children: [
+          !hideArrow && /* @__PURE__ */ jsx2(TooltipIcon_default, { placement, shadow: hasShadow }),
+          children
+        ] })
+      }
+    ) }),
+    el
+  );
 };
 var TooltipContent_default = TooltipContent;
 
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tooltip/Tooltip.module.css.bolio-css-module-source
+var Tooltip_module_css_default = { "tooltip": "Tooltip-module_tooltip__ZOF3O" };
+
 // core/Tooltip/Tooltip.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var focusableTags = ["a", "button", "input", "select", "textarea"];
 var getFocusableChild = (children) => {
   if (!React3.isValidElement(children)) return null;
-  const {
-    type
-  } = children;
+  const { type } = children;
   if (typeof type === "string" && !focusableTags.includes(type)) return null;
   return children;
 };
-var TooltipComponent = React3.forwardRef(({
-  children,
-  initialVisible = false,
-  text = "",
-  offset = 12,
-  placement = "top",
-  portalClassName = "",
-  enterDelay = 100,
-  leaveDelay = 150,
-  trigger = "hover",
-  type = "default",
-  light = false,
-  ghost = false,
-  subtle = false,
-  className = "",
-  onVisibleChange = (() => {
-  }),
-  hideArrow = false,
-  visible: customVisible,
-  ...props
-}, ref) => {
-  const timer = useRef2(void 0);
-  const innerRef = useRef2(null);
-  const tooltipId = useId();
-  useImperativeHandle(ref, () => innerRef.current);
-  const [visible, setVisible] = useState2(initialVisible);
-  const triggerElement = innerRef.current;
-  const iconOffset = useMemo3(() => {
-    if (!triggerElement) return {
-      x: "0.75em",
-      y: "0.75em"
+var TooltipComponent = React3.forwardRef(
+  ({
+    children,
+    initialVisible = false,
+    text = "",
+    offset = 12,
+    placement = "top",
+    portalClassName = "",
+    enterDelay = 100,
+    leaveDelay = 150,
+    trigger = "hover",
+    type = "default",
+    light = false,
+    ghost = false,
+    subtle = false,
+    className = "",
+    onVisibleChange = (() => {
+    }),
+    hideArrow = false,
+    visible: customVisible,
+    ...props
+  }, ref) => {
+    const timer = useRef2(void 0);
+    const innerRef = useRef2(null);
+    const tooltipId = useId();
+    useImperativeHandle(ref, () => innerRef.current);
+    const [visible, setVisible] = useState2(initialVisible);
+    const triggerElement = innerRef.current;
+    const iconOffset = useMemo3(() => {
+      if (!triggerElement) return { x: "0.75em", y: "0.75em" };
+      const rect = getRect(innerRef);
+      return {
+        x: `${rect.width ? rect.width / 2 : 0}px`,
+        y: `${rect.height ? rect.height / 2 : 0}px`
+      };
+    }, [triggerElement]);
+    const contentProps = {
+      type,
+      light,
+      ghost,
+      subtle,
+      visible,
+      offset,
+      placement,
+      hideArrow,
+      iconOffset,
+      parent: innerRef,
+      className: portalClassName,
+      id: tooltipId,
+      role: trigger === "hover" ? "tooltip" : void 0
     };
-    const rect = getRect(innerRef);
-    return {
-      x: `${rect.width ? rect.width / 2 : 0}px`,
-      y: `${rect.height ? rect.height / 2 : 0}px`
+    const changeVisible = (nextState) => {
+      const clear = () => {
+        clearTimeout(timer.current);
+        timer.current = void 0;
+      };
+      const handler = (nextState2) => {
+        setVisible(nextState2);
+        onVisibleChange(nextState2);
+        clear();
+      };
+      clear();
+      if (nextState) {
+        timer.current = window.setTimeout(() => handler(true), enterDelay);
+        return;
+      }
+      const leaveDelayWithoutClick = trigger === "click" ? 0 : leaveDelay;
+      timer.current = window.setTimeout(
+        () => handler(false),
+        leaveDelayWithoutClick
+      );
     };
-  }, [triggerElement]);
-  const contentProps = {
-    type,
-    light,
-    ghost,
-    subtle,
-    visible,
-    offset,
-    placement,
-    hideArrow,
-    iconOffset,
-    parent: innerRef,
-    className: portalClassName,
-    id: tooltipId,
-    role: trigger === "hover" ? "tooltip" : void 0
-  };
-  const changeVisible = (nextState) => {
-    const clear = () => {
-      clearTimeout(timer.current);
-      timer.current = void 0;
+    const mouseEventHandler = (next) => trigger === "hover" && changeVisible(next);
+    const clickEventHandler = () => trigger === "click" && changeVisible(!visible);
+    const focusableChild = getFocusableChild(children);
+    const isWrapperButton = trigger === "click" && !focusableChild;
+    const keyDownHandler = (event) => {
+      if (event.key === "Escape" && visible) changeVisible(false);
+      if (!isWrapperButton || event.target !== event.currentTarget) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        changeVisible(!visible);
+      }
     };
-    const handler = (nextState2) => {
-      setVisible(nextState2);
-      onVisibleChange(nextState2);
-      clear();
+    const triggerProps = trigger === "click" ? {
+      "aria-expanded": visible,
+      "aria-controls": visible ? tooltipId : void 0
+    } : {
+      "aria-describedby": [
+        focusableChild == null ? void 0 : focusableChild.props["aria-describedby"],
+        visible ? tooltipId : void 0
+      ].filter(Boolean).join(" ") || void 0
     };
-    clear();
-    if (nextState) {
-      timer.current = window.setTimeout(() => handler(true), enterDelay);
-      return;
-    }
-    const leaveDelayWithoutClick = trigger === "click" ? 0 : leaveDelay;
-    timer.current = window.setTimeout(() => handler(false), leaveDelayWithoutClick);
-  };
-  const mouseEventHandler = (next) => trigger === "hover" && changeVisible(next);
-  const clickEventHandler = () => trigger === "click" && changeVisible(!visible);
-  const focusableChild = getFocusableChild(children);
-  const isWrapperButton = trigger === "click" && !focusableChild;
-  const keyDownHandler = (event) => {
-    if (event.key === "Escape" && visible) changeVisible(false);
-    if (!isWrapperButton || event.target !== event.currentTarget) return;
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      changeVisible(!visible);
-    }
-  };
-  const triggerProps = trigger === "click" ? {
-    "aria-expanded": visible,
-    "aria-controls": visible ? tooltipId : void 0
-  } : {
-    "aria-describedby": [focusableChild == null ? void 0 : focusableChild.props["aria-describedby"], visible ? tooltipId : void 0].filter(Boolean).join(" ") || void 0
-  };
-  const wrapperProps = focusableChild ? {} : isWrapperButton ? {
-    role: "button",
-    tabIndex: 0,
-    ...triggerProps
-  } : triggerProps;
-  use_click_away_default(innerRef, () => trigger === "click" && changeVisible(false));
-  const latestChange = use_latest_default(changeVisible);
-  useEffect2(() => {
-    if (customVisible === void 0) return;
-    latestChange.current(customVisible);
-  }, [customVisible, latestChange]);
-  return /* @__PURE__ */ jsxs2("div", { ref: innerRef, onClick: clickEventHandler, onMouseEnter: () => mouseEventHandler(true), onMouseLeave: () => mouseEventHandler(false), onFocus: () => mouseEventHandler(true), onBlur: () => mouseEventHandler(false), onKeyDown: keyDownHandler, ...wrapperProps, ...props, className: "jsx-1653875468 " + (props && props.className != null && props.className || wrapperProps && wrapperProps.className != null && wrapperProps.className || use_classes_default("tooltip", className) || ""), children: [
-    focusableChild ? React3.cloneElement(focusableChild, triggerProps) : children,
-    /* @__PURE__ */ jsx3(TooltipContent_default, { ...contentProps, children: text }),
-    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "1653875468", children: ".tooltip.jsx-1653875468{width:-webkit-max-content;width:-moz-max-content;width:max-content;display:inline-block;}" })
-  ] });
-});
+    const wrapperProps = focusableChild ? {} : isWrapperButton ? { role: "button", tabIndex: 0, ...triggerProps } : triggerProps;
+    use_click_away_default(innerRef, () => trigger === "click" && changeVisible(false));
+    const latestChange = use_latest_default(changeVisible);
+    useEffect2(() => {
+      if (customVisible === void 0) return;
+      latestChange.current(customVisible);
+    }, [customVisible, latestChange]);
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: innerRef,
+        className: use_classes_default(Tooltip_module_css_default.tooltip, className),
+        onClick: clickEventHandler,
+        onMouseEnter: () => mouseEventHandler(true),
+        onMouseLeave: () => mouseEventHandler(false),
+        onFocus: () => mouseEventHandler(true),
+        onBlur: () => mouseEventHandler(false),
+        onKeyDown: keyDownHandler,
+        ...wrapperProps,
+        ...props,
+        children: [
+          focusableChild ? React3.cloneElement(focusableChild, triggerProps) : children,
+          /* @__PURE__ */ jsx3(TooltipContent_default, { ...contentProps, children: text })
+        ]
+      }
+    );
+  }
+);
 TooltipComponent.displayName = "BolioUITooltip";
 var Tooltip = with_scale_default(TooltipComponent);
 var Tooltip_default = Tooltip;

package/esm/chunk-XWRDUQKY.js

@@ -0,0 +1,98 @@
+import {
+  ButtonGroupContext
+} from "./chunk-NDERASK2.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ButtonGroup/ButtonGroup.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ButtonGroup/ButtonGroup.module.css.bolio-css-module-source
+var ButtonGroup_module_css_default = { "btnGroup": "ButtonGroup-module_btnGroup__jXaOh", "vertical": "ButtonGroup-module_vertical__ueNfm", "horizontal": "ButtonGroup-module_horizontal__rluhM" };
+
+// core/ButtonGroup/ButtonGroup.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultProps = {
+  disabled: false,
+  vertical: false,
+  ghost: false,
+  type: "default",
+  className: ""
+};
+var getGroupBorderColors = (palette, props) => {
+  const { ghost, type } = props;
+  if (!ghost && type !== "default") return palette.background;
+  const colors = {
+    // default: palette.accents_3,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  const withoutLightType = type == null ? void 0 : type.replace("-light", "");
+  return colors[withoutLightType] || colors.default;
+};
+var ButtonGroupComponent = React.forwardRef((groupProps, ref) => {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const {
+    disabled = defaultProps.disabled,
+    type = defaultProps.type,
+    ghost = defaultProps.ghost,
+    vertical = defaultProps.vertical,
+    children,
+    className = defaultProps.className,
+    style,
+    ...props
+  } = groupProps;
+  const initialValue = useMemo(
+    () => ({
+      disabled,
+      type,
+      ghost,
+      isButtonGroup: true
+    }),
+    [disabled, ghost, type]
+  );
+  const border = useMemo(() => {
+    return getGroupBorderColors(theme.palette, { ghost, type });
+  }, [theme.palette, ghost, type]);
+  const classes = use_classes_default(
+    ButtonGroup_module_css_default.btnGroup,
+    {
+      [ButtonGroup_module_css_default.vertical]: vertical,
+      [ButtonGroup_module_css_default.horizontal]: !vertical
+    },
+    className
+  );
+  const groupStyle = {
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "min-content"),
+    margin: `${SCALES.mt(0.313)} ${SCALES.mr(0.313)} ${SCALES.mb(0.313)} ${SCALES.ml(0.313)}`,
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    "--btn-group-border": border,
+    "--btn-group-radius": theme.layout.radius,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsx("div", { ref, className: classes, ...props, style: groupStyle, children }) });
+});
+ButtonGroupComponent.displayName = "BolioUIButtonGroup";
+var ButtonGroup = with_scale_default(ButtonGroupComponent);
+var ButtonGroup_default = ButtonGroup;
+
+// core/ButtonGroup/index.ts
+var ButtonGroup_default2 = ButtonGroup_default;
+
+export {
+  ButtonGroup_default2 as ButtonGroup_default
+};