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

package/esm/chunk-SJVWKNGY.js

@@ -0,0 +1,236 @@
+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-TPZUTHTQ.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.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 surface = getSurface(theme);
+    const tourStyle = {
+      "--tour-color": theme.palette.foreground,
+      "--tour-muted": theme.palette.accents_5,
+      "--tour-radius": theme.layout.radius,
+      "--tour-bg": surface.bg,
+      "--tour-shadow": surface.shadow,
+      "--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-P245HSVB.js → chunk-TLVSZCKU.js}

@@ -273,7 +273,8 @@ var CalendarComponent = React.forwardRef(
       "--calendar-margin-left": SCALES.ml(0),
       "--calendar-weekday-color": theme.palette.accents_5,
       "--calendar-radius": theme.layout.radius,
-      "--calendar-hover-bg": theme.palette.accents_2,
+      // a popup around the calendar (DatePicker) sets its own, lighter hover
+      "--calendar-hover-bg": `var(--calendar-popup-hover, ${theme.palette.accents_2})`,
       "--calendar-focus-outline": theme.palette.primary,
       "--calendar-disabled-color": theme.palette.accents_3,
       "--calendar-today-border": theme.palette.accents_4,

package/esm/{chunk-AG2NWQYL.js → chunk-WCTANCLG.js}

@@ -83,7 +83,9 @@ var Dropdown = React.memo(
         width: nativeWidth,
         elementTop
       } = getRefRect(parent, getPopupContainer);
-      setRect({ top, left, right, width: nativeWidth, elementTop });
+      setRect(
+        (prev) => prev.top === top && prev.left === left && prev.right === right && prev.width === nativeWidth && prev.elementTop === elementTop ? prev : { top, left, right, width: nativeWidth, elementTop }
+      );
     };
     use_resize_default(updateRect);
     use_click_anywhere_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;
         }
 

package/esm/{chunk-DIMJQLWY.js → chunk-XUNC7RB7.js}

@@ -1,18 +1,21 @@
 import {
   Grid_default
 } from "./chunk-JFNYQSEZ.js";
-import {
-  dropdown_default
-} from "./chunk-AG2NWQYL.js";
 import {
   getColors
 } from "./chunk-KBZEYKCZ.js";
+import {
+  dropdown_default
+} from "./chunk-WCTANCLG.js";
 import {
   log_warning_default
 } from "./chunk-AXYDJGTN.js";
 import {
   use_current_state_default
 } from "./chunk-33BUV2RX.js";
+import {
+  getSurface
+} from "./chunk-EUYSKHRS.js";
 import {
   use_scale_default,
   with_scale_default
@@ -93,6 +96,7 @@ var SelectDropdown = React3.forwardRef(
     getPopupContainer
   }, dropdownRef) => {
     const theme = use_theme_default();
+    const surface = getSurface(theme);
     const internalDropdownRef = useRef(null);
     const { ref } = useSelectContext();
     const classes = use_classes_default(SelectDropdown_module_css_default.selectDropdown, className);
@@ -114,8 +118,8 @@ var SelectDropdown = React3.forwardRef(
             className: classes,
             style: {
               "--select-dropdown-radius": theme.layout.radius,
-              "--select-dropdown-shadow": theme.expressiveness.shadowMedium,
-              "--select-dropdown-bg": colors.bgColor,
+              "--select-dropdown-shadow": surface.shadow,
+              "--select-dropdown-bg": colors.bgColor === theme.palette.background ? surface.bg : colors.bgColor,
               "--select-dropdown-border": colors.borderColor,
               "--select-dropdown-color": colors.color,
               ...dropdownStyle

package/esm/{chunk-GGCVPMXO.js → chunk-Y432C24Z.js}

@@ -1,6 +1,6 @@
 import {
   Tooltip_default
-} from "./chunk-XF4TPE2W.js";
+} from "./chunk-IL7L3BEL.js";
 import {
   use_latest_default
 } from "./chunk-ZRORQ2WH.js";