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

package/dist/chunk-TWIOSRRP.js

@@ -0,0 +1,294 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkWEYAL53Ojs = require('./chunk-WEYAL53O.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Image/Image.tsx
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Image/ImageSkeleton.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Image/ImageSkeleton.module.css.bolio-css-module-source
+var ImageSkeleton_module_css_default = { "skeleton": "ImageSkeleton-module_skeleton__uWwK-", "imageSkeletonLoading": "ImageSkeleton-module_imageSkeletonLoading__aeTB6" };
+
+// core/Image/ImageSkeleton.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ImageSkeleton = _react2.default.memo(
+  ({ opacity = 0.5, ...props }) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ...props,
+        className: ImageSkeleton_module_css_default.skeleton,
+        style: {
+          backgroundImage: `linear-gradient(270deg, ${theme.palette.accents_1}, ${theme.palette.accents_2}, ${theme.palette.accents_2}, ${theme.palette.accents_1})`,
+          opacity
+        }
+      }
+    );
+  }
+);
+ImageSkeleton.displayName = "BolioUIImageSkeleton";
+var ImageSkeleton_default = ImageSkeleton;
+
+// core/Image/helpers.ts
+var transformDataSource = (src) => {
+  const left = `${src}`.slice(0, 4);
+  if (encodeURIComponent(left) === "%3Csvg") {
+    return `data:image/svg+xml;utf8,${src}`;
+  }
+  return src;
+};
+var getHostFromUrl = (url) => {
+  try {
+    return new URL(url).host;
+  } catch (e) {
+    return url;
+  }
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Image/Image.module.css.bolio-css-module-source
+var Image_module_css_default = { "image": "Image-module_image__3xahg", "img": "Image-module_img__58sZo" };
+
+// core/Image/Image.tsx
+
+var ImageComponent = _react2.default.forwardRef(
+  ({
+    src,
+    disableSkeleton = false,
+    className = "",
+    maxDelay = 3e3,
+    style,
+    ...props
+  }, ref) => {
+    const { SCALES, getScaleProps } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const width = getScaleProps(["width", "w"]);
+    const height = getScaleProps(["height", "h"]);
+    const showAnimation = !disableSkeleton && width && height;
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const [loading, setLoading] = _react.useState.call(void 0, true);
+    const [showSkeleton, setShowSkeleton] = _react.useState.call(void 0, true);
+    const imageRef = _react.useRef.call(void 0, null);
+    _react.useImperativeHandle.call(void 0, ref, () => imageRef.current);
+    const url = _react.useMemo.call(void 0, () => transformDataSource(src), [src]);
+    const imageLoaded = () => {
+      if (!showAnimation) return;
+      setLoading(false);
+    };
+    _react.useEffect.call(void 0, () => {
+      if (!showAnimation) return;
+      if (!imageRef.current) return;
+      if (imageRef.current.complete) {
+        setLoading(false);
+        setShowSkeleton(false);
+      }
+    }, [showAnimation]);
+    _react.useEffect.call(void 0, () => {
+      const timer = setTimeout(() => {
+        if (showAnimation) {
+          setShowSkeleton(false);
+        }
+        clearTimeout(timer);
+      }, maxDelay);
+      return () => clearTimeout(timer);
+    }, [loading, maxDelay, showAnimation]);
+    const imageStyle = {
+      borderRadius: theme.layout.radius,
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0, "auto")} ${SCALES.mb(0)} ${SCALES.ml(0, "auto")}`,
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, "image", Image_module_css_default.image, className),
+        style: imageStyle,
+        children: [
+          showSkeleton && showAnimation && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImageSkeleton_default, { opacity: loading ? 1 : 0 }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "img",
+            {
+              ref: imageRef,
+              onLoad: imageLoaded,
+              src: url,
+              ...props,
+              className: Image_module_css_default.img,
+              style: {
+                width: SCALES.width(1, "auto"),
+                height: SCALES.height(1, "auto"),
+                ...style
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageComponent.displayName = "BolioUIImage";
+var Image = _chunkMAICNLTYjs.with_scale_default.call(void 0, ImageComponent);
+var Image_default = Image;
+
+// core/Image/ImageBrowser.tsx
+
+
+// core/Image/ImageBrowserHttpsIcon.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Image/ImageBrowserHttpsIcon.module.css.bolio-css-module-source
+var ImageBrowserHttpsIcon_module_css_default = { "svg": "ImageBrowserHttpsIcon-module_svg__xiI3S" };
+
+// core/Image/ImageBrowserHttpsIcon.tsx
+
+var ImageBrowserHttpsIcon = () => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { viewBox: "0 0 24 24", fill: "currentColor", className: ImageBrowserHttpsIcon_module_css_default.svg, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M5 10.2H19V21H5V10.2Z" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z"
+      }
+    )
+  ] });
+};
+var MemoImageBrowserHttpsIcon = _react2.default.memo(ImageBrowserHttpsIcon);
+var ImageBrowserHttpsIcon_default = MemoImageBrowserHttpsIcon;
+
+// core/Image/styles.ts
+var getBrowserColors = (invert, palette) => {
+  return invert ? {
+    color: palette.background,
+    barBgColor: palette.foreground,
+    inputBgColor: palette.accents_8,
+    borderColor: palette.accents_7,
+    titleColor: palette.accents_2
+  } : {
+    color: palette.foreground,
+    barBgColor: palette.background,
+    inputBgColor: palette.accents_1,
+    borderColor: palette.border,
+    titleColor: palette.accents_5
+  };
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Image/ImageBrowser.module.css.bolio-css-module-source
+var ImageBrowser_module_css_default = { "title": "ImageBrowser-module_title__8yGWk", "addressInput": "ImageBrowser-module_addressInput__-pEyG", "https": "ImageBrowser-module_https__VUC-O", "browser": "ImageBrowser-module_browser__NNWlY", "header": "ImageBrowser-module_header__FofmO", "traffic": "ImageBrowser-module_traffic__UvQ3C", "close": "ImageBrowser-module_close__180FZ", "mini": "ImageBrowser-module_mini__-SI50", "full": "ImageBrowser-module_full__2ZmLk" };
+
+// core/Image/ImageBrowser.tsx
+
+var getTitle = (title, colors) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: ImageBrowser_module_css_default.title, style: { color: colors.titleColor }, children: title });
+var getAddressInput = (url, showFullLink, colors, anchorProps) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  "div",
+  {
+    className: ImageBrowser_module_css_default.addressInput,
+    style: { backgroundColor: colors.inputBgColor },
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ImageBrowser_module_css_default.https, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImageBrowserHttpsIcon_default, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEYAL53Ojs.Link_default, { href: url, title: url, target: "_blank", ...anchorProps, children: showFullLink ? url : getHostFromUrl(url) })
+    ]
+  }
+);
+var ImageBrowserComponent = _react2.default.forwardRef(
+  ({
+    url,
+    title,
+    children,
+    showFullLink = false,
+    invert = false,
+    anchorProps = {},
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const colors = _react.useMemo.call(void 0, 
+      () => getBrowserColors(invert, theme.palette),
+      [invert, theme.palette]
+    );
+    const input = _react.useMemo.call(void 0, () => {
+      if (url) return getAddressInput(url, showFullLink, colors, anchorProps);
+      if (title) return getTitle(title, colors);
+      return null;
+    }, [url, showFullLink, title, colors, anchorProps]);
+    const browserStyle = {
+      boxShadow: theme.expressiveness.shadowLarge,
+      borderRadius: theme.layout.radius,
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "max-content"),
+      height: SCALES.height(1, "auto"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0, "auto")} ${SCALES.mb(0)} ${SCALES.ml(0, "auto")}`,
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, ImageBrowser_module_css_default.browser, className),
+        ref,
+        ...props,
+        style: browserStyle,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "header",
+            {
+              className: ImageBrowser_module_css_default.header,
+              style: {
+                color: colors.color,
+                backgroundColor: colors.barBgColor,
+                borderBottom: `1px solid ${colors.borderColor}`
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "div",
+                  {
+                    className: ImageBrowser_module_css_default.traffic,
+                    style: { left: theme.layout.gapHalf },
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ImageBrowser_module_css_default.close }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ImageBrowser_module_css_default.mini }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: ImageBrowser_module_css_default.full })
+                    ]
+                  }
+                ),
+                input
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+ImageBrowserComponent.displayName = "BolioUIImageBrowser";
+var ImageBrowser = _chunkMAICNLTYjs.with_scale_default.call(void 0, ImageBrowserComponent);
+var ImageBrowser_default = ImageBrowser;
+
+// core/Image/index.ts
+Image_default.Browser = ImageBrowser_default;
+var Image_default2 = Image_default;
+
+
+
+exports.Image_default = Image_default2;

