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

package/dist/chunk-CGEUUDJ4.js

@@ -0,0 +1,250 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkNCUSKYUEjs = require('./chunk-NCUSKYUE.js');
+
+
+var _chunkC3ZZPIUOjs = require('./chunk-C3ZZPIUO.js');
+
+
+
+var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Snippet/Snippet.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Snippet/styles.ts
+var getStyles = (type, palette, { fill, light, ghost, subtle } = {}) => {
+  if (_chunkGJZT47MPjs.isSemanticColorType.call(void 0, type)) {
+    if (subtle) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "subtle");
+      return { color, border, bgColor: bg };
+    }
+    if (light) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "light");
+      return { color, border, bgColor: bg };
+    }
+    if (ghost) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "outline");
+      return { color, border, bgColor: bg };
+    }
+  }
+  const styles = {
+    default: {
+      color: palette.foreground,
+      border: palette.accents_2,
+      bgColor: palette.accents_2
+    },
+    primary: {
+      color: palette.primary,
+      border: palette.primary,
+      bgColor: palette.accents_1
+    },
+    secondary: {
+      color: palette.secondary,
+      border: palette.secondary,
+      bgColor: palette.accents_1
+    },
+    success: {
+      color: palette.success,
+      border: palette.success,
+      bgColor: palette.accents_1
+    },
+    warning: {
+      color: palette.warning,
+      border: palette.warning,
+      bgColor: palette.accents_1
+    },
+    error: {
+      color: palette.error,
+      border: palette.error,
+      bgColor: palette.accents_1
+    },
+    info: {
+      color: palette.info,
+      border: palette.info,
+      bgColor: palette.accents_1
+    },
+    lite: {
+      color: palette.foreground,
+      border: palette.border,
+      bgColor: palette.accents_1
+    },
+    dark: {
+      color: palette.background,
+      border: palette.foreground,
+      bgColor: palette.foreground
+    }
+  };
+  const filledTypes = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "error",
+    "info"
+  ];
+  const style = styles[type];
+  const shouldFilled = filledTypes.includes(type);
+  if (!fill || !shouldFilled) return style;
+  return {
+    ...style,
+    color: style.bgColor,
+    bgColor: style.color
+  };
+};
+
+// core/Snippet/SnippetIcon.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Snippet/SnippetIcon.module.css.bolio-css-module-source
+var SnippetIcon_module_css_default = { "icon": "SnippetIcon-module_icon__HUZlq" };
+
+// core/Snippet/SnippetIcon.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function SnippetIconComponent() {
+  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: SnippetIcon_module_css_default.icon,
+      style: { color: "currentcolor" },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z" })
+    }
+  );
+}
+SnippetIconComponent.displayName = "BolioUISnippetIcon";
+var SnippetIcon = _react2.default.memo(SnippetIconComponent);
+var SnippetIcon_default = SnippetIcon;
+
+// core/utils/use-clipboard.ts
+var use_clipboard_default2 = _chunkC3ZZPIUOjs.use_clipboard_default;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Snippet/Snippet.module.css.bolio-css-module-source
+var Snippet_module_css_default = { "snippet": "Snippet-module_snippet__M4eX8", "copy": "Snippet-module_copy__vSMCk" };
+
+// core/Snippet/Snippet.tsx
+
+var textArrayToString = (text) => {
+  return text.reduce((pre, current) => {
+    if (!current) return pre;
+    return pre ? `${pre}
+${current}` : current;
+  }, "");
+};
+var SnippetComponent = _react2.default.forwardRef(
+  ({
+    type = "default",
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    rounded = false,
+    children,
+    symbol = "$",
+    toastText = "Copied!",
+    toastType = "primary",
+    text,
+    copy: copyType,
+    className = "",
+    style: styleProp,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const { copy } = use_clipboard_default2();
+    const { setToast } = _chunkNCUSKYUEjs.use_toasts_default.call(void 0, );
+    const preRef = _react.useRef.call(void 0, null);
+    const isMultiLine = text && Array.isArray(text);
+    const style = _react.useMemo.call(void 0, 
+      () => getStyles(type, theme.palette, { fill: filled, light, ghost, subtle }),
+      [type, theme.palette, filled, light, ghost, subtle]
+    );
+    const showCopyIcon = _react.useMemo.call(void 0, () => copyType !== "prevent", [copyType]);
+    const childText = _react.useMemo.call(void 0, () => {
+      if (isMultiLine) return textArrayToString(text);
+      if (!children) return text;
+      if (!preRef.current) return "";
+      return preRef.current.textContent;
+    }, [isMultiLine, text, children]);
+    const symbolBefore = _react.useMemo.call(void 0, () => {
+      const str = symbol.trim();
+      return str ? `${str} ` : "";
+    }, [symbol]);
+    const clickHandler = () => {
+      if (!childText || !showCopyIcon) return;
+      copy(childText);
+      if (copyType === "silent") return;
+      setToast({ text: toastText, type: toastType });
+    };
+    const fontSize = SCALES.font(0.8125);
+    const borderRadius = rounded ? "25px" : theme.layout.radius;
+    const snippetStyle = {
+      color: style.color,
+      backgroundColor: style.bgColor,
+      border: `1px solid ${style.border}`,
+      borderRadius,
+      fontSize,
+      width: SCALES.width(1, "initial"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0.667)} ${SCALES.pr(2.667)} ${SCALES.pb(0.667)} ${SCALES.pl(0.667)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...{
+        "--snippet-symbol": JSON.stringify(symbolBefore)
+      },
+      ...styleProp
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Snippet_module_css_default.snippet, className),
+        ...props,
+        style: snippetStyle,
+        children: [
+          isMultiLine ? text.map((t, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { children: t }, `snippet-${index}-${t}`)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { ref: preRef, children: children || text }),
+          showCopyIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: Snippet_module_css_default.copy,
+              onClick: clickHandler,
+              style: {
+                backgroundColor: style.bgColor,
+                alignItems: isMultiLine ? "flex-start" : "center",
+                width: `calc(3.281 * ${fontSize})`,
+                borderRadius,
+                paddingTop: isMultiLine ? SCALES.pt(0.667) : 0
+              },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SnippetIcon_default, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SnippetComponent.displayName = "BolioUISnippet";
+var Snippet = _chunkMAICNLTYjs.with_scale_default.call(void 0, SnippetComponent);
+var Snippet_default = Snippet;
+
+// core/Snippet/index.ts
+var Snippet_default2 = Snippet_default;
+
+
+
+exports.Snippet_default = Snippet_default2;

package/dist/chunk-D7CNDAYB.js

@@ -0,0 +1,92 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Divider/Divider.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Divider/Divider.module.css.bolio-css-module-source
+var Divider_module_css_default = { "divider": "Divider-module_divider__X6T0v", "text": "Divider-module_text__wMjmA", "start": "Divider-module_start__-GHJP", "end": "Divider-module_end__hg7v1" };
+
+// core/Divider/Divider.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var getColor = (type, palette) => {
+  const colors = {
+    default: palette.border,
+    primary: palette.primaryLight,
+    secondary: palette.secondaryLight,
+    success: palette.successLight,
+    warning: palette.warningLight,
+    error: palette.errorLight,
+    info: palette.infoLight,
+    dark: palette.foreground,
+    lite: palette.accents_1
+  };
+  return colors[type];
+};
+var DividerComponent = _react2.default.forwardRef(
+  ({
+    type = "default",
+    align = "center",
+    children,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "divider", Divider_module_css_default.divider, className);
+    const color = _react.useMemo.call(void 0, 
+      () => getColor(type, theme.palette),
+      [type, theme.palette]
+    );
+    const alignClassName = _react.useMemo.call(void 0, () => {
+      if (!align || align === "center") return "";
+      if (align === "left" || align === "start") return Divider_module_css_default.start;
+      return Divider_module_css_default.end;
+    }, [align]);
+    const alignClasses = _chunk5KUROAEPjs.use_classes_default.call(void 0, "text", Divider_module_css_default.text, alignClassName);
+    const textColor = type === "default" ? theme.palette.foreground : color;
+    const dividerStyle = {
+      backgroundColor: color,
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(0.0625),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0.5)} ${SCALES.mr(0)} ${SCALES.mb(0.5)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    const textStyle = {
+      backgroundColor: theme.palette.background,
+      color: textColor
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: classes,
+        ...props,
+        style: dividerStyle,
+        children: children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: alignClasses, style: textStyle, children })
+      }
+    );
+  }
+);
+DividerComponent.displayName = "BolioUIDivider";
+var Divider = _chunkMAICNLTYjs.with_scale_default.call(void 0, DividerComponent);
+var Divider_default = Divider;
+
+// core/Divider/index.ts
+var Divider_default2 = Divider_default;
+
+
+
+exports.Divider_default = Divider_default2;

