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

package/esm/chunk-SGWX6H4Y.js

@@ -0,0 +1,354 @@
+import {
+  use_click_away_default
+} from "./chunk-DGXZP4VJ.js";
+import {
+  Loading_default
+} from "./chunk-LMDBE6T6.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  pickChild,
+  pickChildByProps
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/ButtonDropdown/ButtonDropdown.tsx
+import React3, {
+  useCallback,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+
+// core/ButtonDropdown/styles.ts
+var getColor = (palette, type, disabled = false) => {
+  const colors = {
+    default: {
+      color: palette.foreground,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      borderLeftColor: palette.accents_3,
+      hoverBgColor: palette.accents_3,
+      hoverBorder: palette.accents_7
+    },
+    primary: {
+      color: palette.primaryDark,
+      bgColor: palette.primaryLight,
+      borderColor: palette.primary,
+      borderLeftColor: palette.primary,
+      hoverBgColor: palette.primaryLight,
+      hoverBorder: palette.primary
+    },
+    secondary: {
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLight,
+      borderColor: palette.secondary,
+      borderLeftColor: palette.secondary,
+      hoverBgColor: palette.secondaryLight,
+      hoverBorder: palette.secondary
+    },
+    success: {
+      color: palette.successDark,
+      bgColor: palette.successLight,
+      borderColor: palette.success,
+      borderLeftColor: palette.success,
+      hoverBgColor: palette.successLight,
+      hoverBorder: palette.success
+    },
+    warning: {
+      color: palette.warningDark,
+      bgColor: palette.warningLight,
+      borderColor: palette.warning,
+      borderLeftColor: palette.warning,
+      hoverBgColor: palette.warningLight,
+      hoverBorder: palette.warning
+    },
+    error: {
+      color: palette.errorDark,
+      bgColor: palette.errorLight,
+      borderColor: palette.error,
+      borderLeftColor: palette.error,
+      hoverBgColor: palette.errorLight,
+      hoverBorder: palette.error
+    },
+    info: {
+      color: palette.infoDark,
+      bgColor: palette.infoLight,
+      borderColor: palette.info,
+      borderLeftColor: palette.info,
+      hoverBgColor: palette.infoLight,
+      hoverBorder: palette.info
+    }
+  };
+  if (disabled)
+    return {
+      ...colors.default,
+      color: palette.accents_4,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      borderLeftColor: palette.accents_3,
+      hoverBgColor: palette.accents_2,
+      hoverBorder: palette.accents_3
+    };
+  return type ? colors[type] : colors.default;
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ButtonDropdown/Icon.module.css.bolio-css-module-source
+var Icon_module_css_default = { "icon": "Icon-module_icon__-dePv" };
+
+// core/ButtonDropdown/Icon.tsx
+import { jsx } from "react/jsx-runtime";
+function ButtonDropdownIcon({ color, height }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      stroke: color,
+      style: { color },
+      viewBox: "0 0 24 24",
+      width: height,
+      height,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: Icon_module_css_default.icon,
+      children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+ButtonDropdownIcon.displayName = "BolioUIButtonDropdownIcon";
+var Icon_default = ButtonDropdownIcon;
+
+// core/ButtonDropdown/ButtonDropdownItem.tsx
+import { useMemo } from "react";
+
+// core/ButtonDropdown/ButtonDropdownContext.ts
+import React from "react";
+var defaultContext = {
+  type: "default",
+  auto: false,
+  disabled: false,
+  loading: false,
+  align: "center"
+};
+var ButtonDropdownContext = React.createContext(defaultContext);
+var useButtonDropdown = () => React.useContext(ButtonDropdownContext);
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ButtonDropdown/ButtonDropdownItem.module.css.bolio-css-module-source
+var ButtonDropdownItem_module_css_default = { "button": "ButtonDropdownItem-module_button__R-hYv", "icon": "ButtonDropdownItem-module_icon__aLhiz", "option": "ButtonDropdownItem-module_option__2O9Am" };
+
+// core/ButtonDropdown/ButtonDropdownItem.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ButtonDropdownItem({
+  children,
+  onClick,
+  className = "",
+  main = false,
+  icon,
+  type: selfType,
+  style,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    type: parentType,
+    disabled,
+    loading,
+    align,
+    close
+  } = useButtonDropdown();
+  const type = main ? parentType : selfType != null ? selfType : parentType;
+  const colors = getColor(theme.palette, type, disabled);
+  const clickHandler = (event) => {
+    if (disabled || loading) return;
+    if (onClick) onClick(event);
+    close == null ? void 0 : close();
+  };
+  const cursor = useMemo(() => {
+    if (loading) return "default";
+    return disabled ? "not-allowed" : "pointer";
+  }, [loading, disabled]);
+  const buttonStyle = {
+    cursor,
+    color: main || type !== "default" ? colors.color : theme.palette.foreground,
+    "--dropdown-item-hover-border": colors.hoverBorder,
+    "--dropdown-item-hover-bg": main ? colors.hoverBgColor : type === "default" ? theme.palette.accents_2 : `color-mix(in srgb, ${colors.color} 12%, transparent)`,
+    ...main && {
+      backgroundColor: colors.bgColor,
+      justifyContent: align === "center" ? "center" : `flex-${align}`
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: `${ButtonDropdownItem_module_css_default.button} ${main ? "" : ButtonDropdownItem_module_css_default.option} ${className}`.trim(),
+      onClick: clickHandler,
+      ...props,
+      style: buttonStyle,
+      children: loading ? /* @__PURE__ */ jsx2(Loading_default, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx2("span", { className: ButtonDropdownItem_module_css_default.icon, children: icon }),
+        children
+      ] })
+    }
+  );
+}
+ButtonDropdownItem.displayName = "BolioUIButtonDropdownItem";
+var ButtonDropdownItem_default = ButtonDropdownItem;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/ButtonDropdown/ButtonDropdown.module.css.bolio-css-module-source
+var ButtonDropdown_module_css_default = { "btnDropdown": "ButtonDropdown-module_btnDropdown__wvnlC", "details": "ButtonDropdown-module_details__aqKKf", "dropdownBox": "ButtonDropdown-module_dropdownBox__3H0dw", "summary": "ButtonDropdown-module_summary__NGCte", "content": "ButtonDropdown-module_content__O7uo-", "dropdownIcon": "ButtonDropdown-module_dropdownIcon__dPh89" };
+
+// core/ButtonDropdown/ButtonDropdown.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var stopPropagation = (event) => {
+  event.stopPropagation();
+  event.nativeEvent.stopImmediatePropagation();
+};
+var ButtonDropdownComponent = React3.forwardRef(
+  ({
+    children,
+    type = "default",
+    auto = false,
+    align = "center",
+    className = "",
+    disabled = false,
+    loading = false,
+    icon,
+    style,
+    ...props
+  }, ref) => {
+    const { SCALES } = use_scale_default();
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const theme = use_theme_default();
+    const colors = getColor(theme.palette, type);
+    const itemChildren = pickChild(children, ButtonDropdownItem_default)[1];
+    const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(
+      itemChildren,
+      "main",
+      true
+    );
+    const [visible, setVisible] = useState(false);
+    const clickHandler = useCallback(
+      (event) => {
+        event.preventDefault();
+        stopPropagation(event);
+        if (disabled || loading) return;
+        setVisible(!visible);
+      },
+      [disabled, loading, visible]
+    );
+    const initialValue = {
+      type,
+      auto,
+      disabled,
+      loading,
+      align,
+      close: () => setVisible(false)
+    };
+    const bgColor = useMemo2(() => {
+      if (disabled || loading) return theme.palette.accents_2;
+      return visible ? colors.hoverBgColor : colors.bgColor;
+    }, [
+      disabled,
+      loading,
+      theme.palette.accents_2,
+      visible,
+      colors.hoverBgColor,
+      colors.bgColor
+    ]);
+    const [paddingLeft, paddingRight] = [
+      auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+      auto ? SCALES.pr(1.15) : SCALES.pr(1.375)
+    ];
+    use_click_away_default(innerRef, () => setVisible(false));
+    const rootStyle = {
+      "--dropdown-radius": theme.layout.radius,
+      "--dropdown-border-color": type === "default" ? theme.palette.border : colors.borderColor,
+      "--bolio-ui-dropdown-height": SCALES.height(2.5),
+      "--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),
+      ...style
+    };
+    return /* @__PURE__ */ jsx3(ButtonDropdownContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: innerRef,
+        className: use_classes_default(ButtonDropdown_module_css_default.btnDropdown, className),
+        onClick: stopPropagation,
+        ...props,
+        style: rootStyle,
+        children: [
+          mainItemChildren,
+          /* @__PURE__ */ jsxs2("details", { className: ButtonDropdown_module_css_default.details, open: visible, children: [
+            /* @__PURE__ */ jsx3(
+              "summary",
+              {
+                className: ButtonDropdown_module_css_default.summary,
+                "aria-label": "More options",
+                onClick: clickHandler,
+                style: {
+                  color: colors.color,
+                  backgroundColor: bgColor,
+                  cursor: disabled || loading ? "not-allowed" : "pointer"
+                },
+                children: /* @__PURE__ */ jsx3("div", { className: ButtonDropdown_module_css_default.dropdownBox, children: icon ? /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: ButtonDropdown_module_css_default.dropdownIcon,
+                    style: {
+                      color: disabled || loading ? theme.palette.error : colors.color,
+                      height: SCALES.height(2.5),
+                      width: SCALES.height(2.5)
+                    },
+                    children: icon
+                  }
+                ) : /* @__PURE__ */ jsx3(
+                  Icon_default,
+                  {
+                    color: disabled || loading ? theme.palette.accents_4 : colors.color,
+                    height: SCALES.height(2.5)
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: ButtonDropdown_module_css_default.content,
+                style: {
+                  boxShadow: theme.expressiveness.shadowMedium,
+                  transform: "translateY(4px)",
+                  backgroundColor: type === "default" ? theme.palette.background : colors.bgColor
+                },
+                children: itemChildrenWithoutMain
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+ButtonDropdownComponent.displayName = "BolioUIButtonDropdown";
+var ButtonDropdown = with_scale_default(ButtonDropdownComponent);
+var ButtonDropdown_default = ButtonDropdown;
+
+// core/ButtonDropdown/index.ts
+ButtonDropdown_default.Item = ButtonDropdownItem_default;
+var ButtonDropdown_default2 = ButtonDropdown_default;
+
+export {
+  ButtonDropdown_default2 as ButtonDropdown_default
+};

package/esm/{chunk-VCTKX4AS.js → chunk-SZIX7BM5.js}

@@ -1,6 +1,6 @@
 // core/Themes/Presets/Shared.ts
 var defaultFont = {
-  sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  sans: 'var(--font-sans, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
   mono: "Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace",
   prism: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace'
 };

package/esm/chunk-T5BYQGC3.js

@@ -0,0 +1,79 @@
+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/Display/Display.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Display/Display.module.css.bolio-css-module-source
+var Display_module_css_default = { "display": "Display-module_display__CLUNC", "content": "Display-module_content__UhaMN", "caption": "Display-module_caption__hWuj5" };
+
+// core/Display/Display.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DisplayComponent = React.forwardRef(
+  ({
+    children,
+    caption = "",
+    shadow = false,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const classes = use_classes_default(Display_module_css_default.display, className);
+    const showShadow = useMemo(
+      () => shadow && theme.type !== "dark",
+      [theme.type, shadow]
+    );
+    const displayStyle = {
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(2.5)} ${SCALES.mr(0, "auto")} ${SCALES.mb(2.5)} ${SCALES.ml(0, "auto")}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...props, style: displayStyle, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: Display_module_css_default.content,
+          style: {
+            width: SCALES.width(1, "max-content"),
+            boxShadow: showShadow ? theme.expressiveness.shadowLarge : "none"
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: Display_module_css_default.caption,
+          style: {
+            color: theme.palette.accents_5,
+            margin: `${shadow ? "2.5em" : "1.3em"} auto 0`
+          },
+          children: caption
+        }
+      )
+    ] });
+  }
+);
+DisplayComponent.displayName = "BolioUIDisplay";
+var Display = with_scale_default(DisplayComponent);
+var Display_default = Display;
+
+// core/Display/index.ts
+var Display_default2 = Display_default;
+
+export {
+  Display_default2 as Display_default
+};

package/esm/chunk-T74YHCG6.js

@@ -0,0 +1,151 @@
+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/Toggle/Toggle.tsx
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+// core/Toggle/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: {
+      bg: palette.success
+    },
+    primary: {
+      bg: palette.primary
+    },
+    secondary: {
+      bg: palette.secondary
+    },
+    success: {
+      bg: palette.success
+    },
+    warning: {
+      bg: palette.warning
+    },
+    error: {
+      bg: palette.error
+    },
+    info: {
+      bg: palette.info
+    }
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Toggle/Toggle.module.css.bolio-css-module-source
+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";
+var ToggleComponent = React.forwardRef(
+  ({
+    initialChecked = false,
+    checked,
+    disabled = false,
+    onChange,
+    type = "default",
+    icon,
+    checkedIcon,
+    className = "",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [selfChecked, setSelfChecked] = useState(initialChecked);
+    const classes = use_classes_default(Toggle_module_css_default.toggle, {
+      [Toggle_module_css_default.checked]: selfChecked,
+      [Toggle_module_css_default.disabled]: disabled
+    });
+    const changeHandle = useCallback(
+      (ev) => {
+        if (disabled) return;
+        const selfEvent = {
+          target: {
+            checked: !selfChecked
+          },
+          stopPropagation: ev.stopPropagation,
+          preventDefault: ev.preventDefault,
+          nativeEvent: ev
+        };
+        setSelfChecked(!selfChecked);
+        if (onChange) onChange(selfEvent);
+      },
+      [disabled, selfChecked, onChange]
+    );
+    const { bg } = useMemo(
+      () => getColors(theme.palette, type),
+      [theme.palette, type]
+    );
+    useEffect(() => {
+      if (checked === void 0) return;
+      setSelfChecked(checked);
+    }, [checked]);
+    const labelStyle = {
+      cursor: disabled ? "not-allowed" : "pointer",
+      "--toggle-font-size": SCALES.font(1),
+      "--toggle-height": SCALES.height(1),
+      width: SCALES.width(1.75),
+      height: "var(--toggle-height)",
+      padding: `${SCALES.pt(0.1875)} ${SCALES.pr(0)} ${SCALES.pb(0.1875)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      "--toggle-focus-color": theme.palette.primary,
+      "--toggle-bg": theme.palette.accents_2,
+      "--toggle-inner-bg": theme.palette.accents_1,
+      "--toggle-disabled-border": theme.palette.accents_2,
+      "--toggle-disabled-bg": theme.palette.accents_1,
+      "--toggle-disabled-inner-bg": theme.palette.accents_2,
+      "--toggle-disabled-checked-border": theme.palette.accents_4,
+      "--toggle-disabled-checked-bg": theme.palette.accents_4,
+      "--toggle-checked-bg": bg,
+      "--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 }) })
+        ]
+      }
+    );
+  }
+);
+ToggleComponent.displayName = "BolioUIToggle";
+var Toggle = with_scale_default(ToggleComponent);
+var Toggle_default = Toggle;
+
+// core/Toggle/index.ts
+var Toggle_default2 = Toggle_default;
+
+export {
+  Toggle_default2 as Toggle_default
+};