package/dist/chunk-TZ7TOEP3.js

@@ -0,0 +1,54 @@
+"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/Spinner/Spinner.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Spinner/Spinner.module.css.bolio-css-module-source
+var Spinner_module_css_default = { "spinner": "Spinner-module_spinner__6Plyb", "container": "Spinner-module_container__MSmM6", "spinnerSpin": "Spinner-module_spinnerSpin__o1ssr" };
+
+// core/Spinner/Spinner.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var SpinnerComponent = _react2.default.forwardRef(({ 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, Spinner_module_css_default.spinner, className);
+  const spinnerStyle = {
+    width: SCALES.width(1.25),
+    height: SCALES.height(1.25),
+    padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    "--spinner-color": theme.palette.foreground,
+    "--spinner-radius": theme.layout.radius,
+    ...style
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      role: "status",
+      className: classes,
+      ...props,
+      style: spinnerStyle,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: Spinner_module_css_default.container, children: [...new Array(12)].map((_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}, `spinner-${index}`)) })
+    }
+  );
+});
+SpinnerComponent.displayName = "BolioUISpinner";
+var Spinner = _chunkMAICNLTYjs.with_scale_default.call(void 0, SpinnerComponent);
+var Spinner_default = Spinner;
+
+// core/Spinner/index.ts
+var Spinner_default2 = Spinner_default;
+
+
+
+exports.Spinner_default = Spinner_default2;

