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

package/dist/chunk-FQU5SKDF.js

@@ -0,0 +1,312 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkHKOESPKZjs = require('./chunk-HKOESPKZ.js');
+
+
+var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
+
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.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/Collapse/Collapse.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Collapse/CollapseIcon.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/CollapseIcon.module.css.bolio-css-module-source
+var CollapseIcon_module_css_default = { "svg": "CollapseIcon-module_svg__-RvD-" };
+
+// core/Collapse/CollapseIcon.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function CollapseIcon({ active }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: CollapseIcon_module_css_default.svg,
+      style: {
+        color: "currentColor",
+        transform: `rotateZ(${active ? "-180deg" : "0"})`
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+var MemoCollapseIcon = _react2.default.memo(CollapseIcon);
+var CollapseIcon_default = MemoCollapseIcon;
+
+// core/Shared/expand.tsx
+
+
+function Expand({
+  isExpanded = false,
+  delay = 200,
+  children
+}) {
+  const [height, setHeight] = _react.useState.call(void 0, isExpanded ? "auto" : "0");
+  const [selfExpanded, setSelfExpanded] = _react.useState.call(void 0, isExpanded);
+  const [visible, setVisible] = _react.useState.call(void 0, isExpanded);
+  const contentRef = _react.useRef.call(void 0, null);
+  const entryTimer = _react.useRef.call(void 0, void 0);
+  const leaveTimer = _react.useRef.call(void 0, void 0);
+  const resetTimer = _react.useRef.call(void 0, void 0);
+  const [state, updateShape] = _chunkHKOESPKZjs.use_real_shape_default.call(void 0, contentRef);
+  _react.useEffect.call(void 0, () => setHeight(`${state.height}px`), [state.height]);
+  const latest = _chunkZRORQ2WHjs.use_latest_default.call(void 0, { delay, shapeHeight: state.height });
+  _react.useEffect.call(void 0, () => {
+    const { delay: delay2, shapeHeight } = latest.current;
+    if (isExpanded) {
+      setVisible(isExpanded);
+    } else {
+      updateShape();
+      setHeight(`${shapeHeight}px`);
+    }
+    entryTimer.current = window.setTimeout(() => {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30);
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(() => {
+        setHeight("auto");
+        clearTimeout(resetTimer.current);
+      }, delay2);
+    } else {
+      leaveTimer.current = window.setTimeout(() => {
+        setVisible(isExpanded);
+        clearTimeout(leaveTimer.current);
+      }, delay2 / 2);
+    }
+    return () => {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded, updateShape, latest]);
+  const containerStyle = {
+    padding: 0,
+    margin: 0,
+    overflow: "hidden",
+    transition: `height ${delay}ms ease`,
+    height: selfExpanded ? height : 0,
+    visibility: selfExpanded ? "visible" : visible ? "visible" : "hidden"
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: containerStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: contentRef, children }) });
+}
+Expand.displayName = "BolioUIExpand";
+var expand_default = Expand;
+
+// core/Collapse/CollapseContext.ts
+
+var defaultContext = {
+  values: []
+};
+var CollapseContext = _react2.default.createContext(defaultContext);
+var useCollapseContext = () => _react2.default.useContext(CollapseContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/Collapse.module.css.bolio-css-module-source
+var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
+
+// core/Collapse/Collapse.tsx
+
+var CollapseComponent = _react2.default.forwardRef(
+  ({
+    children,
+    title,
+    subtitle,
+    initialVisible = false,
+    shadow = false,
+    className = "",
+    index,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const { values, updateValues } = useCollapseContext();
+    const [visible, setVisible, visibleRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, initialVisible);
+    if (!title) {
+      _chunkAXYDJGTNjs.log_warning_default.call(void 0, '"title" is required.', "Collapse");
+    }
+    _react.useEffect.call(void 0, () => {
+      if (!values.length) return;
+      const isActive = !!values.find((item) => item === index);
+      setVisible(isActive);
+    }, [index, setVisible, values]);
+    const clickHandler = () => {
+      const next = !visibleRef.current;
+      setVisible(next);
+      if (updateValues) updateValues(index, next);
+    };
+    const keyDownHandler = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      clickHandler();
+    };
+    const collapseStyle = shadow ? {
+      boxShadow: theme.expressiveness.shadowSmall,
+      border: "none",
+      borderRadius: theme.layout.radius,
+      padding: theme.layout.gap,
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    } : {
+      borderTop: `1px solid ${theme.palette.border}`,
+      borderBottom: `1px solid ${theme.palette.border}`,
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, "collapse", className),
+        ...props,
+        style: { ...collapseStyle, ...style },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              className: Collapse_module_css_default.view,
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": visible,
+              onClick: clickHandler,
+              onKeyDown: keyDownHandler,
+              style: {
+                "--collapse-focus-color": theme.palette.primary
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "div",
+                  {
+                    className: Collapse_module_css_default.title,
+                    style: { color: theme.palette.foreground },
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: title }),
+                      " ",
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseIcon_default, { active: visible })
+                    ]
+                  }
+                ),
+                subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    className: Collapse_module_css_default.subtitle,
+                    style: { color: theme.palette.accents_5 },
+                    children: subtitle
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, expand_default, { isExpanded: visible, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: Collapse_module_css_default.content,
+              style: {
+                padding: `${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)}`
+              },
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+CollapseComponent.displayName = "BolioUICollapse";
+var Collapse = _chunkMAICNLTYjs.with_scale_default.call(void 0, CollapseComponent);
+var Collapse_default = Collapse;
+
+// core/Collapse/CollapseGroup.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/CollapseGroup.module.css.bolio-css-module-source
+var CollapseGroup_module_css_default = { "collapseGroup": "CollapseGroup-module_collapseGroup__01F3X" };
+
+// core/Collapse/CollapseGroup.tsx
+
+function CollapseGroupComponent({
+  children,
+  accordion = true,
+  className = "",
+  style,
+  ...props
+}) {
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const [state, setState, stateRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, []);
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, CollapseGroup_module_css_default.collapseGroup, className);
+  const updateValues = _react.useCallback.call(void 0, 
+    (currentIndex, nextState) => {
+      const hasChild = stateRef.current.find((val) => val === currentIndex);
+      if (accordion) {
+        if (nextState) return setState([currentIndex]);
+        return setState([]);
+      }
+      if (nextState) {
+        if (hasChild) return;
+        return setState([...stateRef.current, currentIndex]);
+      }
+      setState(stateRef.current.filter((item) => item !== currentIndex));
+    },
+    [accordion, stateRef, setState]
+  );
+  const initialValue = _react.useMemo.call(void 0, 
+    () => ({
+      values: state,
+      updateValues
+    }),
+    [state, updateValues]
+  );
+  const hasIndexChildren = _react.useMemo.call(void 0, 
+    () => _chunkUX2B3G6Ujs.setChildrenIndex.call(void 0, children, [Collapse_default]),
+    [children]
+  );
+  const groupStyle = {
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0.6)} ${SCALES.pb(0)} ${SCALES.pl(0.6)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classes, ...props, style: groupStyle, children: hasIndexChildren }) });
+}
+CollapseGroupComponent.displayName = "BolioUICollapseGroup";
+var CollapseGroup = _chunkMAICNLTYjs.with_scale_default.call(void 0, CollapseGroupComponent);
+var CollapseGroup_default = CollapseGroup;
+
+// core/Collapse/index.ts
+Collapse_default.Group = CollapseGroup_default;
+var Collapse_default2 = Collapse_default;
+
+
+
+exports.Collapse_default = Collapse_default2;

