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

package/esm/chunk-D7CNDAYB.js

@@ -0,0 +1,92 @@
+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/Divider/Divider.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Divider/Divider.module.css.bolio-css-module-source
+var Divider_module_css_default = { "divider": "Divider-module_divider__X6T0v", "text": "Divider-module_text__wMjmA", "start": "Divider-module_start__-GHJP", "end": "Divider-module_end__hg7v1" };
+
+// core/Divider/Divider.tsx
+import { jsx } from "react/jsx-runtime";
+var getColor = (type, palette) => {
+  const colors = {
+    default: palette.border,
+    primary: palette.primaryLight,
+    secondary: palette.secondaryLight,
+    success: palette.successLight,
+    warning: palette.warningLight,
+    error: palette.errorLight,
+    info: palette.infoLight,
+    dark: palette.foreground,
+    lite: palette.accents_1
+  };
+  return colors[type];
+};
+var DividerComponent = React.forwardRef(
+  ({
+    type = "default",
+    align = "center",
+    children,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const classes = use_classes_default("divider", Divider_module_css_default.divider, className);
+    const color = useMemo(
+      () => getColor(type, theme.palette),
+      [type, theme.palette]
+    );
+    const alignClassName = useMemo(() => {
+      if (!align || align === "center") return "";
+      if (align === "left" || align === "start") return Divider_module_css_default.start;
+      return Divider_module_css_default.end;
+    }, [align]);
+    const alignClasses = use_classes_default("text", Divider_module_css_default.text, alignClassName);
+    const textColor = type === "default" ? theme.palette.foreground : color;
+    const dividerStyle = {
+      backgroundColor: color,
+      fontSize: SCALES.font(1),
+      width: SCALES.width(1, "auto"),
+      height: SCALES.height(0.0625),
+      padding: `${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`,
+      margin: `${SCALES.mt(0.5)} ${SCALES.mr(0)} ${SCALES.mb(0.5)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    const textStyle = {
+      backgroundColor: theme.palette.background,
+      color: textColor
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: classes,
+        ...props,
+        style: dividerStyle,
+        children: children && /* @__PURE__ */ jsx("span", { className: alignClasses, style: textStyle, children })
+      }
+    );
+  }
+);
+DividerComponent.displayName = "BolioUIDivider";
+var Divider = with_scale_default(DividerComponent);
+var Divider_default = Divider;
+
+// core/Divider/index.ts
+var Divider_default2 = Divider_default;
+
+export {
+  Divider_default2 as Divider_default
+};

package/esm/chunk-DAZ2GHNP.js

@@ -0,0 +1,73 @@
+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/EmptyState/EmptyState.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/EmptyState/EmptyState.module.css.bolio-css-module-source
+var EmptyState_module_css_default = { "empty": "EmptyState-module_empty__EQSEi", "icon": "EmptyState-module_icon__NtFFj", "title": "EmptyState-module_title__yc9C1", "description": "EmptyState-module_description__1ZOka", "action": "EmptyState-module_action__mEtyt" };
+
+// core/EmptyState/EmptyState.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EmptyStateComponent = React.forwardRef(
+  ({ icon, title, description, action, className = "", style, ...props }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const emptyStyle = {
+      width: SCALES.width(1, "100%"),
+      padding: `${SCALES.pt(2)} ${SCALES.pr(1)} ${SCALES.pb(2)} ${SCALES.pl(1)}`,
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: use_classes_default(EmptyState_module_css_default.empty, className),
+        style: emptyStyle,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: EmptyState_module_css_default.icon,
+              style: {
+                color: theme.palette.accents_5,
+                backgroundColor: theme.palette.accents_2
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: EmptyState_module_css_default.title, children: title }),
+          description && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: EmptyState_module_css_default.description,
+              style: { color: theme.palette.accents_5 },
+              children: description
+            }
+          ),
+          action && /* @__PURE__ */ jsx("div", { className: EmptyState_module_css_default.action, children: action })
+        ]
+      }
+    );
+  }
+);
+EmptyStateComponent.displayName = "BolioUIEmptyState";
+var EmptyState = with_scale_default(EmptyStateComponent);
+var EmptyState_default = EmptyState;
+
+// core/EmptyState/index.ts
+var EmptyState_default2 = EmptyState_default;
+
+export {
+  EmptyState_default2 as EmptyState_default
+};

package/esm/chunk-DXHNQANX.js

@@ -0,0 +1,487 @@
+import {
+  use_default_props_default
+} from "./chunk-BSDZWWUS.js";
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+import {
+  addColorAlpha
+} from "./chunk-RZBEZ26A.js";
+import {
+  Loading_default
+} from "./chunk-LMDBE6T6.js";
+import {
+  useButtonGroupContext
+} from "./chunk-NDERASK2.js";
+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/Button/Button.tsx
+import React3, {
+  useRef as useRef2,
+  useState,
+  useMemo,
+  useImperativeHandle
+} from "react";
+
+// core/Button/ButtonDrip.tsx
+import { useEffect, useRef } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/ButtonDrip.module.css.bolio-css-module-source
+var ButtonDrip_module_css_default = { "drip": "ButtonDrip-module_drip__NtSRS", "expand": "ButtonDrip-module_expand__Lajj1" };
+
+// core/Button/ButtonDrip.tsx
+import { jsx } from "react/jsx-runtime";
+var ButtonDrip = ({
+  x = 0,
+  y = 0,
+  color,
+  onCompleted
+}) => {
+  const dripRef = useRef(null);
+  const top = Number.isNaN(+y) ? 0 : y - 10;
+  const left = Number.isNaN(+x) ? 0 : x - 10;
+  useEffect(() => {
+    const drip = dripRef.current;
+    if (!drip) return;
+    drip.addEventListener("animationend", onCompleted);
+    return () => drip.removeEventListener("animationend", onCompleted);
+  });
+  return /* @__PURE__ */ jsx("div", { ref: dripRef, className: ButtonDrip_module_css_default.drip, children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", style: { top, left }, children: /* @__PURE__ */ jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx("g", { fill: color, children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", rx: "10" }) }) }) }) });
+};
+ButtonDrip.displayName = "BolioUItButtonDrip";
+var ButtonDrip_default = ButtonDrip;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/ButtonLoading.module.css.bolio-css-module-source
+var ButtonLoading_module_css_default = { "btnLoading": "ButtonLoading-module_btnLoading__Rgay4" };
+
+// core/Button/ButtonLoading.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ButtonLoading({ color }) {
+  return /* @__PURE__ */ jsx2("div", { className: ButtonLoading_module_css_default.btnLoading, children: /* @__PURE__ */ jsx2(Loading_default, { color }) });
+}
+ButtonLoading.displayName = "BolioUIButtonLoading";
+var ButtonLoading_default = ButtonLoading;
+
+// core/Button/utils.tsx
+import React2 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/ButtonIcon.module.css.bolio-css-module-source
+var ButtonIcon_module_css_default = { "icon": "ButtonIcon-module_icon__faTDy" };
+
+// core/Button/ButtonIcon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ButtonIcon({ children, className = "", ...props }) {
+  const classes = use_classes_default(ButtonIcon_module_css_default.icon, className);
+  return /* @__PURE__ */ jsx3("span", { className: classes, ...props, children });
+}
+ButtonIcon.displayName = "BolioUIButtonIcon";
+var ButtonIcon_default = ButtonIcon;
+
+// core/Button/utils.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var getButtonChildrenWithIcon = (children, icons) => {
+  const { icon, iconRight } = icons;
+  const hasIcon = icon || iconRight;
+  const isRight = Boolean(iconRight);
+  if (!hasIcon) return /* @__PURE__ */ jsx4("div", { className: "text", children });
+  if (React2.Children.count(children) === 0) {
+    return /* @__PURE__ */ jsx4(ButtonIcon_default, { children: hasIcon });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isRight && /* @__PURE__ */ jsx4(ButtonIcon_default, { children: hasIcon }),
+    /* @__PURE__ */ jsx4("div", { className: "text", children }),
+    isRight && /* @__PURE__ */ jsx4(ButtonIcon_default, { children: hasIcon })
+  ] });
+};
+var filterPropsWithGroup = (props, config) => {
+  if (!config.isButtonGroup) return props;
+  return {
+    ...props,
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled
+  };
+};
+
+// core/Button/styles.ts
+var getButtonGhostColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "outline") : null;
+var getButtonLightColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "light") : null;
+var getButtonSubtleColors = (palette, type) => isSemanticColorType(type) ? getVariantColors(palette, type, "subtle") : null;
+var getButtonColors = (palette, props) => {
+  const { type, disabled, ghost, subtle } = props;
+  const colors = {
+    default: {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: palette.foreground
+    },
+    primary: {
+      bg: palette.primary,
+      border: palette.primary,
+      color: "#fff"
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.secondary,
+      color: "#fff"
+    },
+    success: {
+      bg: palette.success,
+      border: palette.success,
+      color: "#fff"
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.warning,
+      color: "#fff"
+    },
+    error: {
+      bg: palette.error,
+      border: palette.error,
+      color: "#fff"
+    },
+    info: {
+      bg: palette.info,
+      border: palette.info,
+      color: "#fff"
+    },
+    abort: {
+      bg: "transparent",
+      border: "transparent",
+      color: palette.accents_5
+    }
+  };
+  if (disabled)
+    return {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: palette.accents_4
+    };
+  const withoutLightType = type == null ? void 0 : type.replace("-light", "");
+  const isLight = type == null ? void 0 : type.endsWith("-light");
+  const defaultColor = colors.default;
+  if (ghost)
+    return getButtonGhostColors(palette, withoutLightType) || defaultColor;
+  if (subtle)
+    return getButtonSubtleColors(palette, withoutLightType) || defaultColor;
+  if (isLight)
+    return getButtonLightColors(palette, withoutLightType) || defaultColor;
+  return colors[withoutLightType] || defaultColor;
+};
+var getButtonGhostHoverColors = (palette, type) => {
+  const colors = {
+    primary: {
+      bg: palette.primary,
+      border: palette.background,
+      color: "white"
+    },
+    secondary: {
+      bg: palette.secondary,
+      border: palette.background,
+      color: "white"
+    },
+    success: {
+      bg: palette.success,
+      border: palette.background,
+      color: "white"
+    },
+    warning: {
+      bg: palette.warning,
+      border: palette.background,
+      color: "white"
+    },
+    error: {
+      bg: palette.error,
+      border: palette.background,
+      color: "white"
+    },
+    info: {
+      bg: palette.info,
+      border: palette.background,
+      color: "white"
+    }
+  };
+  const withoutLightType = type.replace("-light", "");
+  return colors[withoutLightType] || null;
+};
+var getButtonHoverColors = (palette, props) => {
+  const { type, disabled, loading, shadow, ghost } = props;
+  const defaultColor = getButtonColors(palette, props);
+  const alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
+  const colors = {
+    default: {
+      bg: palette.background,
+      border: palette.foreground
+    },
+    primary: {
+      bg: palette.background,
+      border: palette.primary
+    },
+    secondary: {
+      bg: palette.background,
+      border: palette.secondary
+    },
+    success: {
+      bg: palette.background,
+      border: palette.success
+    },
+    warning: {
+      bg: palette.background,
+      border: palette.warning
+    },
+    error: {
+      bg: palette.background,
+      border: palette.error
+    },
+    info: {
+      bg: palette.background,
+      border: palette.info
+    },
+    abort: {
+      bg: "transparent",
+      border: "transparent",
+      color: palette.accents_5
+    },
+    "primary-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "secondary-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "success-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "warning-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "error-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    },
+    "info-light": {
+      ...defaultColor,
+      bg: alphaBackground
+    }
+  };
+  if (disabled)
+    return {
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: "#ccc"
+    };
+  if (loading)
+    return {
+      ...defaultColor,
+      color: "transparent"
+    };
+  if (shadow) return defaultColor;
+  const hoverColor = (ghost ? getButtonGhostHoverColors(palette, type) : colors[type]) || colors.default;
+  return {
+    ...hoverColor,
+    color: hoverColor.color || hoverColor.border
+  };
+};
+var getButtonCursor = (disabled, loading) => {
+  if (disabled)
+    return {
+      cursor: "not-allowed",
+      events: "auto"
+    };
+  if (loading)
+    return {
+      cursor: "default",
+      events: "none"
+    };
+  return {
+    cursor: "pointer",
+    events: "auto"
+  };
+};
+var getButtonDripColor = (palette, props) => {
+  const { type, subtle } = props;
+  if (subtle) return addColorAlpha(getButtonColors(palette, props).color, 0.25);
+  const isLightHover = type == null ? void 0 : type.endsWith("light");
+  const hoverColors = getButtonHoverColors(palette, props);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_3, 0.65);
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Button/Button.module.css.bolio-css-module-source
+var Button_module_css_default = { "root": "Button-module_root__LhkYq", "spotlight": "Button-module_spotlight__D1OuR" };
+
+// core/Button/Button.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultProps = {
+  type: "default",
+  htmlType: "button",
+  ghost: false,
+  subtle: false,
+  rounded: false,
+  loading: false,
+  shadow: false,
+  auto: false,
+  effect: true,
+  spotlight: false,
+  disabled: false,
+  className: ""
+};
+var ButtonComponent = React3.forwardRef((btnProps, ref) => {
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const buttonRef = useRef2(null);
+  useImperativeHandle(ref, () => buttonRef.current);
+  const [dripShow, setDripShow] = useState(false);
+  const [dripX, setDripX] = useState(0);
+  const [dripY, setDripY] = useState(0);
+  const groupConfig = useButtonGroupContext();
+  const filteredProps = filterPropsWithGroup(
+    use_default_props_default(btnProps, defaultProps),
+    groupConfig
+  );
+  const {
+    children,
+    disabled,
+    type,
+    loading,
+    shadow,
+    ghost,
+    subtle,
+    rounded,
+    effect,
+    spotlight,
+    onClick,
+    auto,
+    icon,
+    htmlType,
+    iconRight,
+    className,
+    ...props
+  } = filteredProps;
+  const { bg, border, color } = useMemo(
+    () => getButtonColors(theme.palette, filteredProps),
+    [theme.palette, filteredProps]
+  );
+  const { cursor, events } = useMemo(
+    () => getButtonCursor(disabled, loading),
+    [disabled, loading]
+  );
+  const dripColor = useMemo(
+    () => getButtonDripColor(theme.palette, filteredProps),
+    [theme.palette, filteredProps]
+  );
+  const dripCompletedHandle = () => {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+  const clickHandler = (event) => {
+    if (disabled || loading) return;
+    const showDrip = effect;
+    if (showDrip && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+    if (onClick) onClick(event);
+  };
+  const childrenWithIcon = useMemo(
+    () => getButtonChildrenWithIcon(children, {
+      icon,
+      iconRight
+    }),
+    [children, icon, iconRight]
+  );
+  const iconOnly = Boolean(icon || iconRight) && React3.Children.count(children) === 0;
+  const [paddingLeft, paddingRight] = iconOnly ? [SCALES.pl(0), SCALES.pr(0)] : [SCALES.pl(1.15), SCALES.pr(1.15)];
+  const inGroup = groupConfig.isButtonGroup;
+  const dynamicStyle = {
+    borderRadius: inGroup ? void 0 : rounded ? "25px" : theme.layout.radius,
+    fontSize: SCALES.font(0.875),
+    color,
+    backgroundColor: bg,
+    border: inGroup && ghost ? void 0 : `1px solid ${border}`,
+    cursor,
+    pointerEvents: events,
+    boxShadow: shadow ? "0 4px 10px 0" + bg : "none",
+    "--bolio-ui-button-height": SCALES.height(2.5),
+    "--bolio-ui-button-color": color,
+    "--bolio-ui-button-bg": bg,
+    minWidth: iconOnly ? SCALES.width(2.5) : auto ? "min-content" : SCALES.width(10.5),
+    width: iconOnly ? SCALES.width(2.5) : auto ? "auto" : "initial",
+    height: SCALES.height(2.5),
+    padding: `${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    ...props.style
+  };
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      ref: buttonRef,
+      type: htmlType,
+      className: use_classes_default(
+        "btn",
+        Button_module_css_default.root,
+        { [Button_module_css_default.spotlight]: spotlight },
+        className
+      ),
+      disabled,
+      onClick: clickHandler,
+      ...props,
+      onMouseMove: (event) => {
+        var _a;
+        if (spotlight) {
+          const rect = event.currentTarget.getBoundingClientRect();
+          event.currentTarget.style.setProperty(
+            "--x",
+            `${event.clientX - rect.left}px`
+          );
+          event.currentTarget.style.setProperty(
+            "--y",
+            `${event.clientY - rect.top}px`
+          );
+        }
+        (_a = props.onMouseMove) == null ? void 0 : _a.call(props, event);
+      },
+      style: dynamicStyle,
+      children: [
+        loading && /* @__PURE__ */ jsx5(ButtonLoading_default, { color }),
+        childrenWithIcon,
+        dripShow && /* @__PURE__ */ jsx5(
+          ButtonDrip_default,
+          {
+            x: dripX,
+            y: dripY,
+            color: dripColor,
+            onCompleted: dripCompletedHandle
+          }
+        )
+      ]
+    }
+  );
+});
+ButtonComponent.displayName = "BolioUIButton";
+var Button = with_scale_default(ButtonComponent);
+var Button_default = Button;
+
+// core/Button/index.ts
+var Button_default2 = Button_default;
+
+export {
+  Button_default2 as Button_default
+};