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

package/esm/chunk-RRFCNZ2T.js

@@ -0,0 +1,70 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+
+// core/Keyboard/Keyboard.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Keyboard/Keyboard.module.css.bolio-css-module-source
+var Keyboard_module_css_default = { "kbd": "Keyboard-module_kbd__Xnr1C" };
+
+// core/Keyboard/Keyboard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var KeyboardComponent = React.forwardRef(
+  ({
+    command = false,
+    shift = false,
+    option = false,
+    ctrl = false,
+    children,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const kbdStyle = {
+      color: theme.palette.accents_5,
+      backgroundColor: theme.palette.accents_1,
+      fontFamily: theme.font.sans,
+      borderRadius: theme.layout.radius,
+      border: `1px solid ${theme.palette.accents_2}`,
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "fit-content"),
+      height: SCALES.height(1, "auto"),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0.34)} ${SCALES.pb(0)} ${SCALES.pl(0.34)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "kbd",
+      {
+        ref,
+        className: `${Keyboard_module_css_default.kbd} ${className}`.trim(),
+        ...props,
+        style: kbdStyle,
+        children: [
+          command && /* @__PURE__ */ jsx("span", { children: "\u2318" }),
+          shift && /* @__PURE__ */ jsx("span", { children: "\u21E7" }),
+          option && /* @__PURE__ */ jsx("span", { children: "\u2325" }),
+          ctrl && /* @__PURE__ */ jsx("span", { children: "\u2303" }),
+          children && /* @__PURE__ */ jsx("span", { children })
+        ]
+      }
+    );
+  }
+);
+KeyboardComponent.displayName = "BolioUIKeyboard";
+var Keyboard = with_scale_default(KeyboardComponent);
+var Keyboard_default = Keyboard;
+
+// core/Keyboard/index.ts
+var Keyboard_default2 = Keyboard_default;
+
+export {
+  Keyboard_default2 as Keyboard_default
+};

package/esm/chunk-RZBEZ26A.js

@@ -0,0 +1,38 @@
+// core/utils/color.ts
+var hexToRgb = (color) => {
+  const fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const full = color.replace(
+    fullReg,
+    (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`
+  );
+  const values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+  if (!values) {
+    throw new Error(`Bolio UI: Unsupported ${color} color.`);
+  }
+  return [
+    Number.parseInt(values[1], 16),
+    Number.parseInt(values[2], 16),
+    Number.parseInt(values[3], 16)
+  ];
+};
+var colorToRgbValues = (color) => {
+  if (color.charAt(0) === "#") return hexToRgb(color);
+  const safeColor = color.replace(/ /g, "");
+  const colorType = color.substr(0, 4);
+  const regArray = safeColor.match(/\((.+)\)/);
+  if (!colorType.startsWith("rgb") || !regArray) {
+    console.log(color);
+    throw new Error(`Bolio UI: Only support ["RGB", "RGBA", "HEX"] color.`);
+  }
+  return regArray[1].split(",").map((str) => Number.parseFloat(str));
+};
+var addColorAlpha = (color, alpha) => {
+  if (!/^#|rgb|RGB/.test(color)) return color;
+  const [r, g, b] = colorToRgbValues(color);
+  const safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+  return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
+};
+
+export {
+  addColorAlpha
+};

package/esm/chunk-RZSTPJ76.js

@@ -0,0 +1,49 @@
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Col/Col.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Col/Col.module.css.bolio-css-module-source
+var Col_module_css_default = { "col": "Col-module_col__lASNX" };
+
+// core/Col/Col.tsx
+import { jsx } from "react/jsx-runtime";
+var Col = React.forwardRef(
+  ({
+    component = "div",
+    children,
+    span = 12,
+    offset = 0,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const Component = component;
+    const colStyle = {
+      width: `${100 / 12 * span}%`,
+      marginLeft: `${100 / 12 * offset}%`,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: use_classes_default("col", Col_module_css_default.col, className),
+        ...props,
+        style: colStyle,
+        children
+      }
+    );
+  }
+);
+Col.displayName = "BolioUICol";
+var Col_default = Col;
+
+// core/Col/index.ts
+var Col_default2 = Col_default;
+
+export {
+  Col_default2 as Col_default
+};

package/esm/chunk-SDC2VF5K.js

@@ -0,0 +1,54 @@
+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/Description/Description.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Description/Description.module.css.bolio-css-module-source
+var Description_module_css_default = { "description": "Description-module_description__1FMVT" };
+
+// core/Description/Description.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DescriptionComponent = React.forwardRef(
+  ({
+    title = "Title",
+    content = "",
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const classes = use_classes_default(Description_module_css_default.description, className);
+    const descriptionStyle = {
+      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("dl", { ref, className: classes, ...props, style: descriptionStyle, children: [
+      /* @__PURE__ */ jsx("dt", { style: { color: theme.palette.accents_5 }, children: title }),
+      /* @__PURE__ */ jsx("dd", { style: { color: theme.palette.foreground }, children: content })
+    ] });
+  }
+);
+DescriptionComponent.displayName = "BolioUIDescription";
+var Description = with_scale_default(DescriptionComponent);
+var Description_default = Description;
+
+// core/Description/index.ts
+var Description_default2 = Description_default;
+
+export {
+  Description_default2 as Description_default
+};

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
+};