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

package/esm/chunk-BXDUHMWS.js

@@ -0,0 +1,57 @@
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  getId,
+  isBrowser
+} from "./chunk-UX2B3G6U.js";
+
+// core/utils/use-portal.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// core/utils/use-ssr.ts
+import { useEffect, useState } from "react";
+var useSSR = () => {
+  const [browser, setBrowser] = useState(false);
+  useEffect(() => {
+    setBrowser(isBrowser());
+  }, []);
+  return {
+    isBrowser: browser,
+    isServer: !browser
+  };
+};
+var use_ssr_default = useSSR;
+
+// core/utils/use-portal.ts
+var createElement = (id) => {
+  const el = document.createElement("div");
+  el.setAttribute("id", id);
+  return el;
+};
+var usePortal = (selectId, getContainer) => {
+  const [generatedId] = useState2(getId);
+  const id = `bolio-ui-${selectId != null ? selectId : generatedId}`;
+  const { isBrowser: isBrowser2 } = use_ssr_default();
+  const [elSnapshot, setElSnapshot] = useState2(
+    isBrowser2 ? createElement(id) : null
+  );
+  const getContainerRef = use_latest_default(getContainer);
+  useEffect2(() => {
+    const getContainer2 = getContainerRef.current;
+    const customContainer = getContainer2 ? getContainer2() : null;
+    const parentElement = customContainer || document.body;
+    const hasElement = parentElement.querySelector(`#${id}`);
+    const el = hasElement || createElement(id);
+    if (!hasElement) {
+      parentElement.appendChild(el);
+    }
+    setElSnapshot(el);
+  }, [id, getContainerRef]);
+  return elSnapshot;
+};
+var use_portal_default = usePortal;
+
+export {
+  use_portal_default
+};

package/esm/chunk-C3ZZPIUO.js

@@ -0,0 +1,54 @@
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_portal_default
+} from "./chunk-BXDUHMWS.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+
+// core/use-clipboard/use-clipboard.ts
+import { useCallback } from "react";
+var defaultOptions = {
+  onError: () => log_warning_default("Failed to copy.", "use-clipboard")
+};
+var copyText = (el, text, onError) => {
+  if (!el || !text) return;
+  const selection = window.getSelection();
+  if (!selection) return;
+  el.style.whiteSpace = "pre";
+  el.textContent = text;
+  const range = window.document.createRange();
+  selection.removeAllRanges();
+  range.selectNode(el);
+  selection.addRange(range);
+  try {
+    window.document.execCommand("copy");
+  } catch {
+    if (onError) onError();
+  }
+  selection.removeAllRanges();
+  if (el) {
+    el.textContent = "";
+  }
+};
+var useClipboard = (options = defaultOptions) => {
+  const el = use_portal_default("clipboard");
+  const latestOnError = use_latest_default(options.onError);
+  const copy = useCallback(
+    (text) => {
+      copyText(el, text, latestOnError.current);
+    },
+    [el, latestOnError]
+  );
+  return { copy };
+};
+var use_clipboard_default = useClipboard;
+
+// core/use-clipboard/index.ts
+var use_clipboard_default2 = use_clipboard_default;
+
+export {
+  use_clipboard_default2 as use_clipboard_default
+};

package/esm/chunk-CNY7HPMQ.js