package/dist/chunk-DAZ2GHNP.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/EmptyState/EmptyState.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/EmptyState/EmptyState.module.css.bolio-css-module-source
+var EmptyState_module_css_default = { "empty": "EmptyState-module_empty__EQSEi", "icon": "EmptyState-module_icon__NtFFj", "title": "EmptyState-module_title__yc9C1", "description": "EmptyState-module_description__1ZOka", "action": "EmptyState-module_action__mEtyt" };
+
+// core/EmptyState/EmptyState.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var EmptyStateComponent = _react2.default.forwardRef(
+  ({ icon, title, description, action, className = "", style, ...props }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const emptyStyle = {
+      width: SCALES.width(1, "100%"),
+      padding: `${SCALES.pt(2)} ${SCALES.pr(1)} ${SCALES.pb(2)} ${SCALES.pl(1)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, EmptyState_module_css_default.empty, className),
+        style: emptyStyle,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: EmptyState_module_css_default.icon,
+              style: {
+                color: theme.palette.accents_5,
+                backgroundColor: theme.palette.accents_2
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: EmptyState_module_css_default.title, children: title }),
+          description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: EmptyState_module_css_default.description,
+              style: { color: theme.palette.accents_5 },
+              children: description
+            }
+          ),
+          action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: EmptyState_module_css_default.action, children: action })
+        ]
+      }
+    );
+  }
+);
+EmptyStateComponent.displayName = "BolioUIEmptyState";
+var EmptyState = _chunkMAICNLTYjs.with_scale_default.call(void 0, EmptyStateComponent);
+var EmptyState_default = EmptyState;
+
+// core/EmptyState/index.ts
+var EmptyState_default2 = EmptyState_default;
+
+
+
+exports.EmptyState_default = EmptyState_default2;

package/dist/chunk-DGXZP4VJ.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk3WPRUUZ6js = require('./chunk-3WPRUUZ6.js');
+
+// core/utils/use-click-away.ts
+var use_click_away_default2 = _chunk3WPRUUZ6js.use_click_away_default;
+
+
+
+exports.use_click_away_default = use_click_away_default2;

package/dist/chunk-DSX6YDJM.js

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/utils/layouts.ts
+var _react = require('react');
+var getElementOffset = (el) => {
+  if (!el)
+    return {
+      top: 0,
+      left: 0
+    };
+  const { top, left } = el.getBoundingClientRect();
+  return { top, left };
+};
+var defaultRect = {
+  top: -1e3,
+  left: -1e3,
+  right: -1e3,
+  width: 0,
+  height: 0,
+  elementTop: -1e3
+};
+var getRectFromDOMWithContainer = (domRect, getContainer) => {
+  if (!domRect) return defaultRect;
+  const container = getContainer ? getContainer() : null;
+  const scrollElement = container || document.documentElement;
+  const { top: offsetTop, left: offsetLeft } = getElementOffset(container);
+  return {
+    ...domRect,
+    width: domRect.width || domRect.right - domRect.left,
+    height: domRect.height || domRect.top - domRect.bottom,
+    top: domRect.bottom + scrollElement.scrollTop - offsetTop,
+    left: domRect.left + scrollElement.scrollLeft - offsetLeft,
+    elementTop: domRect.top + scrollElement.scrollTop - offsetTop
+  };
+};
+var isUnplacedRect = (rect) => {
+  if (!rect) return true;
+  return rect.top === defaultRect.top && rect.left === defaultRect.left;
+};
+var getRefRect = (ref, getContainer) => {
+  if (!ref || !ref.current) return defaultRect;
+  const rect = ref.current.getBoundingClientRect();
+  return getRectFromDOMWithContainer(rect, getContainer);
+};
+var getEventRect = (event, getContainer) => {
+  var _a;
+  const rect = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.getBoundingClientRect();
+  if (!rect) return defaultRect;
+  return getRectFromDOMWithContainer(rect, getContainer);
+};
+var isRefTarget = (eventOrRef) => {
+  return typeof (eventOrRef == null ? void 0 : eventOrRef.target) === "undefined";
+};
+var useRect = (initialState) => {
+  const [rect, setRect] = _react.useState.call(void 0, 
+    initialState || defaultRect
+  );
+  const updateRect = (eventOrRef, getContainer) => {
+    if (isRefTarget(eventOrRef))
+      return setRect(getRefRect(eventOrRef, getContainer));
+    setRect(getEventRect(eventOrRef, getContainer));
+  };
+  return {
+    rect,
+    setRect: updateRect
+  };
+};
+
+
+
+
+
+exports.isUnplacedRect = isUnplacedRect; exports.getRefRect = getRefRect; exports.useRect = useRect;