package/dist/chunk-GGCVPMXO.js

@@ -0,0 +1,188 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkXF4TPE2Wjs = require('./chunk-XF4TPE2W.js');
+
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+var _chunkBSDZWWUSjs = require('./chunk-BSDZWWUS.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/Popover/Popover.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Popover/PopoverContext.ts
+
+var defaultContext = {
+  disableItemsAutoClose: false,
+  onItemClick: () => {
+  }
+};
+var PopoverContext = _react2.default.createContext(defaultContext);
+var usePopoverContext = () => _react.useContext.call(void 0, PopoverContext);
+
+// core/Popover/Popover.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var defaultProps = {
+  disableItemsAutoClose: false,
+  trigger: "click",
+  placement: "bottom",
+  portalClassName: "",
+  initialVisible: false,
+  hideArrow: false,
+  type: "default",
+  enterDelay: 100,
+  leaveDelay: 150,
+  offset: 12,
+  className: "",
+  onVisibleChange: (() => {
+  }),
+  visible: false
+};
+var PopoverComponent = _react2.default.forwardRef((popoverProps, ref) => {
+  const {
+    content,
+    children,
+    trigger,
+    placement,
+    initialVisible,
+    portalClassName,
+    disableItemsAutoClose,
+    onVisibleChange,
+    visible: customVisible,
+    type = "default",
+    ...props
+  } = _chunkBSDZWWUSjs.use_default_props_default.call(void 0, popoverProps, defaultProps);
+  const [visible, setVisible] = _react.useState.call(void 0, initialVisible);
+  const textNode = _react.useMemo.call(void 0, () => _chunkUX2B3G6Ujs.getReactNode.call(void 0, content), [content]);
+  const onPopoverVisibleChange = _react.useCallback.call(void 0, 
+    (next) => {
+      setVisible(next);
+      onVisibleChange(next);
+    },
+    [onVisibleChange]
+  );
+  const onChildClick = _react.useCallback.call(void 0, () => {
+    onPopoverVisibleChange(false);
+  }, [onPopoverVisibleChange]);
+  const value = _react.useMemo.call(void 0, 
+    () => ({
+      onItemClick: onChildClick,
+      disableItemsAutoClose
+    }),
+    [onChildClick, disableItemsAutoClose]
+  );
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "popover", portalClassName);
+  const latestChange = _chunkZRORQ2WHjs.use_latest_default.call(void 0, onPopoverVisibleChange);
+  _react.useEffect.call(void 0, () => {
+    if (customVisible === void 0) return;
+    latestChange.current(customVisible);
+  }, [customVisible, latestChange]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkXF4TPE2Wjs.Tooltip_default,
+    {
+      ref,
+      initialVisible: false,
+      text: textNode,
+      trigger,
+      placement,
+      portalClassName: classes,
+      visible,
+      type,
+      onVisibleChange: onPopoverVisibleChange,
+      ...props,
+      children
+    }
+  ) });
+});
+PopoverComponent.displayName = "BolioUIPopover";
+var Popover = _chunkMAICNLTYjs.with_scale_default.call(void 0, PopoverComponent);
+var Popover_default = Popover;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Popover/PopoverItem.module.css.bolio-css-module-source
+var PopoverItem_module_css_default = { "item": "PopoverItem-module_item__ntzzC", "line": "PopoverItem-module_line__AtYEN", "title": "PopoverItem-module_title__ARsPq" };
+
+// core/Popover/PopoverItem.tsx
+
+function PopoverItemComponent({
+  children,
+  line = false,
+  title = false,
+  className = "",
+  onClick,
+  disableAutoClose = false,
+  style,
+  ...props
+}) {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const { disableItemsAutoClose, onItemClick } = usePopoverContext();
+  const hasHandler = Boolean(onClick);
+  const dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line;
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+    PopoverItem_module_css_default.item,
+    { [PopoverItem_module_css_default.line]: line, [PopoverItem_module_css_default.title]: title },
+    className
+  );
+  const clickHandler = (event) => {
+    if (onClick) onClick(event);
+    if (dontCloseByClick) {
+      return event.stopPropagation();
+    }
+    onItemClick(event);
+  };
+  const itemStyle = line ? {
+    backgroundColor: theme.palette.border,
+    height: SCALES.height(0.0625),
+    margin: `${SCALES.mt(0.35)} ${SCALES.mr(0)} ${SCALES.mb(0.35)} ${SCALES.ml(0)}`,
+    width: SCALES.width(1, "100%"),
+    "--popover-item-hover-color": theme.palette.foreground
+  } : {
+    color: title ? theme.palette.foreground : theme.palette.accents_5,
+    fontSize: title ? SCALES.font(0.925) : SCALES.font(0.875),
+    width: SCALES.width(1, "auto"),
+    height: SCALES.height(1, "auto"),
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    padding: `${SCALES.pt(0.5)} ${SCALES.pr(0.75)} ${SCALES.pb(0.5)} ${SCALES.pl(0.75)}`,
+    cursor: hasHandler ? "pointer" : "default",
+    "--popover-item-hover-color": theme.palette.foreground
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: classes,
+        onClick: clickHandler,
+        ...props,
+        style: { ...itemStyle, ...style },
+        children
+      }
+    ),
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverItem, { line: true, title: false })
+  ] });
+}
+PopoverItemComponent.displayName = "BolioUIPopoverItem";
+var PopoverItem = _chunkMAICNLTYjs.with_scale_default.call(void 0, PopoverItemComponent);
+var PopoverItem_default = PopoverItem;
+
+// core/Popover/index.ts
+Popover_default.Item = PopoverItem_default;
+Popover_default.Option = PopoverItem_default;
+var Popover_default2 = Popover_default;
+
+
+
+exports.Popover_default = Popover_default2;

