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

package/dist/Tooltip/styles.d.ts

@@ -3,5 +3,11 @@ import { BolioUIThemesPalette } from '../Themes/Presets';
 export type TooltipColors = {
     bgColor: string;
     color: string;
+    borderColor: string;
 };
-export declare const getColors: (type: SnippetTypes, palette: BolioUIThemesPalette) => TooltipColors;
+export interface TooltipVariantProps {
+    light?: boolean;
+    ghost?: boolean;
+    subtle?: boolean;
+}
+export declare const getColors: (type: SnippetTypes, palette: BolioUIThemesPalette, { light, ghost, subtle }?: TooltipVariantProps) => TooltipColors;

package/dist/chunk-2PRUFY2Q.js

@@ -0,0 +1,345 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk5HRVN7L7js = require('./chunk-5HRVN7L7.js');
+
+
+
+
+var _chunkA3BIV2QMjs = require('./chunk-A3BIV2QM.js');
+
+
+var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
+
+
+var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
+
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+
+
+var _chunkDXHNQANXjs = require('./chunk-DXHNQANX.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunkFEA5BJ35js = require('./chunk-FEA5BJ35.js');
+
+
+var _chunkX5PGXMVQjs = require('./chunk-X5PGXMVQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/BolioUIProvider/BolioUIProvider.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/BolioUIProvider/ThemeProvider.tsx
+
+var _jsxruntime = require('react/jsx-runtime');
+var ThemeProvider = ({
+  children,
+  themeType,
+  themes = []
+}) => {
+  const [allThemes, setAllThemes] = _react.useState.call(void 0, {
+    themes: _chunkX5PGXMVQjs.Themes_default.getPresets()
+  });
+  const currentTheme = _react.useMemo.call(void 0, () => {
+    const theme = allThemes.themes.find((item) => item.type === themeType);
+    if (theme) return theme;
+    return _chunkX5PGXMVQjs.Themes_default.getPresetStaticTheme();
+  }, [allThemes, themeType]);
+  _react.useEffect.call(void 0, () => {
+    if (!(themes == null ? void 0 : themes.length)) return;
+    setAllThemes((last) => {
+      const safeThemes = themes.filter(
+        (item) => _chunkX5PGXMVQjs.Themes_default.isAvailableThemeType(item.type)
+      );
+      const nextThemes = _chunkX5PGXMVQjs.Themes_default.getPresets().concat(safeThemes);
+      return {
+        ...last,
+        themes: nextThemes
+      };
+    });
+  }, [themes]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5HRVN7L7js.AllThemesContext.Provider, { value: allThemes, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFEA5BJ35js.ThemeContext.Provider, { value: currentTheme, children }) });
+};
+var ThemeProvider_default = ThemeProvider;
+
+// core/use-toasts/toast-container.tsx
+
+var _reactdom = require('react-dom');
+
+// core/use-toasts/toast-item.tsx
+
+
+// core/use-toasts/helpers.tsx
+
+var makeToastActions = (actions, cancelHandle) => {
+  const handler = (event, userHandler) => {
+    if (userHandler) userHandler(event, cancelHandle);
+  };
+  if (!actions || !actions.length) return null;
+  return actions.map((action, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkDXHNQANXjs.Button_default,
+    {
+      auto: true,
+      scale: 1 / 3,
+      font: "13px",
+      type: action.passive ? "default" : "primary",
+      onClick: (event) => handler(event, action.handler),
+      children: action.name
+    },
+    `action-${index}`
+  ));
+};
+var getColors = (palette, type) => {
+  const colors = {
+    default: palette.background,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  const isDefault = !type || type === "default";
+  if (isDefault)
+    return {
+      bgColor: colors.default,
+      color: palette.foreground
+    };
+  return {
+    bgColor: colors[type],
+    color: "white"
+  };
+};
+var isTopPlacement = (placement) => `${placement}`.toLowerCase().startsWith("top");
+var isLeftPlacement = (placement) => `${placement}`.toLowerCase().endsWith("left");
+var getTranslateByPlacement = (placement) => {
+  const translateInByPlacement = {
+    topLeft: "translate(-60px, -60px)",
+    topRight: "translate(60px, -60px)",
+    bottomLeft: "translate(-60px, 60px)",
+    bottomRight: "translate(60px, 60px)"
+  };
+  const translateOutByPlacement = {
+    topLeft: "translate(-50px, 15px) scale(0.85)",
+    topRight: "translate(50px, 15px) scale(0.85)",
+    bottomLeft: "translate(-50px, -15px) scale(0.85)",
+    bottomRight: "translate(50px, -15px) scale(0.85)"
+  };
+  return {
+    enter: translateInByPlacement[placement],
+    leave: translateOutByPlacement[placement]
+  };
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/use-toasts/toast-item.module.css.bolio-css-module-source
+var toast_item_module_css_default = { "toast": "toast-item-module_toast__R-DjO", "message": "toast-item-module_message__qzTg9" };
+
+// core/use-toasts/toast-item.tsx
+
+var ToastItem = _react2.default.memo(({ toast, layout }) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { color, bgColor } = _react.useMemo.call(void 0, 
+    () => getColors(theme.palette, toast.type),
+    [theme.palette, toast.type]
+  );
+  const isReactNode = typeof toast.text !== "string";
+  const { padding, margin, maxHeight, placement } = layout;
+  const { enter, leave } = _react.useMemo.call(void 0, 
+    () => getTranslateByPlacement(placement),
+    [placement]
+  );
+  const toastStyle = {
+    "--toast-item-max-height": maxHeight,
+    "--toast-item-color": color,
+    "--toast-item-bg": bgColor,
+    "--toast-item-radius": theme.layout.radius,
+    "--toast-item-shadow": theme.expressiveness.shadowSmall,
+    "--toast-item-margin": margin,
+    "--toast-item-padding": padding,
+    "--toast-item-enter-transform": enter,
+    "--toast-item-leave-transform": leave
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLDTDMDE6js.css_transition_default, { name: "toast", visible: toast.visible, clearTime: 350, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: toast_item_module_css_default.toast,
+      role: toast.type === "error" ? "alert" : "status",
+      style: toastStyle,
+      children: isReactNode ? toast.text : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: toast_item_module_css_default.message, children: toast.text }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "action", children: makeToastActions(toast.actions, toast.cancel) })
+      ] })
+    },
+    toast.id
+  ) });
+});
+ToastItem.displayName = "BolioUIToastItem";
+var toast_item_default = ToastItem;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/use-toasts/toast-container.module.css.bolio-css-module-source
+var toast_container_module_css_default = { "toasts": "toast-container-module_toasts__wLlVr", "top": "toast-container-module_top__jBxX6", "left": "toast-container-module_left__xyAbl" };
+
+// core/use-toasts/toast-container.tsx
+
+var ToastContainer = () => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const portal = _chunkBXDUHMWSjs.use_portal_default.call(void 0, "toast");
+  const [, setHovering, hoveringRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, false);
+  const { toasts, updateToasts, toastLayout, lastUpdateToastId } = _chunkA3BIV2QMjs.useBolioUIContext.call(void 0, );
+  const memoizedLayout = _react.useMemo.call(void 0, () => toastLayout, [toastLayout]);
+  const toastElements = _react.useMemo.call(void 0, 
+    () => toasts.map((toast) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      toast_item_default,
+      {
+        toast,
+        layout: memoizedLayout
+      },
+      toast._internalIdent
+    )),
+    [toasts, memoizedLayout]
+  );
+  const classNames = _react.useMemo.call(void 0, 
+    () => _chunk5KUROAEPjs.joinClasses.call(void 0, 
+      toast_container_module_css_default.toasts,
+      isTopPlacement(toastLayout.placement) && toast_container_module_css_default.top,
+      isLeftPlacement(toastLayout.placement) && toast_container_module_css_default.left
+    ),
+    [toastLayout.placement]
+  );
+  const hoverHandler = (isHovering) => {
+    setHovering(isHovering);
+    if (isHovering) {
+      return updateToasts(
+        (last) => last.map((toast) => {
+          if (!toast.visible) return toast;
+          if (toast._timeout) window.clearTimeout(toast._timeout);
+          return {
+            ...toast,
+            timeout: null
+          };
+        })
+      );
+    }
+    updateToasts(
+      (last) => last.map((toast, index) => {
+        if (!toast.visible) return toast;
+        if (toast._timeout) window.clearTimeout(toast._timeout);
+        return {
+          ...toast,
+          _timeout: (() => {
+            const timer = window.setTimeout(
+              () => {
+                toast.cancel();
+                window.clearTimeout(timer);
+              },
+              toast.delay + index * 100
+            );
+            return timer;
+          })()
+        };
+      })
+    );
+  };
+  const latestHover = _chunkZRORQ2WHjs.use_latest_default.call(void 0, hoverHandler);
+  _react.useEffect.call(void 0, () => {
+    const index = toasts.findIndex(
+      (r) => r._internalIdent === lastUpdateToastId
+    );
+    const toast = toasts[index];
+    if (!toast || toast.visible || !hoveringRef.current) return;
+    const hasVisible = toasts.find((r, i) => i < index && r.visible);
+    if (hasVisible || !hoveringRef.current) return;
+    latestHover.current(false);
+  }, [toasts, lastUpdateToastId, hoveringRef, latestHover]);
+  _react.useEffect.call(void 0, () => {
+    let timeout = null;
+    const timer = window.setInterval(() => {
+      if (toasts.length === 0) return;
+      timeout = window.setTimeout(() => {
+        const allInvisible = !toasts.find((r) => r.visible);
+        if (allInvisible) updateToasts(() => []);
+        if (timeout) clearTimeout(timeout);
+      }, 350);
+    }, 5e3);
+    return () => {
+      if (timer) clearInterval(timer);
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [toasts, updateToasts]);
+  if (!portal) return null;
+  if (!toasts || toasts.length === 0) return null;
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: classNames,
+        onMouseEnter: () => hoverHandler(true),
+        onMouseLeave: () => hoverHandler(false),
+        style: { "--toasts-gap": theme.layout.gap },
+        children: toastElements
+      }
+    ),
+    portal
+  );
+};
+var toast_container_default = ToastContainer;
+
+// core/BolioUIProvider/BolioUIProvider.tsx
+
+var BolioUIProvider = ({
+  themes,
+  themeType,
+  children
+}) => {
+  const [lastUpdateToastId, setLastUpdateToastId] = _react.useState.call(void 0, null);
+  const [toasts, setToasts, toastsRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, []);
+  const [toastLayout, setToastLayout, toastLayoutRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, _chunkA3BIV2QMjs.defaultToastLayout);
+  const updateToasts = _react.useCallback.call(void 0, 
+    (fn) => {
+      const nextToasts = fn(toastsRef.current);
+      setToasts(nextToasts);
+    },
+    [toastsRef, setToasts]
+  );
+  const updateToastLayout = _react.useCallback.call(void 0, 
+    (fn) => {
+      const nextLayout = fn(toastLayoutRef.current);
+      setToastLayout(nextLayout);
+    },
+    [toastLayoutRef, setToastLayout]
+  );
+  const updateLastToastId = (fn) => {
+    setLastUpdateToastId(fn());
+  };
+  const initialValue = _react.useMemo.call(void 0, 
+    () => ({
+      toasts,
+      toastLayout,
+      updateToasts,
+      lastUpdateToastId,
+      updateToastLayout,
+      updateLastToastId
+    }),
+    [toasts, toastLayout, lastUpdateToastId, updateToasts, updateToastLayout]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA3BIV2QMjs.BolioUIContent.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ThemeProvider_default, { themes, themeType, children: [
+    children,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, toast_container_default, {})
+  ] }) });
+};
+var BolioUIProvider_default = BolioUIProvider;
+
+// core/BolioUIProvider/index.ts
+var BolioUIProvider_default2 = BolioUIProvider_default;
+
+
+
+exports.BolioUIProvider_default = BolioUIProvider_default2;

