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

package/esm/chunk-NEG5UNM6.js

@@ -0,0 +1,451 @@
+import {
+  Textarea_default
+} from "./chunk-ISLUC2SD.js";
+import {
+  InputBlockLabel_default
+} from "./chunk-UOGCO6CV.js";
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+import {
+  use_default_props_default
+} from "./chunk-BSDZWWUS.js";
+import {
+  useScale,
+  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/Input/Input.tsx
+import React4, {
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// core/Input/InputLabel.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Input/InputLabel.module.css.bolio-css-module-source
+var InputLabel_module_css_default = { "span": "InputLabel-module_span__ek5IE" };
+
+// core/Input/InputLabel.tsx
+import { jsx } from "react/jsx-runtime";
+function InputLabel({ children, isRight }) {
+  const theme = use_theme_default();
+  const labelStyle = {
+    padding: `0 ${theme.layout.gapHalf}`,
+    color: theme.palette.accents_4,
+    backgroundColor: theme.palette.accents_1,
+    borderTopLeftRadius: isRight ? 0 : theme.layout.radius,
+    borderBottomLeftRadius: isRight ? 0 : theme.layout.radius,
+    borderTopRightRadius: isRight ? theme.layout.radius : 0,
+    borderBottomRightRadius: isRight ? theme.layout.radius : 0,
+    borderTop: `1px solid ${theme.palette.border}`,
+    borderBottom: `1px solid ${theme.palette.border}`,
+    borderLeft: isRight ? "none" : `1px solid ${theme.palette.border}`,
+    borderRight: isRight ? `1px solid ${theme.palette.border}` : "none"
+  };
+  return /* @__PURE__ */ jsx("span", { className: InputLabel_module_css_default.span, style: labelStyle, children });
+}
+var MemoInputLabel = React.memo(InputLabel);
+var InputLabel_default = MemoInputLabel;
+
+// core/Input/InputIcon.tsx
+import React2 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Input/InputIcon.module.css.bolio-css-module-source
+var InputIcon_module_css_default = { "inputIcon": "InputIcon-module_inputIcon__DYoco" };
+
+// core/Input/InputIcon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function InputIconComponent({ icon, clickable, onClick }) {
+  const Component = clickable ? "button" : "span";
+  return /* @__PURE__ */ jsx2(
+    Component,
+    {
+      type: clickable ? "button" : void 0,
+      className: InputIcon_module_css_default.inputIcon,
+      onClick,
+      style: {
+        cursor: clickable ? "pointer" : "default",
+        pointerEvents: clickable ? "auto" : "none"
+      },
+      children: icon
+    }
+  );
+}
+InputIconComponent.displayName = "BolioUIInputIcon";
+var InputIcon = React2.memo(InputIconComponent);
+var InputIcon_default = InputIcon;
+
+// core/Input/InputIconClear.tsx
+import React3 from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Input/InputIconClear.module.css.bolio-css-module-source
+var InputIconClear_module_css_default = { "clearIcon": "InputIconClear-module_clearIcon__2ODYc", "visible": "InputIconClear-module_visible__5nUZb", "svg": "InputIconClear-module_svg__g1elY" };
+
+// core/Input/InputIconClear.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function InputIconClear({ onClick, disabled, visible, hoverColor }) {
+  const classes = use_classes_default(InputIconClear_module_css_default.clearIcon, { [InputIconClear_module_css_default.visible]: visible });
+  const clickHandler = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    if (onClick) onClick(event);
+  };
+  const iconStyle = {
+    cursor: disabled ? "not-allowed" : "pointer",
+    "--clear-icon-hover-color": hoverColor
+  };
+  return /* @__PURE__ */ jsx3("div", { onClick: clickHandler, className: classes, style: iconStyle, children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      className: InputIconClear_module_css_default.svg,
+      children: [
+        /* @__PURE__ */ jsx3("path", { d: "M18 6L6 18" }),
+        /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12" })
+      ]
+    }
+  ) });
+}
+var MemoInputIconClear = React3.memo(InputIconClear);
+var InputIconClear_default = MemoInputIconClear;
+
+// core/Input/InputProps.ts
+var defaultProps = {
+  disabled: false,
+  readOnly: false,
+  clearable: false,
+  filled: false,
+  light: false,
+  ghost: false,
+  subtle: false,
+  iconClickable: false,
+  type: "default",
+  htmlType: "text",
+  autoComplete: "off",
+  className: "",
+  placeholder: "",
+  initialValue: ""
+};
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Input/Input.module.css.bolio-css-module-source
+var Input_module_css_default = { "withLabel": "Input-module_withLabel__iIKYH", "inputContainer": "Input-module_inputContainer__ZTwjt", "inputWrapper": "Input-module_inputWrapper__WpYTp", "leftLabel": "Input-module_leftLabel__7MeVJ", "rightLabel": "Input-module_rightLabel__TmWT6", "disabled": "Input-module_disabled__EPhPp", "input": "Input-module_input__hCma0", "hover": "Input-module_hover__Gq-MR", "leftIcon": "Input-module_leftIcon__icHNG", "rightIcon": "Input-module_rightIcon__5Mw-X", "floating": "Input-module_floating__7ZNyB" };
+
+// core/Input/Input.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var simulateChangeEvent = (el, event) => {
+  return {
+    ...event,
+    target: el,
+    currentTarget: el
+  };
+};
+var InputComponent = React4.forwardRef((inputComponentProps, ref) => {
+  const {
+    label,
+    labelRight,
+    type,
+    htmlType,
+    icon,
+    iconRight,
+    iconClickable,
+    onIconClick,
+    initialValue,
+    onChange,
+    readOnly,
+    value,
+    onClearClick,
+    clearable,
+    className,
+    onBlur,
+    onFocus,
+    autoComplete,
+    placeholder,
+    children,
+    disabled,
+    rounded,
+    filled,
+    light,
+    ghost,
+    subtle,
+    backgroundColor,
+    borderColor,
+    hoverBorder,
+    error,
+    errorMessage,
+    floating,
+    ...props
+  } = use_default_props_default(inputComponentProps, defaultProps);
+  const theme = use_theme_default();
+  const { SCALES } = use_scale_default();
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  const generatedId = useId();
+  const inputId = props.id || generatedId;
+  const errorId = `${inputId}-error`;
+  const describedBy = [props["aria-describedby"], error && errorMessage ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const [selfValue, setSelfValue] = useState("");
+  const [hover, setHover] = useState(false);
+  const isControlledComponent = useMemo(() => value !== void 0, [value]);
+  const labelClasses = useMemo(
+    () => labelRight ? Input_module_css_default.rightLabel : label ? Input_module_css_default.leftLabel : "",
+    [label, labelRight]
+  );
+  const iconClasses = useMemo(
+    () => iconRight ? Input_module_css_default.rightIcon : icon ? Input_module_css_default.leftIcon : "",
+    [icon, iconRight]
+  );
+  const colors = useMemo(
+    () => getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    }),
+    [theme.palette, type, disabled, filled, light, ghost, subtle]
+  );
+  const changeHandler = (event) => {
+    if (disabled || readOnly) return;
+    setSelfValue(event.target.value);
+    if (onChange) onChange(event);
+  };
+  const clearHandler = (event) => {
+    setSelfValue("");
+    if (onClearClick) onClearClick(event);
+    if (!inputRef.current) return;
+    const changeEvent = simulateChangeEvent(inputRef.current, event);
+    changeEvent.target.value = "";
+    if (onChange) onChange(changeEvent);
+    inputRef.current.focus();
+  };
+  const focusHandler = (e) => {
+    setHover(true);
+    if (onFocus) onFocus(e);
+  };
+  const blurHandler = (e) => {
+    setHover(false);
+    if (onBlur) onBlur(e);
+  };
+  const iconClickHandler = (e) => {
+    if (disabled) return;
+    if (onIconClick) onIconClick(e);
+  };
+  const iconProps = {
+    clickable: iconClickable,
+    onClick: iconClickHandler
+  };
+  useEffect(() => {
+    if (isControlledComponent) {
+      setSelfValue(value);
+    }
+  }, [isControlledComponent, value]);
+  const controlledValue = isControlledComponent ? { value: selfValue } : { defaultValue: initialValue };
+  const inputProps = {
+    ...props,
+    ...controlledValue
+  };
+  const withLabelStyle = {
+    "--input-height": SCALES.height(2.25),
+    fontSize: SCALES.font(0.875),
+    width: SCALES.width(1, "initial"),
+    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)}`
+  };
+  const inputWrapperStyle = {
+    color: colors.iconColor,
+    "--input-radius": rounded ? "25px" : theme.layout.radius,
+    "--input-border": borderColor ? borderColor : colors.borderColor,
+    "--input-bg": backgroundColor ? backgroundColor : colors.bgColor,
+    "--input-hover-border": hoverBorder ? hoverBorder : colors.hoverBorder,
+    "--input-hover-bg": backgroundColor ? backgroundColor : colors.hoverBgColor,
+    "--input-focus-border": colors.focusBorder
+  };
+  const inputStyle = {
+    fontSize: SCALES.font(0.875),
+    color: colors.color,
+    "--input-placeholder-color": colors.placeholderColor,
+    "--input-autofill-bg": colors.bgColor === "transparent" ? theme.palette.background : colors.bgColor,
+    "--input-color": colors.color
+  };
+  const floatingLabel = floating && children;
+  return /* @__PURE__ */ jsxs2("div", { className: Input_module_css_default.withLabel, style: withLabelStyle, children: [
+    children && !floatingLabel && /* @__PURE__ */ jsx4(InputBlockLabel_default, { htmlFor: inputId, children }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: use_classes_default(Input_module_css_default.inputContainer, className),
+        style: { width: SCALES.width(1, "initial") },
+        children: [
+          label && /* @__PURE__ */ jsx4(InputLabel_default, { children: label }),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: use_classes_default(
+                Input_module_css_default.inputWrapper,
+                { [Input_module_css_default.hover]: hover, [Input_module_css_default.disabled]: disabled },
+                labelClasses
+              ),
+              style: inputWrapperStyle,
+              children: [
+                icon && /* @__PURE__ */ jsx4(InputIcon_default, { icon, ...iconProps }),
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    type: htmlType,
+                    ref: inputRef,
+                    className: use_classes_default(
+                      Input_module_css_default.input,
+                      { [Input_module_css_default.disabled]: disabled },
+                      iconClasses
+                    ),
+                    placeholder: floatingLabel ? " " : placeholder,
+                    disabled,
+                    readOnly,
+                    onFocus: focusHandler,
+                    onBlur: blurHandler,
+                    onChange: changeHandler,
+                    autoComplete,
+                    ...inputProps,
+                    id: inputId,
+                    "aria-invalid": error || void 0,
+                    "aria-describedby": describedBy,
+                    style: {
+                      ...inputStyle,
+                      ...inputProps.style
+                    }
+                  }
+                ),
+                clearable && /* @__PURE__ */ jsx4(
+                  InputIconClear_default,
+                  {
+                    visible: Boolean(
+                      inputRef.current && inputRef.current.value !== ""
+                    ),
+                    disabled: disabled || readOnly,
+                    hoverColor: colors.color,
+                    onClick: clearHandler
+                  }
+                ),
+                floatingLabel && /* @__PURE__ */ jsx4(
+                  "label",
+                  {
+                    htmlFor: inputId,
+                    className: Input_module_css_default.floating,
+                    style: {
+                      left: icon ? "2.5em" : "0.75em",
+                      "--input-floating-bg": colors.bgColor === "transparent" ? theme.palette.background : colors.bgColor
+                    },
+                    children
+                  }
+                ),
+                iconRight && /* @__PURE__ */ jsx4(InputIcon_default, { icon: iconRight, ...iconProps })
+              ]
+            }
+          ),
+          labelRight && /* @__PURE__ */ jsx4(InputLabel_default, { isRight: true, children: labelRight })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx4(InputBlockLabel_default, { error, id: errorId, children: errorMessage })
+  ] });
+});
+InputComponent.displayName = "BolioUIInput";
+var Input = with_scale_default(InputComponent);
+var Input_default = Input;
+
+// core/Input/Password.tsx
+import React6, { useImperativeHandle as useImperativeHandle2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+
+// core/Input/PasswordIcon.tsx
+import React5 from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function PasswordIcon({ visible }) {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fill: "none",
+      shapeRendering: "geometricPrecision",
+      style: { color: "currentColor" },
+      role: "img",
+      "aria-label": visible ? "Hide password" : "Show password",
+      children: !visible ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx5("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" })
+      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx5("path", { d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24" }),
+        /* @__PURE__ */ jsx5("path", { d: "M1 1l22 22" })
+      ] })
+    }
+  );
+}
+var MemoPasswordIcon = React5.memo(PasswordIcon);
+var PasswordIcon_default = MemoPasswordIcon;
+
+// core/Input/Password.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var InputPasswordComponent = React6.forwardRef(
+  ({
+    hideToggle = false,
+    children,
+    ...props
+  }, ref) => {
+    const { getAllScaleProps } = useScale();
+    const inputRef = useRef2(null);
+    const [visible, setVisible] = useState2(false);
+    useImperativeHandle2(ref, () => inputRef.current);
+    const iconClickHandler = () => {
+      setVisible((v) => !v);
+      if (inputRef && inputRef.current) {
+        inputRef.current.focus();
+      }
+    };
+    const inputProps = {
+      ...props,
+      ref: inputRef,
+      iconClickable: true,
+      onIconClick: iconClickHandler,
+      htmlType: visible ? "text" : "password"
+    };
+    const icon = useMemo2(() => {
+      if (hideToggle) return null;
+      return /* @__PURE__ */ jsx6(PasswordIcon_default, { visible });
+    }, [hideToggle, visible]);
+    return /* @__PURE__ */ jsx6(Input_default, { iconRight: icon, ...getAllScaleProps(), ...inputProps, children });
+  }
+);
+InputPasswordComponent.displayName = "BolioUIInputPassword";
+var InputPassword = with_scale_default(InputPasswordComponent);
+var Password_default = InputPassword;
+
+// core/Input/index.ts
+Input_default.Textarea = Textarea_default;
+Input_default.Password = Password_default;
+var Input_default2 = Input_default;
+
+export {
+  Input_default2 as Input_default
+};

package/esm/chunk-NLJHFKAN.js

@@ -0,0 +1,165 @@
+import {
+  useProportions
+} from "./chunk-UF4IKEU2.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/Progress/Progress.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Progress/Progress.module.css.bolio-css-module-source
+var Progress_module_css_default = { "progress": "Progress-module_progress__w5vIG", "fixed": "Progress-module_fixed__jy1Ih", "inner": "Progress-module_inner__TgWMs", "segments": "Progress-module_segments__qfhwZ", "segment": "Progress-module_segment__qcUp2", "circular": "Progress-module_circular__RjAuX", "arc": "Progress-module_arc__2izVZ" };
+
+// core/Progress/Progress.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getCurrentColor = (ratio, palette, type, colors = {}) => {
+  const defaultColors = {
+    default: palette.foreground,
+    primary: palette.primary,
+    success: palette.success,
+    secondary: palette.secondary,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  const colorKeys = Object.keys(colors);
+  if (colorKeys.length === 0) return defaultColors[type];
+  const customColorKey = colorKeys.find((key) => ratio <= +key);
+  if (!customColorKey || Number.isNaN(+customColorKey))
+    return defaultColors[type];
+  return colors[+customColorKey];
+};
+var ProgressComponent = React.forwardRef(
+  ({
+    value = 0,
+    max = 100,
+    className = "",
+    type = "default",
+    colors,
+    fixedTop = false,
+    fixedBottom = false,
+    segments,
+    circular = false,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const percentValue = useProportions(value, max);
+    const currentColor = getCurrentColor(
+      percentValue,
+      theme.palette,
+      type,
+      colors
+    );
+    const fixed = fixedTop || fixedBottom;
+    const classes = use_classes_default(
+      Progress_module_css_default.progress,
+      { [Progress_module_css_default.fixed]: fixed },
+      className
+    );
+    const hidden = /* @__PURE__ */ jsx("progress", { className, value, max, ...props });
+    if (circular) {
+      const size = SCALES.width(1, "3em");
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: `${Progress_module_css_default.circular} ${className}`.trim(),
+          style: {
+            width: size,
+            height: size,
+            margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", width: "100%", height: "100%", children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  strokeWidth: "3",
+                  stroke: theme.palette.accents_2
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: Progress_module_css_default.arc,
+                  cx: "18",
+                  cy: "18",
+                  r: "16",
+                  fill: "none",
+                  strokeWidth: "3",
+                  strokeLinecap: "round",
+                  stroke: currentColor,
+                  pathLength: 100,
+                  strokeDasharray: `${percentValue} 100`,
+                  children: /* @__PURE__ */ jsx("title", { children: `${percentValue}%` })
+                }
+              )
+            ] }),
+            hidden
+          ]
+        }
+      );
+    }
+    const progressStyle = {
+      backgroundColor: segments ? "transparent" : theme.palette.accents_2,
+      borderRadius: theme.layout.radius,
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(0.625),
+      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)}`,
+      top: fixed ? fixedTop ? 0 : "unset" : void 0,
+      bottom: fixed ? fixedBottom ? 0 : "unset" : void 0,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: classes, style: progressStyle, children: [
+      segments ? /* @__PURE__ */ jsx("div", { className: Progress_module_css_default.segments, title: `${percentValue}%`, children: [...Array(Math.max(1, Math.floor(segments)))].map((_, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: Progress_module_css_default.segment,
+          style: {
+            borderRadius: theme.layout.radius,
+            backgroundColor: index < Math.round(percentValue / 100 * segments) ? currentColor : theme.palette.accents_2
+          }
+        },
+        index
+      )) }) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: Progress_module_css_default.inner,
+          title: `${percentValue}%`,
+          style: {
+            borderRadius: theme.layout.radius,
+            backgroundColor: currentColor,
+            width: `${percentValue}%`
+          }
+        }
+      ),
+      hidden
+    ] });
+  }
+);
+ProgressComponent.displayName = "BolioUIProgress";
+var Progress = with_scale_default(ProgressComponent);
+var Progress_default = Progress;
+
+// core/Progress/index.ts
+var Progress_default2 = Progress_default;
+
+export {
+  Progress_default2 as Progress_default
+};