package/dist/chunk-UOGCO6CV.js

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+// core/Input/InputBlockLabel.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Input/InputBlockLabel.module.css.bolio-css-module-source
+var InputBlockLabel_module_css_default = { "label": "InputBlockLabel-module_label__uTays" };
+
+// core/Input/InputBlockLabel.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function InputBlockLabelComponent({
+  children,
+  error,
+  id,
+  htmlFor
+}) {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const labelStyle = {
+    color: error ? theme.palette.error : theme.palette.accents_6,
+    marginBottom: error ? 0 : "0.5em",
+    marginTop: error ? "0.2em" : 0,
+    fontSize: error ? "0.775rem" : "1em"
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "label",
+    {
+      id,
+      htmlFor,
+      className: InputBlockLabel_module_css_default.label,
+      style: labelStyle,
+      children
+    }
+  );
+}
+InputBlockLabelComponent.displayName = "BolioUIInputBlockLabel";
+var InputBlockLabel = _react2.default.memo(InputBlockLabelComponent);
+var InputBlockLabel_default = InputBlockLabel;
+
+
+
+exports.InputBlockLabel_default = InputBlockLabel_default;

package/dist/{chunk-45MVPPJN.js → chunk-V5I4ORQQ.js}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkTFZ2IGNHjs = require('./chunk-TFZ2IGNH.js');
+var _chunkFEA5BJ35js = require('./chunk-FEA5BJ35.js');
 
 // core/use-theme/index.ts
-var use_theme_default = _chunkTFZ2IGNHjs.useTheme;
+var use_theme_default = _chunkFEA5BJ35js.useTheme;
 
 
 

package/dist/chunk-WEYAL53O.js

@@ -0,0 +1,103 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkRZBEZ26Ajs = require('./chunk-RZBEZ26A.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Link/Link.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Link/Icon.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Link/Icon.module.css.bolio-css-module-source
+var Icon_module_css_default = { "icon": "Icon-module_icon__CJT1r" };
+
+// core/Link/Icon.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function LinkIconComponent() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "0.9375em",
+      height: "0.9375em",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: Icon_module_css_default.icon,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M15 3h6v6" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 14L21 3" })
+      ]
+    }
+  );
+}
+LinkIconComponent.displayName = "BolioUILinkIcon";
+var LinkIcon = _react2.default.memo(LinkIconComponent);
+var Icon_default = LinkIcon;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Link/Link.module.css.bolio-css-module-source
+var Link_module_css_default = { "link": "Link-module_link__nFt2S" };
+
+// core/Link/Link.tsx
+
+var LinkComponent = _react2.default.forwardRef(
+  ({
+    href = "",
+    color = false,
+    underline = false,
+    children,
+    className = "",
+    block = false,
+    icon = false,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+    const linkColor = color || block ? theme.palette.link : "inherit";
+    const hoverColor = color || block ? theme.palette.primary : "inherit";
+    const decoration = underline ? "underline" : "none";
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "link", Link_module_css_default.link, className);
+    const linkStyle = {
+      color: linkColor,
+      borderRadius: block ? theme.layout.radius : 0,
+      fontSize: SCALES.font(1, "inherit"),
+      width: SCALES.width(1, "fit-content"),
+      height: SCALES.height(1, "auto"),
+      margin: block ? `${SCALES.mt(0)} ${SCALES.mr(-0.125)} ${SCALES.mb(0)} ${SCALES.ml(-0.125)}` : `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      padding: block ? `${SCALES.pt(0.15)} ${SCALES.pr(0.4)} ${SCALES.pb(0.15)} ${SCALES.pl(0.4)}` : `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      "--link-decoration": decoration,
+      "--link-hover-bg": block ? _chunkRZBEZ26Ajs.addColorAlpha.call(void 0, theme.palette.link, 0.1) : "unset",
+      "--link-hover-color": hoverColor,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { className: classes, href, ...props, ref, style: linkStyle, children: [
+      children,
+      icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon_default, {})
+    ] });
+  }
+);
+LinkComponent.displayName = "BolioUILink";
+var Link = _chunkMAICNLTYjs.with_scale_default.call(void 0, LinkComponent);
+var Link_default = Link;
+
+// core/Link/index.ts
+var Link_default2 = Link_default;
+
+
+
+exports.Link_default = Link_default2;