@bolio-ui/core 3.0.5 → 3.1.0

package/esm/chunk-4RW5CUTD.js

@@ -0,0 +1,44 @@
+// core/use-mask/use-mask.ts
+import { useCallback, useState } from "react";
+var TOKENS = {
+  "#": /\d/,
+  A: /[a-zA-Z]/,
+  "*": /[a-zA-Z0-9]/
+};
+var applyMask = (value, mask) => {
+  let result = "";
+  let index = 0;
+  for (const token of mask) {
+    if (index >= value.length) break;
+    const pattern = TOKENS[token];
+    if (!pattern) {
+      result += token;
+      if (value[index] === token) index += 1;
+      continue;
+    }
+    while (index < value.length && !pattern.test(value[index])) index += 1;
+    if (index < value.length) result += value[index++];
+  }
+  return result;
+};
+var useMask = ({
+  mask,
+  initialValue = ""
+}) => {
+  const [value, setValue] = useState(() => applyMask(initialValue, mask));
+  const onChange = useCallback(
+    (next) => setValue(
+      applyMask(typeof next === "string" ? next : next.target.value, mask)
+    ),
+    [mask]
+  );
+  return [value, onChange];
+};
+var use_mask_default = useMask;
+
+// core/use-mask/index.ts
+var use_mask_default2 = use_mask_default;
+
+export {
+  use_mask_default2 as use_mask_default
+};

package/esm/{chunk-I6WWABJN.js → chunk-4XE2LV36.js}

@@ -1,6 +1,6 @@
 import {
   use_current_state_default
-} from "./chunk-33BUV2RX.js";
+} from "./chunk-E4LPRAZ6.js";
 
 // core/use-tabs/use-tabs.ts
 var useTabs = (initialValue) => {

package/esm/chunk-5A6ERXDB.js

@@ -0,0 +1,28 @@
+// core/use-window-scroll/use-window-scroll.ts
+import { useCallback, useEffect, useState } from "react";
+var useWindowScroll = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    const update = () => setPosition({ x: window.scrollX, y: window.scrollY });
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+  const scrollTo = useCallback(
+    ({ x, y }) => window.scrollTo({ left: x != null ? x : window.scrollX, top: y != null ? y : window.scrollY }),
+    []
+  );
+  return [position, scrollTo];
+};
+var use_window_scroll_default = useWindowScroll;
+
+// core/use-window-scroll/index.ts
+var use_window_scroll_default2 = use_window_scroll_default;
+
+export {
+  use_window_scroll_default2 as use_window_scroll_default
+};

package/esm/chunk-5D77MCIX.js

@@ -0,0 +1,20 @@
+// core/use-text-selection/use-text-selection.ts
+import { useEffect, useState } from "react";
+var useTextSelection = () => {
+  const [selection, setSelection] = useState(null);
+  useEffect(() => {
+    const update = () => setSelection(document.getSelection());
+    update();
+    document.addEventListener("selectionchange", update);
+    return () => document.removeEventListener("selectionchange", update);
+  }, []);
+  return selection;
+};
+var use_text_selection_default = useTextSelection;
+
+// core/use-text-selection/index.ts
+var use_text_selection_default2 = use_text_selection_default;
+
+export {
+  use_text_selection_default2 as use_text_selection_default
+};

package/esm/chunk-5F7SJI6T.js