@@ -0,0 +1,191 @@
+import {
+  Link_default
+} from "./chunk-3XTTDT42.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Image/Image.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React2, { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+
+// core/Image/ImageSkeleton.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var ImageSkeleton = React.memo(({
+  opacity = 0.5,
+  ...props
+}) => {
+  const theme = use_theme_default();
+  return /* @__PURE__ */ jsx("div", { ...props, className: _JSXStyle.dynamic([["2946022605", [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton"), children: /* @__PURE__ */ jsx(_JSXStyle, { id: "2946022605", dynamic: [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity], children: `.skeleton.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient( 270deg, ${theme.palette.accents_1}, ${theme.palette.accents_2}, ${theme.palette.accents_2}, ${theme.palette.accents_1} );background-size:400% 100%;-webkit-animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;opacity:${opacity};-webkit-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out;}@-webkit-keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}@keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}` }) });
+});
+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 {
+    return url;
+  }
+};
+
+// core/Image/Image.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ImageComponent = React2.forwardRef(({
+  src,
+  disableSkeleton = false,
+  className = "",
+  maxDelay = 3e3,
+  ...props
+}, ref) => {
+  const {
+    SCALES,
+    getScaleProps
+  } = use_scale_default();
+  const width = getScaleProps(["width", "w"]);
+  const height = getScaleProps(["height", "h"]);
+  const showAnimation = !disableSkeleton && width && height;
+  const theme = use_theme_default();
+  const [loading, setLoading] = useState(true);
+  const [showSkeleton, setShowSkeleton] = useState(true);
+  const imageRef = useRef(null);
+  useImperativeHandle(ref, () => imageRef.current);
+  const url = useMemo(() => transformDataSource(src), [src]);
+  const imageLoaded = () => {
+    if (!showAnimation) return;
+    setLoading(false);
+  };
+  useEffect(() => {
+    if (!showAnimation) return;
+    if (!imageRef.current) return;
+    if (imageRef.current.complete) {
+      setLoading(false);
+      setShowSkeleton(false);
+    }
+  }, [showAnimation]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (showAnimation) {
+        setShowSkeleton(false);
+      }
+      clearTimeout(timer);
+    }, maxDelay);
+    return () => clearTimeout(timer);
+  }, [loading, maxDelay, showAnimation]);
+  return /* @__PURE__ */ jsxs("div", { className: _JSXStyle2.dynamic([["3930247108", [theme.layout.radius, SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, "auto"), SCALES.height(1, "auto")]]]) + " " + (use_classes_default("image", className) || ""), children: [
+    showSkeleton && showAnimation && /* @__PURE__ */ jsx2(ImageSkeleton_default, { opacity: loading ? 1 : 0 }),
+    /* @__PURE__ */ jsx2("img", { ref: imageRef, onLoad: imageLoaded, src: url, ...props, className: _JSXStyle2.dynamic([["3930247108", [theme.layout.radius, SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, "auto"), SCALES.height(1, "auto")]]]) + " " + (props && props.className != null && props.className || "") }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "3930247108", dynamic: [theme.layout.radius, SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, "auto"), SCALES.height(1, "auto")], children: `.image.__jsx-style-dynamic-selector{position:relative;border-radius:${theme.layout.radius};overflow:hidden;max-width:100%;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)};}img.__jsx-style-dynamic-selector{width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};object-fit:scale-down;display:inline-block;}` })
+  ] });
+});
+ImageComponent.displayName = "BolioUIImage";
+var Image = with_scale_default(ImageComponent);
+var Image_default = Image;
+
+// core/Image/ImageBrowser.tsx
+import _JSXStyle4 from "styled-jsx/style";
+import React4, { useMemo as useMemo2 } from "react";
+
+// core/Image/ImageBrowserHttpsIcon.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React3 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ImageBrowserHttpsIcon = () => {
+  return /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "jsx-4165143638", children: [
+    /* @__PURE__ */ jsx3("path", { d: "M5 10.2H19V21H5V10.2Z", className: "jsx-4165143638" }),
+    /* @__PURE__ */ jsx3("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", className: "jsx-4165143638" }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "4165143638", children: "svg.jsx-4165143638{width:1em;height:1em;}" })
+  ] });
+};
+var MemoImageBrowserHttpsIcon = React3.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
+  };
+};
+
+// core/Image/ImageBrowser.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var getTitle = (title, colors) => /* @__PURE__ */ jsxs3("div", { className: _JSXStyle4.dynamic([["524099755", [colors.titleColor]]]) + " title", children: [
+  title,
+  /* @__PURE__ */ jsx4(_JSXStyle4, { id: "524099755", dynamic: [colors.titleColor], children: `.title.__jsx-style-dynamic-selector{color:${colors.titleColor};font-size:0.75em;}` })
+] });
+var getAddressInput = (url, showFullLink, colors, anchorProps) => /* @__PURE__ */ jsxs3("div", { className: _JSXStyle4.dynamic([["3718009574", [colors.inputBgColor]]]) + " address-input", children: [
+  /* @__PURE__ */ jsx4("span", { className: _JSXStyle4.dynamic([["3718009574", [colors.inputBgColor]]]) + " https", children: /* @__PURE__ */ jsx4(ImageBrowserHttpsIcon_default, {}) }),
+  /* @__PURE__ */ jsx4(Link_default, { href: url, title: url, target: "_blank", ...anchorProps, children: showFullLink ? url : getHostFromUrl(url) }),
+  /* @__PURE__ */ jsx4(_JSXStyle4, { id: "3718009574", dynamic: [colors.inputBgColor], children: `.address-input.__jsx-style-dynamic-selector{height:1.75em;max-width:60%;min-width:40%;background-color:${colors.inputBgColor};color:inherit;border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0 10px;overflow:hidden;position:relative;}.address-input.__jsx-style-dynamic-selector *{font-size:0.75em;color:inherit;}.address-input.__jsx-style-dynamic-selector a{max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;color:inherit;}.https.__jsx-style-dynamic-selector{width:0.75em;height:0.75em;font-size:1em;margin-right:0.31em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}` })
+] });
+var ImageBrowserComponent = React4.forwardRef(({
+  url,
+  title,
+  children,
+  showFullLink = false,
+  invert = false,
+  anchorProps = {},
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const colors = useMemo2(() => getBrowserColors(invert, theme.palette), [invert, theme.palette]);
+  const input = useMemo2(() => {
+    if (url) return getAddressInput(url, showFullLink, colors, anchorProps);
+    if (title) return getTitle(title, colors);
+    return null;
+  }, [url, showFullLink, title, colors, anchorProps]);
+  return /* @__PURE__ */ jsxs3("div", { ref, ...props, className: _JSXStyle4.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || use_classes_default("browser", className) || ""), children: [
+    /* @__PURE__ */ jsxs3("header", { className: _JSXStyle4.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]), children: [
+      /* @__PURE__ */ jsxs3("div", { className: _JSXStyle4.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " traffic", children: [
+        /* @__PURE__ */ jsx4("span", { className: _JSXStyle4.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " close" }),
+        /* @__PURE__ */ jsx4("span", { className: _JSXStyle4.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " mini" }),
+        /* @__PURE__ */ jsx4("span", { className: _JSXStyle4.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " full" })
+      ] }),
+      input
+    ] }),
+    children,
+    /* @__PURE__ */ jsx4(_JSXStyle4, { id: "2129234839", dynamic: [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, "max-content"), SCALES.height(1, "auto"), SCALES.mt(0), SCALES.mr(0, "auto"), SCALES.mb(0), SCALES.ml(0, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf], children: `.browser.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:${theme.expressiveness.shadowLarge};max-width:100%;border-radius:${theme.layout.radius};overflow:hidden;font-size:${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)};}.browser.__jsx-style-dynamic-selector .image{border-top-left-radius:0;border-top-right-radius:0;}header.__jsx-style-dynamic-selector{height:2.5em;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;color:${colors.color};background-color:${colors.barBgColor};border-bottom:1px solid ${colors.borderColor};}.traffic.__jsx-style-dynamic-selector{width:auto;position:absolute;left:${theme.layout.gapHalf};top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);bottom:0;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:inherit;}.traffic.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{border-radius:50%;width:0.75em;height:0.75em;max-width:20px;max-height:20px;display:inline-block;margin-right:0.5em;}.close.__jsx-style-dynamic-selector{background-color:#ff5f56;}.mini.__jsx-style-dynamic-selector{background-color:#ffbd2e;}.full.__jsx-style-dynamic-selector{background-color:#27c93f;}` })
+  ] });
+});
+ImageBrowserComponent.displayName = "BolioUIImageBrowser";
+var ImageBrowser = with_scale_default(ImageBrowserComponent);
+var ImageBrowser_default = ImageBrowser;
+
+// core/Image/index.ts
+Image_default.Browser = ImageBrowser_default;
+var Image_default2 = Image_default;
+
+export {
+  Image_default2 as Image_default
+};