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

package/esm/chunk-6ZBFUZSL.js

@@ -0,0 +1,363 @@
+import {
+  ModalContent_default,
+  ModalContext,
+  ModalSubtitle_default,
+  ModalTitle_default,
+  backdrop_default,
+  useModalContext,
+  use_body_scroll_default
+} from "./chunk-TKIUVNKP.js";
+import {
+  use_keyboard_default
+} from "./chunk-F3AL4TQZ.js";
+import {
+  css_transition_default
+} from "./chunk-LDTDMDE6.js";
+import {
+  use_portal_default
+} from "./chunk-BXDUHMWS.js";
+import {
+  Button_default
+} from "./chunk-DXHNQANX.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  hasChild,
+  isChildElement,
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Modal/Modal.tsx
+import React4, {
+  useCallback,
+  useEffect as useEffect3,
+  useId,
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
+import { createPortal } from "react-dom";
+
+// core/Modal/ModalWrapper.tsx
+import React, { useEffect, useImperativeHandle, useRef } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalWrapper.module.css.bolio-css-module-source
+var ModalWrapper_module_css_default = { "wrapper": "ModalWrapper-module_wrapper__DGcJw", "hideTab": "ModalWrapper-module_hideTab__PCR9O" };
+
+// core/Modal/ModalWrapper.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModalWrapper = React.forwardRef(({ className = "", children, visible = false, style, ...props }, ref) => {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const modalContent = useRef(null);
+  useImperativeHandle(ref, () => modalContent.current);
+  const tabStart = useRef(null);
+  const tabEnd = useRef(null);
+  useEffect(() => {
+    if (!visible) return;
+    const activeElement = document.activeElement;
+    const isChild = isChildElement(modalContent.current, activeElement);
+    if (isChild) return;
+    if (tabStart.current) tabStart.current.focus();
+  }, [visible]);
+  const onKeyDown = (event) => {
+    const isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    const activeElement = document.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        if (tabEnd.current) tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        if (tabStart.current) tabStart.current.focus();
+      }
+    }
+  };
+  const wrapperStyle = {
+    backgroundColor: theme.palette.background,
+    color: theme.palette.foreground,
+    borderRadius: theme.layout.radius,
+    boxShadow: theme.expressiveness.shadowLarge,
+    fontSize: SCALES.font(1),
+    height: SCALES.height(1, "auto"),
+    "--modal-wrapper-padding-left": SCALES.pl(1.3125),
+    "--modal-wrapper-padding-right": SCALES.pr(1.3125),
+    padding: `${SCALES.pt(1.3125)} var(--modal-wrapper-padding-right) ${SCALES.pb(1.3125)} var(--modal-wrapper-padding-left)`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(css_transition_default, { name: "wrapper", visible, clearTime: 300, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: use_classes_default(ModalWrapper_module_css_default.wrapper, className),
+      role: "dialog",
+      "aria-modal": "true",
+      tabIndex: -1,
+      onKeyDown,
+      ref: modalContent,
+      ...props,
+      style: wrapperStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            tabIndex: 0,
+            className: ModalWrapper_module_css_default.hideTab,
+            "aria-hidden": "true",
+            ref: tabStart
+          }
+        ),
+        children,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            tabIndex: 0,
+            className: ModalWrapper_module_css_default.hideTab,
+            "aria-hidden": "true",
+            ref: tabEnd
+          }
+        )
+      ]
+    }
+  ) });
+});
+ModalWrapper.displayName = "BolioUIModalWrapper";
+var ModalWrapper_default = ModalWrapper;
+
+// core/Modal/ModalAction.tsx
+import React2, { useImperativeHandle as useImperativeHandle2, useMemo, useRef as useRef2 } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalAction.module.css.bolio-css-module-source
+var ModalAction_module_css_default = { "action": "ModalAction-module_action__hEtmQ", "btn": "ModalAction-module_btn__If5jI" };
+
+// core/Modal/ModalAction.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ModalActionComponent = React2.forwardRef(function({
+  className = "",
+  children,
+  onClick,
+  passive = false,
+  disabled = false,
+  ...props
+}, ref) {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const btnRef = useRef2(null);
+  const { close } = useModalContext();
+  useImperativeHandle2(ref, () => btnRef.current);
+  const clickHandler = (event) => {
+    if (disabled) return;
+    const actionEvent = Object.assign({}, event, {
+      close: () => close && close()
+    });
+    if (onClick) onClick(actionEvent);
+  };
+  const color = useMemo(() => {
+    return passive ? theme.palette.accents_5 : theme.palette.foreground;
+  }, [theme.palette, passive]);
+  const bgColor = useMemo(() => {
+    return disabled ? theme.palette.accents_1 : theme.palette.background;
+  }, [theme.palette, disabled]);
+  const classes = use_classes_default(ModalAction_module_css_default.action, className);
+  const actionStyle = {
+    fontSize: SCALES.font(0.75),
+    border: "none",
+    color,
+    backgroundColor: theme.palette.background,
+    display: "flex",
+    WebkitBoxAlign: "center",
+    alignItems: "center",
+    WebkitBoxPack: "center",
+    justifyContent: "center",
+    flex: 1,
+    height: SCALES.height(3.5625),
+    borderRadius: 0,
+    minWidth: 0,
+    "--modal-action-hover-color": disabled ? color : theme.palette.foreground,
+    "--modal-action-hover-bg": disabled ? bgColor : theme.palette.accents_1
+  };
+  const overrideProps = {
+    ...props,
+    effect: false,
+    ref: btnRef
+  };
+  return /* @__PURE__ */ jsx2(
+    Button_default,
+    {
+      className: classes,
+      onClick: clickHandler,
+      disabled,
+      ...overrideProps,
+      style: {
+        ...actionStyle,
+        ...overrideProps.style
+      },
+      children
+    }
+  );
+});
+ModalActionComponent.displayName = "BolioUIModalAction";
+var ModalAction = with_scale_default(ModalActionComponent);
+var ModalAction_default = ModalAction;
+
+// core/Modal/ModalActions.tsx
+import React3, { useEffect as useEffect2, useRef as useRef3, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Modal/ModalActions.module.css.bolio-css-module-source
+var ModalActions_module_css_default = { "footer": "ModalActions-module_footer__gDr-2", "spacer": "ModalActions-module_spacer__zek5w" };
+
+// core/Modal/ModalActions.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ModalActionsComponent = ({
+  children,
+  ...props
+}) => {
+  const theme = use_theme_default();
+  const ref = useRef3(null);
+  const [height, setHeight] = useState("auto");
+  useEffect2(() => {
+    if (!ref.current) return;
+    setHeight(`${ref.current.clientHeight}px`);
+  }, [ref]);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("div", { className: ModalActions_module_css_default.spacer, style: { height } }),
+    /* @__PURE__ */ jsx3(
+      "footer",
+      {
+        ref,
+        ...props,
+        className: ModalActions_module_css_default.footer,
+        style: {
+          borderTop: `1px solid ${theme.palette.border}`,
+          borderBottomLeftRadius: theme.layout.radius,
+          borderBottomRightRadius: theme.layout.radius,
+          "--modal-actions-border": theme.palette.border
+        },
+        children
+      }
+    )
+  ] });
+};
+ModalActionsComponent.displayName = "BolioUIModalActions";
+var ModalActions = React3.memo(ModalActionsComponent);
+var ModalActions_default = ModalActions;
+
+// core/Modal/Modal.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ModalComponent = React4.forwardRef(
+  ({
+    visible: customVisible,
+    onClose,
+    children,
+    keyboard = true,
+    wrapClassName = "",
+    onContentClick,
+    disableBackdropClick = false,
+    positionClassName = "",
+    backdropClassName = "",
+    layerClassName = "",
+    role = "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby
+  }, ref) => {
+    const portal = use_portal_default("modal");
+    const baseId = useId();
+    const titleId = `${baseId}-title`;
+    const descriptionId = `${baseId}-description`;
+    const { SCALES } = use_scale_default();
+    const [, setBodyHidden] = use_body_scroll_default(null, { delayReset: 300 });
+    const [visible, setVisible] = useState2(false);
+    const [withoutActionsChildren, ActionsChildren] = pickChild(
+      children,
+      ModalAction_default
+    );
+    const hasActions = ActionsChildren && React4.Children.count(ActionsChildren) > 0;
+    const closeModal = useCallback(() => {
+      if (onClose) onClose();
+      setVisible(false);
+      setBodyHidden(false);
+    }, [onClose, setBodyHidden]);
+    useEffect3(() => {
+      if (typeof customVisible === "undefined") return;
+      setVisible(customVisible);
+      setBodyHidden(customVisible);
+    }, [customVisible, setBodyHidden]);
+    const { bindings } = use_keyboard_default(
+      () => {
+        if (keyboard) closeModal();
+      },
+      27 /* Escape */,
+      {
+        disableGlobalEvent: true
+      }
+    );
+    const closeFromBackdrop = () => {
+      if (disableBackdropClick) return;
+      closeModal();
+    };
+    const modalConfig = useMemo2(
+      () => ({
+        close: closeModal,
+        titleId,
+        descriptionId
+      }),
+      [closeModal, titleId, descriptionId]
+    );
+    if (!portal) return null;
+    return createPortal(
+      /* @__PURE__ */ jsx4(ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ jsx4(
+        backdrop_default,
+        {
+          onClick: closeFromBackdrop,
+          onContentClick,
+          visible,
+          width: SCALES.width(26),
+          positionClassName,
+          backdropClassName,
+          layerClassName,
+          ...bindings,
+          children: /* @__PURE__ */ jsxs3(
+            ModalWrapper_default,
+            {
+              ref,
+              visible,
+              className: wrapClassName,
+              role,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby || (hasChild(children, ModalTitle_default) ? titleId : void 0),
+              "aria-describedby": ariaDescribedby || (hasChild(children, ModalSubtitle_default) ? descriptionId : void 0),
+              children: [
+                withoutActionsChildren,
+                hasActions && /* @__PURE__ */ jsx4(ModalActions_default, { children: ActionsChildren })
+              ]
+            }
+          )
+        }
+      ) }),
+      portal
+    );
+  }
+);
+ModalComponent.displayName = "BolioUIModal";
+var Modal = with_scale_default(ModalComponent);
+var Modal_default = Modal;
+
+// core/Modal/index.ts
+Modal_default.Title = ModalTitle_default;
+Modal_default.Subtitle = ModalSubtitle_default;
+Modal_default.Content = ModalContent_default;
+Modal_default.Action = ModalAction_default;
+var Modal_default2 = Modal_default;
+
+export {
+  Modal_default2 as Modal_default
+};

