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

package/esm/chunk-REWKR7S3.js

@@ -0,0 +1,109 @@
+import {
+  Image_default
+} from "./chunk-TWIOSRRP.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ImageZoom/ImageZoom.tsx
+import React, { useEffect, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ImageZoom/ImageZoom.module.css.bolio-css-module-source
+var ImageZoom_module_css_default = { "trigger": "ImageZoom-module_trigger__-42Bz", "dialog": "ImageZoom-module_dialog__TjA9E", "figure": "ImageZoom-module_figure__YIBq1", "zoomed": "ImageZoom-module_zoomed__7gfCP", "caption": "ImageZoom-module_caption__6SFRA", "close": "ImageZoom-module_close__iEiwJ" };
+
+// core/ImageZoom/ImageZoom.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ImageZoom = React.forwardRef(
+  ({
+    src,
+    alt,
+    zoomSrc,
+    caption,
+    closeLabel = "Close",
+    className = "",
+    ...imageProps
+  }, ref) => {
+    const [open, setOpen] = useState(false);
+    const dialog = useRef(null);
+    useEffect(() => {
+      var _a;
+      if (open) (_a = dialog.current) == null ? void 0 : _a.showModal();
+    }, [open]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: use_classes_default(ImageZoom_module_css_default.trigger, className),
+          "aria-haspopup": "dialog",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ jsx(Image_default, { src, alt, ...imageProps })
+        }
+      ),
+      open && /* @__PURE__ */ jsxs(
+        "dialog",
+        {
+          ref: dialog,
+          "aria-label": alt,
+          className: ImageZoom_module_css_default.dialog,
+          onClose: () => setOpen(false),
+          onKeyDown: (event) => {
+            var _a;
+            if (event.key === "Escape") (_a = dialog.current) == null ? void 0 : _a.close();
+          },
+          onClick: (event) => {
+            var _a;
+            if (event.target === event.currentTarget) (_a = dialog.current) == null ? void 0 : _a.close();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("figure", { className: ImageZoom_module_css_default.figure, children: [
+              /* @__PURE__ */ jsx("img", { src: zoomSrc || src, alt, className: ImageZoom_module_css_default.zoomed }),
+              caption && /* @__PURE__ */ jsx("figcaption", { className: ImageZoom_module_css_default.caption, children: caption })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: ImageZoom_module_css_default.close,
+                "aria-label": closeLabel,
+                onClick: () => {
+                  var _a;
+                  return (_a = dialog.current) == null ? void 0 : _a.close();
+                },
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.5em",
+                    height: "1.5em",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M6 6l12 12M18 6L6 18",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImageZoom.displayName = "BolioUIImageZoom";
+var ImageZoom_default = ImageZoom;
+
+// core/ImageZoom/index.ts
+var ImageZoom_default2 = ImageZoom_default;
+
+export {
+  ImageZoom_default2 as ImageZoom_default
+};

package/esm/chunk-STYC6O24.js

@@ -0,0 +1,232 @@
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_portal_default
+} from "./chunk-BXDUHMWS.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  Button_default
+} from "./chunk-DXHNQANX.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses
+} from "./chunk-5KUROAEP.js";
+
+// core/Tour/Tour.tsx
+import React, { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tour/Tour.module.css.bolio-css-module-source
+var Tour_module_css_default = { "tour": "Tour-module_tour__FLAxG", "spotlight": "Tour-module_spotlight__o7ukV", "dim": "Tour-module_dim__ZPmGZ", "card": "Tour-module_card__p9LCI", "centered": "Tour-module_centered__KJvbZ", "count": "Tour-module_count__2K7-G", "title": "Tour-module_title__Z-spV", "content": "Tour-module_content__qLvnb", "actions": "Tour-module_actions__HKbHi", "spacer": "Tour-module_spacer__dkdPy" };
+
+// core/Tour/Tour.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CARD_WIDTH = 320;
+var MARGIN = 8;
+var GAP = 8;
+var ROOM_BELOW = 240;
+var resolve = (target) => !target ? null : typeof target === "string" ? document.querySelector(target) : typeof target === "function" ? target() : target;
+var Tour = React.forwardRef(
+  ({
+    steps,
+    open,
+    onClose,
+    current: customCurrent,
+    initialCurrent = 0,
+    onCurrentChange,
+    onFinish,
+    previousLabel = "Back",
+    nextLabel = "Next",
+    finishLabel = "Done",
+    skipLabel = "Skip",
+    stepLabel = (index, count) => `${index + 1} of ${count}`,
+    spotlightPadding = 6,
+    className = "",
+    style,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const portal = use_portal_default("tour");
+    const id = useId();
+    const [selfCurrent, setSelfCurrent] = useState(initialCurrent);
+    const current = Math.max(
+      0,
+      Math.min(customCurrent != null ? customCurrent : selfCurrent, steps.length - 1)
+    );
+    const step = steps[current];
+    const last = current === steps.length - 1;
+    const [rect, setRect] = useState(null);
+    const card = useRef(null);
+    const previous = useRef(null);
+    const latestSteps = use_latest_default(steps);
+    useEffect(() => {
+      var _a, _b;
+      const target = (_a = latestSteps.current[current]) == null ? void 0 : _a.target;
+      if (!open) return;
+      const element = resolve(target);
+      if (!element) {
+        if (target) log_warning_default("The target of the step was not found.", "Tour");
+        setRect(null);
+        return;
+      }
+      (_b = element.scrollIntoView) == null ? void 0 : _b.call(element, { block: "center", inline: "nearest" });
+      const update = () => setRect(element.getBoundingClientRect());
+      update();
+      window.addEventListener("resize", update);
+      window.addEventListener("scroll", update, true);
+      return () => {
+        window.removeEventListener("resize", update);
+        window.removeEventListener("scroll", update, true);
+      };
+    }, [open, current, latestSteps]);
+    useEffect(() => {
+      if (!open) return;
+      previous.current = document.activeElement;
+      return () => {
+        var _a, _b;
+        return (_b = (_a = previous.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      };
+    }, [open]);
+    useEffect(() => {
+      var _a;
+      if (open && portal) (_a = card.current) == null ? void 0 : _a.focus({ preventScroll: true });
+    }, [open, current, portal]);
+    if (!open || !step || !portal) return null;
+    const go = (next) => {
+      if (customCurrent === void 0) setSelfCurrent(next);
+      if (onCurrentChange) onCurrentChange(next);
+    };
+    const finish = () => {
+      if (onFinish) onFinish();
+      onClose();
+    };
+    const keyDownHandler = (event) => {
+      var _a, _b;
+      if (onKeyDown) onKeyDown(event);
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        return onClose();
+      }
+      if (event.key !== "Tab") return;
+      const buttons = Array.from(
+        (_b = (_a = card.current) == null ? void 0 : _a.querySelectorAll("button")) != null ? _b : []
+      );
+      const [first, end] = [buttons[0], buttons[buttons.length - 1]];
+      const onCard = document.activeElement === card.current;
+      if (!first) return;
+      if (event.shiftKey && (onCard || document.activeElement === first)) {
+        event.preventDefault();
+        end.focus();
+      } else if (!event.shiftKey && (onCard || document.activeElement === end)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const width = Math.min(CARD_WIDTH, window.innerWidth - 2 * MARGIN);
+    const room = rect ? window.innerHeight - rect.bottom : 0;
+    const above = Boolean(rect && room < ROOM_BELOW && rect.top > room);
+    const cardStyle = rect ? {
+      width,
+      left: Math.max(
+        MARGIN,
+        Math.min(rect.left, window.innerWidth - width - MARGIN)
+      ),
+      ...above ? { bottom: window.innerHeight - rect.top + spotlightPadding + GAP } : { top: rect.bottom + spotlightPadding + GAP }
+    } : { width };
+    const dark = theme.type === "dark";
+    const tourStyle = {
+      "--tour-color": theme.palette.foreground,
+      "--tour-muted": theme.palette.accents_5,
+      "--tour-radius": theme.layout.radius,
+      "--tour-bg": dark ? theme.palette.accents_3 : theme.palette.background,
+      "--tour-shadow": theme.expressiveness.shadowMedium,
+      "--tour-dim": dark ? "rgb(0 0 0 / 60%)" : "rgb(0 0 0 / 55%)",
+      ...style
+    };
+    return createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: joinClasses(Tour_module_css_default.tour, className),
+          ...props,
+          style: tourStyle,
+          onKeyDown: keyDownHandler,
+          children: [
+            rect ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: Tour_module_css_default.spotlight,
+                style: {
+                  left: rect.left - spotlightPadding,
+                  top: rect.top - spotlightPadding,
+                  width: rect.width + 2 * spotlightPadding,
+                  height: rect.height + 2 * spotlightPadding
+                }
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: Tour_module_css_default.dim }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: card,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": `${id}-title`,
+                "aria-describedby": `${id}-content`,
+                tabIndex: -1,
+                className: joinClasses(Tour_module_css_default.card, { [Tour_module_css_default.centered]: !rect }),
+                style: cardStyle,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: Tour_module_css_default.count, children: stepLabel(current, steps.length) }),
+                  /* @__PURE__ */ jsx("div", { id: `${id}-title`, className: Tour_module_css_default.title, children: step.title }),
+                  /* @__PURE__ */ jsx("div", { id: `${id}-content`, className: Tour_module_css_default.content, children: step.content }),
+                  /* @__PURE__ */ jsxs("div", { className: Tour_module_css_default.actions, children: [
+                    !last && /* @__PURE__ */ jsx(Button_default, { auto: true, scale: 0.75, effect: false, onClick: onClose, children: skipLabel }),
+                    /* @__PURE__ */ jsx("span", { className: Tour_module_css_default.spacer }),
+                    current > 0 && /* @__PURE__ */ jsx(
+                      Button_default,
+                      {
+                        auto: true,
+                        scale: 0.75,
+                        effect: false,
+                        onClick: () => go(current - 1),
+                        children: previousLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button_default,
+                      {
+                        auto: true,
+                        scale: 0.75,
+                        type: "primary",
+                        effect: false,
+                        onClick: last ? finish : () => go(current + 1),
+                        children: last ? finishLabel : nextLabel
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      portal
+    );
+  }
+);
+Tour.displayName = "BolioUITour";
+var Tour_default = Tour;
+
+// core/Tour/index.ts
+var Tour_default2 = Tour_default;
+
+export {
+  Tour_default2 as Tour_default
+};

package/esm/{chunk-TDJGMSGT.js → chunk-WIIDIZYK.js}

@@ -26,6 +26,9 @@ var CssBaseline = ({
           font-size: 16px;
           --bolioui-icons-background: ${theme.palette.background};
           box-sizing: border-box;
+          /* the native parts of the page follow the theme: the clock of a time
+             field, the scrollbars and the pickers of the browser */
+          color-scheme: ${theme.type};
         }
 
         body {
@@ -53,7 +56,6 @@ var CssBaseline = ({
         *:before,
         *:after {
           box-sizing: inherit;
-          text-rendering: geometricPrecision;
           -webkit-tap-highlight-color: transparent;
         }