package/dist/chunk-GJ77XHZ3.js

@@ -0,0 +1,83 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Container/Container.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Container/Container.module.css.bolio-css-module-source
+var Container_module_css_default = { "container": "Container-module_container__qKv1a" };
+
+// core/Container/Container.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var defaultProps = {
+  gap: 0,
+  justify: "start",
+  align: "top",
+  component: "div",
+  className: "",
+  fluid: false
+};
+var getFlexAlignment = (justify, align) => {
+  const flexJustifyMap = {
+    end: "flex-end",
+    center: "center",
+    "space-around": "space-around",
+    "space-between": "space-between"
+  };
+  const flexAlignMap = {
+    middle: "center",
+    bottom: "flex-end"
+  };
+  return {
+    justifyValue: flexJustifyMap[justify] || "normal",
+    alignValue: flexAlignMap[align] || "normal"
+  };
+};
+var Container = _react2.default.forwardRef(
+  ({
+    children,
+    component = defaultProps.component,
+    justify = defaultProps.justify,
+    align = defaultProps.align,
+    fluid = defaultProps.fluid,
+    className = defaultProps.className,
+    style,
+    ...props
+  }, ref) => {
+    const Component = component;
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { justifyValue, alignValue } = _react.useMemo.call(void 0, 
+      () => getFlexAlignment(justify, align),
+      [justify, align]
+    );
+    const containerStyle = {
+      maxWidth: fluid ? void 0 : theme.layout.pageWidthWithMargin,
+      justifyContent: justifyValue,
+      alignItems: alignValue,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Component,
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, "container", Container_module_css_default.container, className),
+        ...props,
+        style: containerStyle,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "BolioUIContainer";
+var Container_default = Container;
+
+// core/Container/index.ts
+var Container_default2 = Container_default;
+
+
+
+exports.Container_default = Container_default2;