package/dist/chunk-33BUV2RX.js

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkGGD4BGH2js = require('./chunk-GGD4BGH2.js');
+
+// core/utils/use-current-state.ts
+var use_current_state_default2 = _chunkGGD4BGH2js.use_current_state_default;
+
+
+
+exports.use_current_state_default = use_current_state_default2;

package/dist/chunk-3WPRUUZ6.js

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/use-click-away/use-click-away.ts
+var _react = require('react');
+var useClickAway = (ref, handler) => {
+  const handlerRef = _react.useRef.call(void 0, handler);
+  _react.useEffect.call(void 0, () => {
+    handlerRef.current = handler;
+  }, [handler]);
+  _react.useEffect.call(void 0, () => {
+    const callback = (event) => {
+      const el = ref.current;
+      if (!event || !el || el.contains(event.target)) return;
+      handlerRef.current(event);
+    };
+    document.addEventListener("click", callback);
+    return () => document.removeEventListener("click", callback);
+  }, [ref]);
+};
+var use_click_away_default = useClickAway;
+
+// core/use-click-away/index.ts
+var use_click_away_default2 = use_click_away_default;
+
+
+
+exports.use_click_away_default = use_click_away_default2;

package/dist/chunk-4QA7Z7VP.js

@@ -0,0 +1,132 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk6ZBFUZSLjs = require('./chunk-6ZBFUZSL.js');
+
+
+var _chunkNEG5UNM6js = require('./chunk-NEG5UNM6.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Command/Command.tsx
+var _react = require('react');
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Command/Command.module.css.bolio-css-module-source
+var Command_module_css_default = { "command": "Command-module_command__Gmila", "list": "Command-module_list__6p8VU", "item": "Command-module_item__bARSH", "icon": "Command-module_icon__D2tGK", "label": "Command-module_label__tKuEy", "hint": "Command-module_hint__DZc8-", "empty": "Command-module_empty__UDNuo" };
+
+// core/Command/Command.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Command = ({
+  visible,
+  onClose,
+  items,
+  placeholder = "Type a command or search",
+  emptyText = "No results. Try another word.",
+  className = ""
+}) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const [query, setQuery] = _react.useState.call(void 0, "");
+  const [active, setActive] = _react.useState.call(void 0, 0);
+  const filtered = _react.useMemo.call(void 0, () => {
+    const term = query.trim().toLowerCase();
+    return term ? items.filter((item) => item.label.toLowerCase().includes(term)) : items;
+  }, [items, query]);
+  _react.useEffect.call(void 0, () => {
+    if (!visible) return;
+    setQuery("");
+    setActive(0);
+  }, [visible]);
+  const select = (item) => {
+    var _a;
+    if (!item) return;
+    (_a = item.onSelect) == null ? void 0 : _a.call(item);
+    onClose == null ? void 0 : onClose();
+  };
+  const keyDownHandler = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      const count = filtered.length;
+      if (count) setActive((last) => (last + step + count) % count);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      select(filtered[active]);
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk6ZBFUZSLjs.Modal_default,
+    {
+      visible,
+      onClose,
+      "aria-label": "Command",
+      wrapClassName: _chunk5KUROAEPjs.use_classes_default.call(void 0, Command_module_css_default.command, className),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { onKeyDown: keyDownHandler, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkNEG5UNM6js.Input_default,
+          {
+            autoFocus: true,
+            width: "100%",
+            placeholder,
+            value: query,
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setActive(0);
+            },
+            role: "combobox",
+            "aria-expanded": true,
+            "aria-controls": "bolioui-command-list",
+            "aria-label": placeholder
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { id: "bolioui-command-list", role: "listbox", className: Command_module_css_default.list, children: [
+          filtered.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: Command_module_css_default.empty,
+              style: { color: theme.palette.accents_5 },
+              children: emptyText
+            }
+          ),
+          filtered.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "div",
+            {
+              role: "option",
+              "aria-selected": index === active,
+              className: Command_module_css_default.item,
+              style: {
+                backgroundColor: index === active ? theme.palette.accents_2 : void 0
+              },
+              onMouseEnter: () => setActive(index),
+              onClick: () => select(item),
+              children: [
+                item.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Command_module_css_default.icon, children: item.icon }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Command_module_css_default.label, children: item.label }),
+                item.hint && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "span",
+                  {
+                    className: Command_module_css_default.hint,
+                    style: { color: theme.palette.accents_5 },
+                    children: item.hint
+                  }
+                )
+              ]
+            },
+            item.value
+          ))
+        ] })
+      ] })
+    }
+  );
+};
+Command.displayName = "BolioUICommand";
+var Command_default = Command;
+
+// core/Command/index.ts
+var Command_default2 = Command_default;
+
+
+
+exports.Command_default = Command_default2;