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

package/dist/chunk-6U7FXFJP.js

@@ -0,0 +1,425 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkDSX6YDJMjs = require('./chunk-DSX6YDJM.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Tabs/Tabs.tsx
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Tabs/TabsContext.ts
+
+var defaultContext = {
+  inGroup: false
+};
+var TabsContext = _react2.default.createContext(defaultContext);
+var useTabsContext = () => _react2.default.useContext(TabsContext);
+
+// core/Shared/highlight.tsx
+
+
+// core/utils/use-previous.ts
+
+var usePrevious = (state) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    ref.current = state;
+  });
+  return ref ? ref.current : null;
+};
+var use_previous_default = usePrevious;
+
+// core/Shared/highlight.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Highlight = ({
+  rect,
+  visible,
+  hoverHeightRatio = 1,
+  hoverWidthRatio = 1,
+  activeOpacity = 0.8,
+  className,
+  style,
+  ...props
+}) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const ref = _react.useRef.call(void 0, null);
+  const isFirstVisible = use_previous_default(_chunkDSX6YDJMjs.isUnplacedRect.call(void 0, rect));
+  const position = _react.useMemo.call(void 0, () => {
+    const width = rect.width * hoverWidthRatio;
+    const height = rect.height * hoverHeightRatio;
+    return {
+      width: `${width}px`,
+      left: `${rect.left + (rect.width - width) / 2}px`,
+      height: `${height}px`,
+      top: `${rect.elementTop + (rect.height - height) / 2}px`,
+      transition: isFirstVisible ? "opacity" : "opacity, width, left, top"
+    };
+  }, [rect, hoverWidthRatio, hoverHeightRatio, isFirstVisible]);
+  const highlightStyle = {
+    background: theme.palette.accents_2,
+    position: "absolute",
+    borderRadius: 5,
+    width: position.width,
+    left: position.left,
+    height: position.height,
+    top: position.top,
+    opacity: visible ? activeOpacity : 0,
+    transition: "0.15s ease",
+    transitionProperty: position.transition,
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      className: _chunk5KUROAEPjs.use_classes_default.call(void 0, "highlight", className),
+      ...props,
+      style: highlightStyle
+    }
+  );
+};
+var highlight_default = Highlight;
+
+// core/Tabs/TabsItem.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tabs/TabsItem.module.css.bolio-css-module-source
+var TabsItem_module_css_default = { "tab": "TabsItem-module_tab__uI-6R", "active": "TabsItem-module_active__BWQaR", "disabled": "TabsItem-module_disabled__C3bbH", "hideBorder": "TabsItem-module_hideBorder__JBKMA" };
+
+// core/Tabs/TabsItem.tsx
+
+function TabsItemCellComponent({
+  value,
+  label,
+  disabled = false,
+  onClick,
+  onMouseOver,
+  activeClassName,
+  activeStyle,
+  hideBorder
+}) {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const ref = _react.useRef.call(void 0, null);
+  const { currentValue } = useTabsContext();
+  const active = currentValue === value;
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+    TabsItem_module_css_default.tab,
+    {
+      [TabsItem_module_css_default.active]: active,
+      [TabsItem_module_css_default.disabled]: disabled,
+      [TabsItem_module_css_default.hideBorder]: hideBorder
+    },
+    active ? activeClassName : ""
+  );
+  const clickHandler = () => {
+    if (disabled) return;
+    if (onClick) onClick(value);
+  };
+  const keyDownHandler = (event) => {
+    var _a, _b, _c;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      clickHandler();
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    const tabs = Array.from(
+      ((_a = event.currentTarget.parentElement) == null ? void 0 : _a.querySelectorAll(
+        '[role="tab"]:not([aria-disabled="true"])'
+      )) || []
+    );
+    const current = tabs.indexOf(event.currentTarget);
+    const last = tabs.length - 1;
+    let next = current;
+    if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = last;
+    else if (event.key === "ArrowRight")
+      next = current === last ? 0 : current + 1;
+    else next = current === 0 ? last : current - 1;
+    event.preventDefault();
+    (_b = tabs[next]) == null ? void 0 : _b.focus();
+    (_c = tabs[next]) == null ? void 0 : _c.click();
+  };
+  const tabStyle = {
+    "--tabs-item-color": theme.palette.accents_5,
+    "--tabs-item-font-size": SCALES.font(0.875),
+    "--tabs-item-width": SCALES.width(1, "auto"),
+    "--tabs-item-height": SCALES.height(1, "auto"),
+    "--tabs-item-padding-top": SCALES.pt(0.875),
+    "--tabs-item-padding-right": SCALES.pr(0.55),
+    "--tabs-item-padding-bottom": SCALES.pb(0.875),
+    "--tabs-item-padding-left": SCALES.pl(0.55),
+    "--tabs-item-margin-top": SCALES.mt(0),
+    "--tabs-item-margin-right": SCALES.mr(0.2),
+    "--tabs-item-margin-bottom": SCALES.mb(0),
+    "--tabs-item-margin-left": SCALES.ml(0.2),
+    "--tabs-item-hover-color": theme.palette.foreground,
+    "--tabs-item-after-bg": theme.palette.foreground,
+    "--tabs-item-active-color": theme.palette.foreground,
+    "--tabs-item-disabled-color": theme.palette.accents_3,
+    "--tabs-item-hide-border-content": label,
+    "--tabs-item-focus-outline": theme.palette.primary,
+    ...active ? activeStyle : {}
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      className: classes,
+      role: "tab",
+      "aria-selected": active,
+      "aria-disabled": disabled || void 0,
+      tabIndex: active ? 0 : -1,
+      onMouseOver,
+      onClick: clickHandler,
+      onKeyDown: keyDownHandler,
+      style: tabStyle,
+      "data-bolioui": "tab-item",
+      children: label
+    }
+  );
+}
+TabsItemCellComponent.displayName = "BolioUITabsInternalCell";
+var TabsItemCell = _chunkMAICNLTYjs.with_scale_default.call(void 0, TabsItemCellComponent);
+function TabsItemComponent({
+  children,
+  value,
+  label,
+  disabled = false
+}) {
+  const { getAllScaleProps } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const { register, currentValue, directValues } = useTabsContext();
+  const isActive = _react.useMemo.call(void 0, () => currentValue === value, [currentValue, value]);
+  const isDirect = Boolean(directValues == null ? void 0 : directValues.includes(value));
+  _react.useEffect.call(void 0, () => {
+    if (isDirect || !register) return;
+    register({
+      value,
+      props: { value, label, disabled, ...getAllScaleProps() }
+    });
+  }, [value, label, disabled, isDirect]);
+  return isActive ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children }) : null;
+}
+TabsItemComponent.displayName = "BolioUITabsItem";
+var TabsItem = _chunkMAICNLTYjs.with_scale_default.call(void 0, TabsItemComponent);
+var TabsItem_default = TabsItem;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tabs/Tabs.module.css.bolio-css-module-source
+var Tabs_module_css_default = { "tabs": "Tabs-module_tabs__8oFn6", "header": "Tabs-module_header__PJqRs", "scrollContainer": "Tabs-module_scrollContainer__L7lB1", "hideDivider": "Tabs-module_hideDivider__c7DVF", "content": "Tabs-module_content__zOu-1", "slide": "Tabs-module_slide__5Nrt1", "indicator": "Tabs-module_indicator__unDp5" };
+
+// core/Tabs/Tabs.tsx
+
+var getDirectItems = (children) => _react2.default.Children.toArray(children).flatMap((child) => {
+  if (!_react2.default.isValidElement(child)) return [];
+  if (child.type === _react2.default.Fragment)
+    return getDirectItems(child.props.children);
+  if (child.type !== TabsItem_default) return [];
+  const { children: panel, ...props } = child.props;
+  return [{ value: props.value, props }];
+});
+var TabsComponent = _react2.default.forwardRef(
+  ({
+    initialValue: userCustomInitialValue,
+    value,
+    hideDivider = false,
+    hideBorder = false,
+    children,
+    onChange,
+    className = "",
+    leftSpace = "12px",
+    highlight = true,
+    slide = false,
+    hoverHeightRatio = 0.7,
+    hoverWidthRatio = 1.15,
+    activeClassName = "",
+    activeStyles,
+    align = "left",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const [tabs, setTabs] = _react.useState.call(void 0, []);
+    const [selfValue, setSelfValue] = _react.useState.call(void 0, 
+      userCustomInitialValue
+    );
+    const headerRef = _react.useRef.call(void 0, null);
+    const listRef = _react.useRef.call(void 0, null);
+    const [indicator, setIndicator] = _react.useState.call(void 0, null);
+    const [displayHighlight, setDisplayHighlight] = _react.useState.call(void 0, false);
+    const { rect, setRect } = _chunkDSX6YDJMjs.useRect.call(void 0, );
+    const register = (next) => {
+      setTabs((last) => {
+        const hasItem = last.find((item) => item.value === next.value);
+        if (!hasItem) return [...last, next];
+        return last.map((item) => {
+          if (item.value !== next.value) return item;
+          return {
+            ...item,
+            ...next
+          };
+        });
+      });
+    };
+    const directItems = getDirectItems(children);
+    const directValues = directItems.map((item) => item.value);
+    const directKey = directValues.join("\n");
+    const headers = [
+      ...directItems,
+      ...tabs.filter((item) => !directValues.includes(item.value))
+    ];
+    const initialValue = _react.useMemo.call(void 0, 
+      () => ({
+        register,
+        currentValue: selfValue,
+        inGroup: true,
+        leftSpace,
+        directValues
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [selfValue, leftSpace, directKey]
+    );
+    _react.useEffect.call(void 0, () => {
+      if (typeof value === "undefined") return;
+      setSelfValue(value);
+    }, [value]);
+    _react.useEffect.call(void 0, () => {
+      var _a;
+      if (!slide) return;
+      const active = (_a = listRef.current) == null ? void 0 : _a.querySelector(
+        '[role="tab"][aria-selected="true"]'
+      );
+      setIndicator(
+        active ? { left: active.offsetLeft, width: active.offsetWidth } : null
+      );
+    }, [slide, selfValue, directKey]);
+    const clickHandler = (value2) => {
+      setSelfValue(value2);
+      if (onChange) onChange(value2);
+    };
+    const tabItemMouseOverHandler = (event) => {
+      if (!_chunkUX2B3G6Ujs.isBolioUIElement.call(void 0, event.target)) return;
+      setRect(event, () => headerRef.current);
+      if (highlight) {
+        setDisplayHighlight(true);
+      }
+    };
+    const tabsStyle = {
+      "--tabs-font-size": SCALES.font(1),
+      "--tabs-width": SCALES.width(1, "initial"),
+      "--tabs-height": SCALES.height(1, "auto"),
+      "--tabs-padding-top": SCALES.pt(0),
+      "--tabs-padding-right": SCALES.pr(0),
+      "--tabs-padding-bottom": SCALES.pb(0),
+      "--tabs-padding-left": SCALES.pl(0),
+      "--tabs-margin-top": SCALES.mt(0),
+      "--tabs-margin-right": SCALES.mr(0),
+      "--tabs-margin-bottom": SCALES.mb(0),
+      "--tabs-margin-left": SCALES.ml(0),
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Tabs_module_css_default.tabs, className),
+        ref,
+        ...props,
+        style: tabsStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "header",
+            {
+              className: Tabs_module_css_default.header,
+              ref: headerRef,
+              onMouseLeave: () => setDisplayHighlight(false),
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  highlight_default,
+                  {
+                    rect,
+                    visible: displayHighlight,
+                    hoverHeightRatio,
+                    hoverWidthRatio
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "div",
+                  {
+                    role: "tablist",
+                    ref: listRef,
+                    className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Tabs_module_css_default.scrollContainer, {
+                      [Tabs_module_css_default.hideDivider]: hideDivider,
+                      [Tabs_module_css_default.slide]: slide
+                    }),
+                    style: {
+                      "--tabs-align": align,
+                      "--tabs-border-color": theme.palette.border,
+                      "--tabs-left-space": leftSpace
+                    },
+                    children: [
+                      slide && indicator && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "span",
+                        {
+                          className: Tabs_module_css_default.indicator,
+                          style: {
+                            width: indicator.width,
+                            transform: `translateX(${indicator.left}px)`,
+                            backgroundColor: theme.palette.foreground
+                          }
+                        }
+                      ),
+                      headers.map(({ value: value2, props: itemProps }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        TabsItemCell,
+                        {
+                          ...itemProps,
+                          onClick: clickHandler,
+                          onMouseOver: tabItemMouseOverHandler,
+                          activeClassName,
+                          activeStyle: activeStyles,
+                          hideBorder
+                        },
+                        value2
+                      ))
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Tabs_module_css_default.content, role: "tabpanel", children })
+        ]
+      }
+    ) });
+  }
+);
+TabsComponent.displayName = "BolioUITabs";
+var Tabs = _chunkMAICNLTYjs.with_scale_default.call(void 0, TabsComponent);
+var Tabs_default = Tabs;
+
+// core/Tabs/index.ts
+Tabs_default.Item = TabsItem_default;
+Tabs_default.Tab = TabsItem_default;
+var Tabs_default2 = Tabs_default;
+
+
+
+
+exports.highlight_default = highlight_default; exports.Tabs_default = Tabs_default2;

package/dist/{chunk-RF5ZQ37O.js → chunk-6VDRKYLW.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
 
 // core/use-media-query/use-media-query.ts
 var _react = require('react');
@@ -26,7 +26,7 @@ var makeQueries = (bp, up, down) => {
 var useMediaQuery = (breakpoint, options = defaultResponsiveOptions) => {
   const { match: matchType = "default", ssrMatchMedia = null } = options;
   const supportMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
-  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
   const mediaQueries = _react.useMemo.call(void 0, () => {
     const up = matchType === "up";
     const down = matchType === "down";