package/esm/chunk-7N7PEBRB.js

@@ -0,0 +1,82 @@
+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/Dot/Dot.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Dot/Dot.module.css.bolio-css-module-source
+var Dot_module_css_default = { "dot": "Dot-module_dot__SGd5d", "icon": "Dot-module_icon__Mc0hA", "label": "Dot-module_label__haoc8" };
+
+// core/Dot/Dot.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColor = (type, theme) => {
+  const colors = {
+    default: theme.palette.accents_2,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error,
+    info: theme.palette.info
+  };
+  return colors[type] || colors.default;
+};
+var DotComponent = React.forwardRef(
+  ({
+    type = "default",
+    children,
+    className = "",
+    color = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const typeColor = useMemo(() => getColor(type, theme), [type, theme]);
+    const dotStyle = {
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: use_classes_default("dot", Dot_module_css_default.dot, className),
+        ...props,
+        style: dotStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: Dot_module_css_default.icon,
+              style: { backgroundColor: color ? color : typeColor }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: Dot_module_css_default.label, children })
+        ]
+      }
+    );
+  }
+);
+DotComponent.displayName = "BolioUIDot";
+var Dot = with_scale_default(DotComponent);
+var Dot_default = Dot;
+
+// core/Dot/index.ts
+var Dot_default2 = Dot_default;
+
+export {
+  Dot_default2 as Dot_default
+};