@@ -0,0 +1,37 @@
+// core/use-intersection/use-intersection.ts
+import { useCallback, useRef, useState } from "react";
+var useIntersection = (options) => {
+  var _a;
+  const [entry, setEntry] = useState(null);
+  const observer = useRef(null);
+  const root = options == null ? void 0 : options.root;
+  const rootMargin = options == null ? void 0 : options.rootMargin;
+  const threshold = String((_a = options == null ? void 0 : options.threshold) != null ? _a : "");
+  const ref = useCallback(
+    (element) => {
+      var _a2;
+      (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
+      observer.current = null;
+      if (!element || typeof IntersectionObserver === "undefined") {
+        setEntry(null);
+        return;
+      }
+      observer.current = new IntersectionObserver(([next]) => setEntry(next), {
+        root,
+        rootMargin,
+        threshold: threshold ? threshold.split(",").map(Number) : void 0
+      });
+      observer.current.observe(element);
+    },
+    [root, rootMargin, threshold]
+  );
+  return { ref, entry };
+};
+var use_intersection_default = useIntersection;
+
+// core/use-intersection/index.ts
+var use_intersection_default2 = use_intersection_default;
+
+export {
+  use_intersection_default2 as use_intersection_default
+};

package/esm/chunk-5L34MDJF.js

@@ -0,0 +1,35 @@
+// core/use-resize-observer/use-resize-observer.ts
+import { useEffect, useRef, useState } from "react";
+var defaultRect = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+var useResizeObserver = (options) => {
+  const ref = useRef(null);
+  const [rect, setRect] = useState(defaultRect);
+  const box = options == null ? void 0 : options.box;
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setRect(entry.contentRect);
+    });
+    observer.observe(node, { box });
+    return () => observer.disconnect();
+  }, [box]);
+  return [ref, rect];
+};
+var use_resize_observer_default = useResizeObserver;
+
+// core/use-resize-observer/index.ts
+var use_resize_observer_default2 = use_resize_observer_default;
+
+export {
+  use_resize_observer_default2 as use_resize_observer_default
+};

package/esm/chunk-5OVRVGYQ.js

@@ -0,0 +1,49 @@
+// core/use-scroller/use-scroller.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var useScroller = (step = 200) => {
+  const ref = useRef(null);
+  const [state, setState] = useState({ start: false, end: false });
+  const update = useCallback(() => {
+    const node = ref.current;
+    if (!node) return;
+    setState({
+      start: node.scrollLeft > 0,
+      end: node.scrollLeft + node.clientWidth < node.scrollWidth - 1
+    });
+  }, []);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    update();
+    node.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      node.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [update]);
+  const scrollBy = useCallback(
+    (direction) => {
+      var _a;
+      return (_a = ref.current) == null ? void 0 : _a.scrollBy({
+        left: direction === "end" ? step : -step,
+        behavior: "smooth"
+      });
+    },
+    [step]
+  );
+  return {
+    ref,
+    canScrollStart: state.start,
+    canScrollEnd: state.end,
+    scrollBy
+  };
+};
+var use_scroller_default = useScroller;
+
+// core/use-scroller/index.ts
+var use_scroller_default2 = use_scroller_default;
+
+export {
+  use_scroller_default2 as use_scroller_default
+};

package/esm/{chunk-JAVXTBV2.js → chunk-5UZAJQHW.js}

@@ -1,9 +1,9 @@
+import {
+  getColors
+} from "./chunk-CCKWTHUT.js";
 import {
   InputBlockLabel_default
 } from "./chunk-UOGCO6CV.js";
