@bolio-ui/core 3.0.4 → 3.1.0

package/esm/{chunk-J4K4LRBI.js → chunk-QCLQ5AJX.js}

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

package/esm/{chunk-TWIOSRRP.js → chunk-QCPCIVDI.js}

@@ -1,6 +1,6 @@
 import {
   Link_default
-} from "./chunk-WEYAL53O.js";
+} from "./chunk-TZ6SF6CO.js";
 import {
   use_scale_default,
   with_scale_default

package/esm/{chunk-FQWH4PDK.js → chunk-QQWFZSAI.js}

@@ -1,6 +1,6 @@
 import {
   getVariantColors
-} from "./chunk-GJZT47MP.js";
+} from "./chunk-Q4FDY7EJ.js";
 import {
   use_scale_default,
   with_scale_default

package/esm/{chunk-RWRFOGCU.js → chunk-QQY3MWML.js}

@@ -7,6 +7,11 @@ import {
 import {
   Loading_default
 } from "./chunk-LMDBE6T6.js";
+import {
+  getVariantColors,
+  isDarkPalette,
+  isSemanticColorType
+} from "./chunk-Q4FDY7EJ.js";
 import {
   use_scale_default,
   with_scale_default
@@ -25,6 +30,7 @@ import {
 // core/ButtonDropdown/ButtonDropdown.tsx
 import React3, {
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo as useMemo2,
   useRef,
@@ -101,6 +107,15 @@ var getColor = (palette, type, disabled = false) => {
       hoverBgColor: palette.accents_2,
       hoverBorder: palette.accents_3
     };
+  if (type && isSemanticColorType(type) && isDarkPalette(palette)) {
+    const { bg, color } = getVariantColors(palette, type, "light");
+    return {
+      ...colors[type],
+      color,
+      bgColor: bg,
+      hoverBgColor: bg
+    };
+  }
   return type ? colors[type] : colors.default;
 };
 
@@ -228,6 +243,7 @@ var ButtonDropdownComponent = React3.forwardRef(
     loading = false,
     icon,
     style,
+    onKeyDown,
     ...props
   }, ref) => {
     const { SCALES } = use_scale_default();
@@ -243,6 +259,54 @@ var ButtonDropdownComponent = React3.forwardRef(
       true
     );
     const [visible, setVisible] = useState(false);
+    const summaryRef = useRef(null);
+    const contentRef = useRef(null);
+    const focusFirst = useRef(false);
+    const items = () => {
+      var _a, _b;
+      return Array.from(
+        (_b = (_a = contentRef.current) == null ? void 0 : _a.querySelectorAll(
+          "button:not(:disabled)"
+        )) != null ? _b : []
+      );
+    };
+    useEffect(() => {
+      var _a, _b;
+      if (!visible || !focusFirst.current) return;
+      focusFirst.current = false;
+      (_b = (_a = contentRef.current) == null ? void 0 : _a.querySelector("button:not(:disabled)")) == null ? void 0 : _b.focus();
+    }, [visible]);
+    const keyDownHandler = (event) => {
+      var _a, _b, _c;
+      if (onKeyDown) onKeyDown(event);
+      if (disabled || loading || event.defaultPrevented) return;
+      const { key, target } = event;
+      if (key === "Escape" && visible) {
+        event.preventDefault();
+        setVisible(false);
+        (_a = summaryRef.current) == null ? void 0 : _a.focus();
+        return;
+      }
+      if (key !== "ArrowDown" && key !== "ArrowUp") return;
+      if (target === summaryRef.current) {
+        if (key !== "ArrowDown") return;
+        event.preventDefault();
+        if (visible) (_b = items()[0]) == null ? void 0 : _b.focus();
+        else {
+          focusFirst.current = true;
+          setVisible(true);
+        }
+        return;
+      }
+      const list = items();
+      const current = list.indexOf(target);
+      if (current < 0) return;
+      event.preventDefault();
+      if (key === "ArrowDown")
+        list[Math.min(list.length - 1, current + 1)].focus();
+      else if (current === 0) (_c = summaryRef.current) == null ? void 0 : _c.focus();
+      else list[current - 1].focus();
+    };
     const clickHandler = useCallback(
       (event) => {
         event.preventDefault();
@@ -283,6 +347,7 @@ var ButtonDropdownComponent = React3.forwardRef(
       "--bolio-ui-dropdown-min-width": auto ? "min-content" : SCALES.width(10.5),
       "--bolio-ui-dropdown-padding": `${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
       "--bolio-ui-dropdown-font-size": SCALES.font(0.875),
+      "--bolio-ui-dropdown-focus": theme.palette.primary,
       ...style
     };
     return /* @__PURE__ */ jsx3(ButtonDropdownContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsxs2(
@@ -292,6 +357,7 @@ var ButtonDropdownComponent = React3.forwardRef(
         className: use_classes_default(ButtonDropdown_module_css_default.btnDropdown, className),
         onClick: stopPropagation,
         ...props,
+        onKeyDown: keyDownHandler,
         style: rootStyle,
         children: [
           mainItemChildren,
@@ -299,6 +365,7 @@ var ButtonDropdownComponent = React3.forwardRef(
             /* @__PURE__ */ jsx3(
               "summary",
               {
+                ref: summaryRef,
                 className: ButtonDropdown_module_css_default.summary,
                 "aria-label": "More options",
                 onClick: clickHandler,
@@ -330,6 +397,7 @@ var ButtonDropdownComponent = React3.forwardRef(
             /* @__PURE__ */ jsx3(
               "div",
               {
+                ref: contentRef,
                 className: ButtonDropdown_module_css_default.content,
                 style: {
                   boxShadow: surface.shadow,

package/esm/chunk-QSHFISL4.js

@@ -0,0 +1,51 @@
+// core/use-roving-index/use-roving-index.ts
+import { useCallback, useRef, useState } from "react";
+var useRovingIndex = ({
+  total,
+  initialIndex = 0,
+  orientation = "horizontal",
+  loop = true,
+  onChange
+}) => {
+  const [selected, setSelected] = useState(initialIndex);
+  const items = useRef([]);
+  const select = useCallback(
+    (index) => {
+      var _a;
+      setSelected(index);
+      (_a = items.current[index]) == null ? void 0 : _a.focus();
+      onChange == null ? void 0 : onChange(index);
+    },
+    [onChange]
+  );
+  const onKeyDown = (event, index) => {
+    const [prev, next] = orientation === "horizontal" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+    let target = index;
+    if (event.key === next) target = index + 1;
+    else if (event.key === prev) target = index - 1;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = total - 1;
+    else return;
+    event.preventDefault();
+    if (target < 0) target = loop ? total - 1 : 0;
+    if (target > total - 1) target = loop ? 0 : total - 1;
+    select(target);
+  };
+  const getItemProps = (index) => ({
+    ref: (element) => {
+      items.current[index] = element;
+    },
+    tabIndex: index === selected ? 0 : -1,
+    onFocus: () => setSelected(index),
+    onKeyDown: (event) => onKeyDown(event, index)
+  });
+  return { selected, setSelected: select, getItemProps };
+};
+var use_roving_index_default = useRovingIndex;
+
+// core/use-roving-index/index.ts
+var use_roving_index_default2 = use_roving_index_default;
+
+export {
+  use_roving_index_default2 as use_roving_index_default
+};

package/esm/{chunk-KRSISARC.js → chunk-RG3CLJ6A.js}

@@ -1,6 +1,6 @@
 import {
   getColors
-} from "./chunk-KBZEYKCZ.js";
+} from "./chunk-CCKWTHUT.js";
 import {
   getSurface
 } from "./chunk-EUYSKHRS.js";

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

@@ -15,7 +15,7 @@ import {
 } from "./chunk-LDTDMDE6.js";
 import {
   use_portal_default
-} from "./chunk-BXDUHMWS.js";
+} from "./chunk-S5PYSYVR.js";
 import {
   use_latest_default
 } from "./chunk-ZRORQ2WH.js";

package/esm/chunk-RT3U2YWL.js

@@ -0,0 +1,68 @@
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+
+// core/use-local-storage/use-local-storage.ts
+import { useCallback, useEffect, useState } from "react";
+var EVENT = "bolio-ui-local-storage";
+var read = (key, fallback) => {
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw === null ? fallback : JSON.parse(raw);
+  } catch {
+    return fallback;
+  }
+};
+var useLocalStorage = ({
+  key,
+  defaultValue
+}) => {
+  const [value, setState] = useState(defaultValue);
+  const fallback = use_latest_default(defaultValue);
+  const current = use_latest_default(value);
+  useEffect(() => {
+    const sync = (event) => {
+      var _a;
+      const changed = (_a = event.key) != null ? _a : event.detail;
+      if (changed === null || changed === key) {
+        setState(read(key, fallback.current));
+      }
+    };
+    setState(read(key, fallback.current));
+    window.addEventListener("storage", sync);
+    window.addEventListener(EVENT, sync);
+    return () => {
+      window.removeEventListener("storage", sync);
+      window.removeEventListener(EVENT, sync);
+    };
+  }, [key, fallback]);
+  const setValue = useCallback(
+    (next) => {
+      const result = typeof next === "function" ? next(current.current) : next;
+      try {
+        window.localStorage.setItem(key, JSON.stringify(result));
+      } catch {
+      }
+      setState(result);
+      window.dispatchEvent(new CustomEvent(EVENT, { detail: key }));
+    },
+    [key, current]
+  );
+  const remove = useCallback(() => {
+    try {
+      window.localStorage.removeItem(key);
+    } catch {
+    }
+    setState(fallback.current);
+    window.dispatchEvent(new CustomEvent(EVENT, { detail: key }));
+  }, [key, fallback]);
+  return [value, setValue, remove];
+};
+var use_local_storage_default = useLocalStorage;
+
+// core/use-local-storage/index.ts
+var use_local_storage_default2 = use_local_storage_default;
+
+export {
+  use_local_storage_default2 as use_local_storage_default
+};

package/esm/{chunk-BXDUHMWS.js → chunk-S5PYSYVR.js}

@@ -2,12 +2,11 @@ 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";
+import { useEffect as useEffect2, useId, useState as useState2 } from "react";
 
 // core/utils/use-ssr.ts
 import { useEffect, useState } from "react";
@@ -30,7 +29,7 @@ var createElement = (id) => {
   return el;
 };
 var usePortal = (selectId, getContainer) => {
-  const [generatedId] = useState2(getId);
+  const generatedId = useId();
   const id = `bolio-ui-${selectId != null ? selectId : generatedId}`;
   const { isBrowser: isBrowser2 } = use_ssr_default();
   const [elSnapshot, setElSnapshot] = useState2(
@@ -41,7 +40,7 @@ var usePortal = (selectId, getContainer) => {
     const getContainer2 = getContainerRef.current;
     const customContainer = getContainer2 ? getContainer2() : null;
     const parentElement = customContainer || document.body;
-    const hasElement = parentElement.querySelector(`#${id}`);
+    const hasElement = parentElement.querySelector(`[id="${id}"]`);
     const el = hasElement || createElement(id);
     if (!hasElement) {
       parentElement.appendChild(el);

package/esm/{chunk-CY5KTINE.js → chunk-S673X52B.js}

@@ -1,6 +1,6 @@
 import {
   getStatusColor
-} from "./chunk-26KDVRFS.js";
+} from "./chunk-KBRWFODC.js";
 import {
   use_scale_default,
   with_scale_default

package/esm/{chunk-RZBEZ26A.js → chunk-SELOBD66.js}

@@ -34,5 +34,6 @@ var addColorAlpha = (color, alpha) => {
 };
 
 export {
+  colorToRgbValues,
   addColorAlpha
 };

package/esm/chunk-SGBNQO6N.js

@@ -0,0 +1,24 @@
+// core/use-did-update/use-did-update.ts
+import { useEffect, useRef } from "react";
+var useDidUpdate = (fn, dependencies) => {
+  const mounted = useRef(false);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+  useEffect(() => {
+    if (mounted.current) return fn();
+    mounted.current = true;
+    return void 0;
+  }, dependencies);
+};
+var use_did_update_default = useDidUpdate;
+
+// core/use-did-update/index.ts
+var use_did_update_default2 = use_did_update_default;
+
+export {
+  use_did_update_default2 as use_did_update_default
+};

package/esm/chunk-SUYANDFA.js

@@ -0,0 +1,36 @@
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+
+// core/use-mutation-observer/use-mutation-observer.ts
+import { useEffect, useRef } from "react";
+var useMutationObserver = (callback, options) => {
+  const ref = useRef(null);
+  const latest = use_latest_default(callback);
+  const { attributes, attributeFilter, childList, subtree, characterData } = options;
+  const filter = attributeFilter == null ? void 0 : attributeFilter.join(",");
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(
+      (mutations, instance) => latest.current(mutations, instance)
+    );
+    observer.observe(node, {
+      attributes,
+      attributeFilter: filter ? filter.split(",") : void 0,
+      childList,
+      subtree,
+      characterData
+    });
+    return () => observer.disconnect();
+  }, [latest, attributes, filter, childList, subtree, characterData]);
+  return ref;
+};
+var use_mutation_observer_default = useMutationObserver;
+
+// core/use-mutation-observer/index.ts
+var use_mutation_observer_default2 = use_mutation_observer_default;
+
+export {
+  use_mutation_observer_default2 as use_mutation_observer_default
+};

package/esm/chunk-SXIOMMAK.js

@@ -0,0 +1,39 @@
+// core/use-network/use-network.ts
+import { useEffect, useState } from "react";
+var read = () => {
+  const connection = navigator.connection;
+  return {
+    online: navigator.onLine,
+    downlink: connection == null ? void 0 : connection.downlink,
+    downlinkMax: connection == null ? void 0 : connection.downlinkMax,
+    effectiveType: connection == null ? void 0 : connection.effectiveType,
+    rtt: connection == null ? void 0 : connection.rtt,
+    saveData: connection == null ? void 0 : connection.saveData,
+    type: connection == null ? void 0 : connection.type
+  };
+};
+var useNetwork = () => {
+  const [status, setStatus] = useState({});
+  useEffect(() => {
+    const update = () => setStatus(read());
+    const connection = navigator.connection;
+    update();
+    window.addEventListener("online", update);
+    window.addEventListener("offline", update);
+    connection == null ? void 0 : connection.addEventListener("change", update);
+    return () => {
+      window.removeEventListener("online", update);
+      window.removeEventListener("offline", update);
+      connection == null ? void 0 : connection.removeEventListener("change", update);
+    };
+  }, []);
+  return status;
+};
+var use_network_default = useNetwork;
+
+// core/use-network/index.ts
+var use_network_default2 = use_network_default;
+
+export {
+  use_network_default2 as use_network_default
+};

package/esm/{chunk-YLLPYRJH.js → chunk-TCXOYKXN.js}

@@ -1,6 +1,6 @@
 import {
   getColors
-} from "./chunk-KBZEYKCZ.js";
+} from "./chunk-CCKWTHUT.js";
 import {
   Calendar_default,
   fromISO,

package/esm/chunk-TDLO3TAD.js

@@ -0,0 +1,21 @@
+// core/use-set-state/use-set-state.ts
+import { useCallback, useState } from "react";
+var useSetState = (initialState) => {
+  const [state, setState] = useState(initialState);
+  const setPartial = useCallback(
+    (statePartial) => setState((current) => ({
+      ...current,
+      ...typeof statePartial === "function" ? statePartial(current) : statePartial
+    })),
+    []
+  );
+  return [state, setPartial];
+};
+var use_set_state_default = useSetState;
+
+// core/use-set-state/index.ts
+var use_set_state_default2 = use_set_state_default;
+
+export {
+  use_set_state_default2 as use_set_state_default
+};

package/esm/chunk-TEDNYYG6.js

@@ -0,0 +1,30 @@
+// core/use-map/use-map.ts
+import { useReducer, useRef } from "react";
+var mutating = ["set", "delete", "clear"];
+var useMap = (initialState) => {
+  const [, update] = useReducer((tick) => tick + 1, 0);
+  const ref = useRef(null);
+  if (!ref.current) {
+    const map = new Map(initialState);
+    mutating.forEach((method) => {
+      const original = map[method].bind(map);
+      Object.defineProperty(map, method, {
+        value: (...args) => {
+          const result = original(...args);
+          update();
+          return result;
+        }
+      });
+    });
+    ref.current = map;
+  }
+  return ref.current;
+};
+var use_map_default = useMap;
+
+// core/use-map/index.ts
+var use_map_default2 = use_map_default;
+
+export {
+  use_map_default2 as use_map_default
+};

package/esm/{chunk-SJVWKNGY.js → chunk-TK6U467D.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-AXYDJGTN.js";
 import {
   use_portal_default
-} from "./chunk-BXDUHMWS.js";
+} from "./chunk-S5PYSYVR.js";
 import {
   use_latest_default
 } from "./chunk-ZRORQ2WH.js";
 import {
   Button_default
-} from "./chunk-TPZUTHTQ.js";
+} from "./chunk-Q2K4VARR.js";
 import {
   getSurface
 } from "./chunk-EUYSKHRS.js";

package/esm/chunk-TXD5OFHG.js

@@ -0,0 +1,29 @@
+// core/use-queue/use-queue.ts
+import { useState } from "react";
+var useQueue = ({
+  initialValues = [],
+  limit = Infinity
+} = {}) => {
+  const split = (items) => ({
+    state: items.slice(0, limit),
+    queue: items.slice(limit)
+  });
+  const [value, setValue] = useState(() => split(initialValues));
+  return {
+    state: value.state,
+    queue: value.queue,
+    add: (...items) => setValue(
+      (current) => split([...current.state, ...current.queue, ...items])
+    ),
+    update: (fn) => setValue((current) => split(fn([...current.state, ...current.queue]))),
+    cleanQueue: () => setValue((current) => ({ state: current.state, queue: [] }))
+  };
+};
+var use_queue_default = useQueue;
+
+// core/use-queue/index.ts
+var use_queue_default2 = use_queue_default;
+
+export {
+  use_queue_default2 as use_queue_default
+};

package/esm/{chunk-WEYAL53O.js → chunk-TZ6SF6CO.js}

@@ -1,6 +1,6 @@
 import {
   addColorAlpha
-} from "./chunk-RZBEZ26A.js";
+} from "./chunk-SELOBD66.js";
 import {
   use_scale_default,
   with_scale_default

package/esm/chunk-UTAL5ZWE.js

@@ -0,0 +1,26 @@
+// core/use-os/use-os.ts
+import { useEffect, useState } from "react";
+var detect = () => {
+  const ua = navigator.userAgent.toLowerCase();
+  if (/iphone|ipad|ipod/.test(ua)) return "ios";
+  if (ua.includes("macintosh") && navigator.maxTouchPoints > 1) return "ios";
+  if (ua.includes("android")) return "android";
+  if (/windows|win32/.test(ua)) return "windows";
+  if (ua.includes("cros")) return "chromeos";
+  if (/macintosh|mac os x/.test(ua)) return "macos";
+  if (ua.includes("linux")) return "linux";
+  return "undetermined";
+};
+var useOs = () => {
+  const [os, setOs] = useState("undetermined");
+  useEffect(() => setOs(detect()), []);
+  return os;
+};
+var use_os_default = useOs;
+
+// core/use-os/index.ts
+var use_os_default2 = use_os_default;
+
+export {
+  use_os_default2 as use_os_default
+};

package/esm/chunk-UTUCP2HS.js

@@ -0,0 +1,56 @@
+// core/use-fetch/use-fetch.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var useFetch = (url, { autoInvoke = true, ...init } = {}) => {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(autoInvoke);
+  const [error, setError] = useState(null);
+  const controller = useRef(null);
+  const initRef = useRef(init);
+  initRef.current = init;
+  const refetch = useCallback(async () => {
+    var _a;
+    (_a = controller.current) == null ? void 0 : _a.abort();
+    const current = new AbortController();
+    controller.current = current;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(url, {
+        signal: current.signal,
+        ...initRef.current
+      });
+      if (!response.ok) throw new Error(`Request failed (${response.status})`);
+      const json = await response.json();
+      setData(json);
+      setLoading(false);
+      return json;
+    } catch (err) {
+      if (err.name !== "AbortError") {
+        setError(err);
+        setLoading(false);
+      }
+      return null;
+    }
+  }, [url]);
+  const abort = useCallback(() => {
+    var _a;
+    (_a = controller.current) == null ? void 0 : _a.abort();
+    setLoading(false);
+  }, []);
+  useEffect(() => {
+    if (autoInvoke) refetch();
+    return () => {
+      var _a;
+      return (_a = controller.current) == null ? void 0 : _a.abort();
+    };
+  }, [autoInvoke, refetch]);
+  return { data, loading, error, refetch, abort };
+};
+var use_fetch_default = useFetch;
+
+// core/use-fetch/index.ts
+var use_fetch_default2 = use_fetch_default;
+
+export {
+  use_fetch_default2 as use_fetch_default
+};

package/esm/chunk-V7PWYMYX.js

@@ -0,0 +1,34 @@
+// core/use-shallow-effect/use-shallow-effect.ts
+import { useEffect, useRef } from "react";
+var isEqual = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  return keysA.length === keysB.length && keysA.every(
+    (key) => Object.is(
+      a[key],
+      b[key]
+    )
+  );
+};
+var useShallowEffect = (cb, dependencies) => {
+  const previous = useRef(dependencies);
+  const version = useRef(0);
+  if (!dependencies || !previous.current || dependencies.length !== previous.current.length || !dependencies.every((dep, index) => {
+    var _a;
+    return isEqual(dep, (_a = previous.current) == null ? void 0 : _a[index]);
+  })) {
+    previous.current = dependencies;
+    version.current += 1;
+  }
+  useEffect(cb, [version.current]);
+};
+var use_shallow_effect_default = useShallowEffect;
+
+// core/use-shallow-effect/index.ts
+var use_shallow_effect_default2 = use_shallow_effect_default;
+
+export {
+  use_shallow_effect_default2 as use_shallow_effect_default
+};