package/esm/chunk-A2NLRQ55.js

@@ -0,0 +1,177 @@
+import {
+  addColorAlpha
+} from "./chunk-RZBEZ26A.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses
+} from "./chunk-5KUROAEP.js";
+
+// core/Code/Code.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Code/Code.module.css.bolio-css-module-source
+var Code_module_css_default = { "pre": "Code-module_pre__UgdQp", "dark": "Code-module_dark__kv7y4", "traffic": "Code-module_traffic__CuA-Q", "close": "Code-module_close__BGiX8", "mini": "Code-module_mini__XcXfx", "full": "Code-module_full__yJFy9", "tabs": "Code-module_tabs__SP22o", "tab": "Code-module_tab__536h1", "name": "Code-module_name__bFwLB", "active": "Code-module_active__f48Hh" };
+
+// core/Code/Code.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeComponent = React.forwardRef(
+  ({
+    children,
+    block = false,
+    className = "",
+    name = "",
+    classic = false,
+    tabs = [],
+    activeTab = 0,
+    onTabChange,
+    ...props
+  }, ref) => {
+    const { SCALES } = use_scale_default();
+    const theme = use_theme_default();
+    const id = React.useId();
+    const tabRefs = React.useRef([]);
+    const { background, border, tab } = useMemo(() => {
+      if (!classic)
+        return {
+          border: theme.palette.accents_2,
+          background: addColorAlpha(theme.palette.accents_1, 0.75),
+          tab: theme.palette.accents_1
+        };
+      return {
+        border: theme.palette.accents_2,
+        background: theme.palette.background,
+        tab: theme.palette.background
+      };
+    }, [classic, theme.palette]);
+    const hasTabs = tabs.length > 0;
+    const moveTab = (event, index) => {
+      var _a;
+      const last = tabs.length - 1;
+      const target = {
+        ArrowRight: index === last ? 0 : index + 1,
+        ArrowLeft: index === 0 ? last : index - 1,
+        Home: 0,
+        End: last
+      }[event.key];
+      if (target === void 0) return;
+      event.preventDefault();
+      onTabChange == null ? void 0 : onTabChange(target);
+      (_a = tabRefs.current[target]) == null ? void 0 : _a.focus();
+    };
+    if (!block)
+      return /* @__PURE__ */ jsx("code", { ref, ...props, children });
+    const nameStyle = {
+      borderRight: `1px solid ${theme.palette.accents_2}`,
+      color: theme.palette.accents_5,
+      fontSize: SCALES.font(0.8125),
+      padding: `${SCALES.font(0.32)} ${SCALES.font(0.5)} ${SCALES.font(0.32)} ${SCALES.font(0.5)}`
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: Code_module_css_default.pre,
+        style: {
+          border: `1px solid ${border}`,
+          fontSize: SCALES.font(0.875),
+          width: SCALES.width(1, "initial"),
+          height: SCALES.height(1, "auto"),
+          margin: `${SCALES.mt(1.3)} ${SCALES.mr(0)} ${SCALES.mb(1.3)} ${SCALES.ml(0)}`,
+          borderRadius: theme.layout.radius,
+          backgroundColor: background,
+          "--code-tab-hover-color": theme.palette.foreground,
+          "--code-tab-focus-color": theme.palette.accents_5
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "header",
+            {
+              style: {
+                borderBottom: `1px solid ${theme.palette.accents_2}`,
+                backgroundColor: theme.palette.border
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: Code_module_css_default.traffic,
+                    style: { padding: `0 ${theme.layout.gapHalf}` },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: Code_module_css_default.close }),
+                      /* @__PURE__ */ jsx("span", { className: Code_module_css_default.mini }),
+                      /* @__PURE__ */ jsx("span", { className: Code_module_css_default.full })
+                    ]
+                  }
+                ),
+                hasTabs ? /* @__PURE__ */ jsx("div", { role: "tablist", className: Code_module_css_default.tabs, children: tabs.map((label, index) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (element) => {
+                      tabRefs.current[index] = element;
+                    },
+                    type: "button",
+                    role: "tab",
+                    id: `${id}-tab-${index}`,
+                    "aria-selected": index === activeTab,
+                    "aria-controls": `${id}-panel`,
+                    tabIndex: index === activeTab ? 0 : -1,
+                    className: joinClasses(Code_module_css_default.name, Code_module_css_default.tab, {
+                      [Code_module_css_default.active]: index === activeTab
+                    }),
+                    style: {
+                      ...nameStyle,
+                      backgroundColor: index === activeTab ? tab : void 0
+                    },
+                    onClick: () => onTabChange == null ? void 0 : onTabChange(index),
+                    onKeyDown: (event) => moveTab(event, index),
+                    children: /* @__PURE__ */ jsx("span", { children: label })
+                  },
+                  `${label}-${index}`
+                )) }) : name && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: joinClasses(Code_module_css_default.name, Code_module_css_default.active),
+                    style: { ...nameStyle, backgroundColor: tab },
+                    children: name
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "pre",
+            {
+              className,
+              style: {
+                padding: `${SCALES.pt(1.1)} ${SCALES.pr(1)} ${SCALES.pb(1.1)} ${SCALES.pl(1)}`
+              },
+              ...hasTabs && {
+                role: "tabpanel",
+                id: `${id}-panel`,
+                "aria-labelledby": `${id}-tab-${activeTab}`
+              },
+              ...props,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodeComponent.displayName = "BolioUICode";
+var Code = with_scale_default(CodeComponent);
+var Code_default = Code;
+
+// core/Code/index.ts
+var Code_default2 = Code_default;
+
+export {
+  Code_default2 as Code_default
+};