-import {
-  getColors
-} from "./chunk-KBZEYKCZ.js";
 import {
   use_scale_default,
   with_scale_default
@@ -66,7 +66,7 @@ var NumberInputComponent = React.forwardRef(
     const inputId = props.id || generatedId;
     const errorId = `${inputId}-error`;
     const describedBy = [props["aria-describedby"], error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
-    const colors = getColors(theme.palette, type, disabled, {
+    const colors = getColors(theme.palette, error ? "error" : type, disabled, {
       filled,
       light,
       ghost,

package/esm/{chunk-VTLQ3YLX.js → chunk-5ZFJSGCA.js}

@@ -7,10 +7,11 @@ import {
   useModalContext,
   use_body_scroll_default,
   use_dialog_focus_default
-} from "./chunk-TWT6F7A7.js";
+} from "./chunk-DBUEPZWM.js";
 import {
+  KeyCode,
   use_keyboard_default
-} from "./chunk-F3AL4TQZ.js";
+} from "./chunk-WXUMV5TD.js";
 import {
   css_transition_default
 } from "./chunk-LDTDMDE6.js";
@@ -19,7 +20,7 @@ import {
 } from "./chunk-S5PYSYVR.js";
 import {
   Button_default
-} from "./chunk-TPZUTHTQ.js";
+} from "./chunk-Q2K4VARR.js";
 import {
   getSurface
 } from "./chunk-EUYSKHRS.js";
@@ -39,13 +40,7 @@ import {
 } from "./chunk-5KUROAEP.js";
 
 // core/Modal/Modal.tsx
-import React4, {
-  useCallback,
-  useEffect as useEffect2,
-  useId,
-  useMemo as useMemo2,
-  useState as useState2
-} from "react";
+import React4, { useCallback, useEffect as useEffect2, useId, useMemo as useMemo2, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 
 // core/Modal/ModalWrapper.tsx
@@ -292,7 +287,7 @@ var ModalComponent = React4.forwardRef(
       () => {
         if (keyboard) closeModal();
       },
-      27 /* Escape */,
+      KeyCode.Escape,
       {
         disableGlobalEvent: true
       }

package/esm/{chunk-T74YHCG6.js → chunk-6DGPQS6M.js}

@@ -1,3 +1,6 @@
+import {
+  InputBlockLabel_default
+} from "./chunk-UOGCO6CV.js";
 import {
   use_scale_default,
   with_scale_default
@@ -10,7 +13,7 @@ import {
 } from "./chunk-5KUROAEP.js";
 
 // core/Toggle/Toggle.tsx
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useId, useMemo, useState } from "react";
 
 // core/Toggle/styles.ts
 var getColors = (palette, status) => {
@@ -45,7 +48,7 @@ var getColors = (palette, status) => {
 var Toggle_module_css_default = { "label": "Toggle-module_label__M08Fl", "input": "Toggle-module_input__Odswo", "toggle": "Toggle-module_toggle__-4tZB", "inner": "Toggle-module_inner__aQgyY", "disabled": "Toggle-module_disabled__klv4j", "checked": "Toggle-module_checked__53mGq" };
 
 // core/Toggle/Toggle.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ToggleComponent = React.forwardRef(
   ({
     initialChecked = false,
@@ -53,16 +56,21 @@ var ToggleComponent = React.forwardRef(
     disabled = false,
     onChange,
     type = "default",
+    error = false,
+    errorMessage,
     icon,
     checkedIcon,
     className = "",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     style,
     ...props
   }, ref) => {
     const theme = use_theme_default();
     const { SCALES } = use_scale_default();
+    const errorId = `${useId()}-error`;
+    const describedBy = [ariaDescribedby, error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
     const [selfChecked, setSelfChecked] = useState(initialChecked);
     const classes = use_classes_default(Toggle_module_css_default.toggle, {
       [Toggle_module_css_default.checked]: selfChecked,
@@ -85,8 +93,8 @@ var ToggleComponent = React.forwardRef(
       [disabled, selfChecked, onChange]
     );
     const { bg } = useMemo(
-      () => getColors(theme.palette, type),
-      [theme.palette, type]
+      () => getColors(theme.palette, error ? "error" : type),
+      [theme.palette, type, error]
     );
     useEffect(() => {
       if (checked === void 0) return;
@@ -112,31 +120,36 @@ var ToggleComponent = React.forwardRef(
       "--toggle-icon-color": theme.palette.accents_6,
       ...style
     };
-    return /* @__PURE__ */ jsxs(
-      "label",
-      {
-        className: `${Toggle_module_css_default.label} ${className}`.trim(),
-        ...props,
-        style: labelStyle,
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type: "checkbox",
-              role: "switch",
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledby,
-              disabled,
-              checked: selfChecked,
-              onChange: changeHandle,
-              className: Toggle_module_css_default.input
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx("span", { className: Toggle_module_css_default.inner, children: selfChecked ? checkedIcon != null ? checkedIcon : icon : icon }) })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: `${Toggle_module_css_default.label} ${className}`.trim(),
+          ...props,
+          style: labelStyle,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                role: "switch",
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "aria-invalid": error || void 0,
+                "aria-describedby": describedBy,
+                disabled,
+                checked: selfChecked,
+                onChange: changeHandle,
+                className: Toggle_module_css_default.input
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx("span", { className: Toggle_module_css_default.inner, children: selfChecked ? checkedIcon != null ? checkedIcon : icon : icon }) })
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx(InputBlockLabel_default, { error, id: errorId, children: errorMessage })
+    ] });
   }
 );
 ToggleComponent.displayName = "BolioUIToggle";

package/esm/chunk-6NIVATHA.js

@@ -0,0 +1,46 @@
+// core/use-scroll-spy/use-scroll-spy.ts
+import { useCallback, useEffect, useState } from "react";
+var useScrollSpy = ({
+  selector = "h1, h2, h3, h4, h5, h6",
+  offset = 0
+} = {}) => {
+  const [data, setData] = useState([]);
+  const [active, setActive] = useState(-1);
+  const reinitialize = useCallback(() => {
+    setData(
+      Array.from(document.querySelectorAll(selector)).map(
+        (element) => {
+          var _a;
+          return {
+            id: element.id,
+            label: (_a = element.textContent) != null ? _a : "",
+            depth: Number(element.tagName.slice(1)) || 1,
+            element
+          };
+        }
+      )
+    );
+  }, [selector]);
+  useEffect(reinitialize, [reinitialize]);
+  useEffect(() => {
+    const update = () => {
+      let current = -1;
+      data.forEach(({ element }, index) => {
+        if (element.getBoundingClientRect().top - offset <= 0) current = index;
+      });
+      setActive(current);
+    };
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, [data, offset]);
+  return { active, data, reinitialize };
+};
+var use_scroll_spy_default = useScrollSpy;
+
+// core/use-scroll-spy/index.ts
+var use_scroll_spy_default2 = use_scroll_spy_default;
+
+export {
+  use_scroll_spy_default2 as use_scroll_spy_default
+};

package/esm/chunk-7FDVIBQ3.js

@@ -0,0 +1,15 @@
+// core/use-document-title/use-document-title.ts
+import { useEffect } from "react";
+var useDocumentTitle = (title) => {
+  useEffect(() => {
+    if (title.trim().length > 0) document.title = title.trim();
+  }, [title]);
+};
+var use_document_title_default = useDocumentTitle;
+
+// core/use-document-title/index.ts
+var use_document_title_default2 = use_document_title_default;
+
+export {
+  use_document_title_default2 as use_document_title_default
+};

package/esm/{chunk-ZGGVVMSG.js → chunk-7G6BCLC6.js}

@@ -6,10 +6,11 @@ import {
   backdrop_default,
   use_body_scroll_default,
   use_dialog_focus_default
-} from "./chunk-TWT6F7A7.js";
+} from "./chunk-DBUEPZWM.js";
 import {
+  KeyCode,
   use_keyboard_default
-} from "./chunk-F3AL4TQZ.js";
+} from "./chunk-WXUMV5TD.js";
 import {
   css_transition_default
 } from "./chunk-LDTDMDE6.js";
@@ -199,7 +200,7 @@ var DrawerComponent = React2.forwardRef(
       () => {
         if (keyboard) closeDrawer();
       },
-      27 /* Escape */,
+      KeyCode.Escape,
       {
         disableGlobalEvent: true
       }

package/esm/chunk-7U52BGWH.js

@@ -0,0 +1,88 @@
+import {
+  use_resize_observer_default
+} from "./chunk-5L34MDJF.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Spoiler/Spoiler.tsx
+import React, { useId, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Spoiler/Spoiler.module.css.bolio-css-module-source
+var Spoiler_module_css_default = { "spoiler": "Spoiler-module_spoiler__aAOK0", "content": "Spoiler-module_content__D69z0", "toggle": "Spoiler-module_toggle__kCTmC" };
+
+// core/Spoiler/Spoiler.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SpoilerComponent = React.forwardRef(
+  ({
+    maxHeight = 100,
+    showLabel = "Show more",
+    hideLabel = "Hide",
+    initialOpened = false,
+    className = "",
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [opened, setOpened] = useState(initialOpened);
+    const [innerRef, { height }] = use_resize_observer_default();
+    const contentId = useId();
+    const showToggle = opened || height > maxHeight;
+    const spoilerStyle = {
+      width: SCALES.width(1, "100%"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--spoiler-link": theme.palette.link,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default(Spoiler_module_css_default.spoiler, className),
+        ...props,
+        style: spoilerStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: contentId,
+              className: Spoiler_module_css_default.content,
+              style: opened ? void 0 : { maxHeight },
+              children: /* @__PURE__ */ jsx("div", { ref: innerRef, children })
+            }
+          ),
+          showToggle && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: Spoiler_module_css_default.toggle,
+              "aria-expanded": opened,
+              "aria-controls": contentId,
+              onClick: () => setOpened(!opened),
+              children: opened ? hideLabel : showLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SpoilerComponent.displayName = "BolioUISpoiler";
+var Spoiler = with_scale_default(SpoilerComponent);
+var Spoiler_default = Spoiler;
+
+// core/Spoiler/index.ts
+var Spoiler_default2 = Spoiler_default;
+
+export {
+  Spoiler_default2 as Spoiler_default
+};

package/esm/chunk-7UTQAZHV.js

@@ -0,0 +1,26 @@
+// core/use-orientation/use-orientation.ts
+import { useEffect, useState } from "react";
+var useOrientation = (defaultValue = { angle: 0, type: "landscape-primary" }) => {
+  const [orientation, setOrientation] = useState(defaultValue);
+  useEffect(() => {
+    var _a;
+    const screenOrientation = (_a = window.screen) == null ? void 0 : _a.orientation;
+    if (!screenOrientation) return;
+    const update = () => setOrientation({
+      angle: screenOrientation.angle,
+      type: screenOrientation.type
+    });
+    update();
+    screenOrientation.addEventListener("change", update);
+    return () => screenOrientation.removeEventListener("change", update);
+  }, []);
+  return orientation;
+};
+var use_orientation_default = useOrientation;
+
+// core/use-orientation/index.ts
+var use_orientation_default2 = use_orientation_default;
+
+export {
+  use_orientation_default2 as use_orientation_default
+};

package/esm/chunk-7VYP5HCP.js

@@ -0,0 +1,20 @@
+// core/use-document-visibility/use-document-visibility.ts
+import { useEffect, useState } from "react";
+var useDocumentVisibility = () => {
+  const [visibility, setVisibility] = useState("visible");
+  useEffect(() => {
+    const update = () => setVisibility(document.visibilityState);
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return visibility;
+};
+var use_document_visibility_default = useDocumentVisibility;
+
+// core/use-document-visibility/index.ts
+var use_document_visibility_default2 = use_document_visibility_default;
+
+export {
+  use_document_visibility_default2 as use_document_visibility_default
+};

package/esm/chunk-7XJQX5IB.js

@@ -0,0 +1,22 @@
+// core/use-favicon/use-favicon.ts
+import { useEffect } from "react";
+var useFavicon = (url) => {
+  useEffect(() => {
+    if (!url) return;
+    let link = document.querySelector("link[rel*='icon']");
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "shortcut icon";
+      document.head.appendChild(link);
+    }
+    link.href = url;
+  }, [url]);
+};
+var use_favicon_default = useFavicon;
+
+// core/use-favicon/index.ts
+var use_favicon_default2 = use_favicon_default;
+
+export {
+  use_favicon_default2 as use_favicon_default
+};