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

package/esm/chunk-IUZV5Y27.js

@@ -0,0 +1,370 @@
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.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/Slider/Slider.tsx
+import React3, {
+  useCallback,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// core/utils/use-drag.ts
+import { useEffect, useRef } from "react";
+var useDrag = (elementRef, draggingHandler = () => {
+}, dragStartHandler = () => {
+}, dragEndHandler = () => {
+}) => {
+  const onDragging = useRef(false);
+  const [, setStartX, startXRef] = use_current_state_default(0);
+  const [, setCurrentX, currentXRef] = use_current_state_default(0);
+  const draggingRef = use_latest_default(draggingHandler);
+  const dragStartRef = use_latest_default(dragStartHandler);
+  const dragEndRef = use_latest_default(dragEndHandler);
+  useEffect(() => {
+    const element = elementRef && elementRef.current;
+    if (!element) return;
+    const getCustomEvent = () => ({
+      startX: startXRef.current,
+      currentX: currentXRef.current
+    });
+    const elementMouseDownHandler = (event) => {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      onDragging.current = true;
+      setStartX(element.getBoundingClientRect().x);
+      dragStartRef.current(getCustomEvent());
+    };
+    const globalDraggingHandler = (event) => {
+      if (!onDragging.current) return;
+      if (event.type === "touchmove") {
+        setCurrentX(event.changedTouches[0].clientX);
+      } else {
+        setCurrentX(event.clientX);
+      }
+      draggingRef.current(getCustomEvent());
+    };
+    const globalDragEndHandler = () => {
+      if (!onDragging.current) return;
+      onDragging.current = false;
+      dragEndRef.current(getCustomEvent());
+    };
+    element.addEventListener("mousedown", elementMouseDownHandler);
+    element.addEventListener("touchstart", elementMouseDownHandler);
+    window.addEventListener("mousemove", globalDraggingHandler);
+    window.addEventListener("touchmove", globalDraggingHandler);
+    window.addEventListener("mouseup", globalDragEndHandler);
+    window.addEventListener("touchend", globalDragEndHandler);
+    return () => {
+      window.removeEventListener("mousemove", globalDraggingHandler);
+      window.removeEventListener("touchmove", globalDraggingHandler);
+      window.removeEventListener("mouseup", globalDragEndHandler);
+      window.removeEventListener("touchend", globalDragEndHandler);
+      element.removeEventListener("mousedown", elementMouseDownHandler);
+      element.removeEventListener("touchstart", elementMouseDownHandler);
+    };
+  }, [
+    elementRef,
+    startXRef,
+    currentXRef,
+    setStartX,
+    setCurrentX,
+    draggingRef,
+    dragStartRef,
+    dragEndRef
+  ]);
+};
+var use_drag_default = useDrag;
+
+// core/Slider/SliderDot.tsx
+import React from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Slider/SliderDot.module.css.bolio-css-module-source
+var SliderDot_module_css_default = { "dot": "SliderDot-module_dot__1VxCn", "disabled": "SliderDot-module_disabled__w2Xki", "click": "SliderDot-module_click__QZGR-" };
+
+// core/Slider/SliderDot.tsx
+import { jsx } from "react/jsx-runtime";
+var SliderDot = React.forwardRef(
+  ({
+    children,
+    disabled = false,
+    left = 0,
+    isClick = false,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const classes = use_classes_default(SliderDot_module_css_default.dot, {
+      [SliderDot_module_css_default.disabled]: disabled,
+      [SliderDot_module_css_default.click]: isClick
+    });
+    const dotStyle = {
+      left: `${left}%`,
+      backgroundColor: disabled ? theme.palette.accents_2 : theme.palette.primary,
+      color: disabled ? theme.palette.accents_4 : theme.palette.background,
+      "--slider-dot-focus-color": theme.palette.foreground,
+      ...style
+    };
+    return /* @__PURE__ */ jsx("div", { className: classes, ref, ...props, style: dotStyle, children });
+  }
+);
+SliderDot.displayName = "BolioUISliderDot";
+var SliderDot_default = SliderDot;
+
+// core/Slider/SliderMark.tsx
+import { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Slider/SliderMark.module.css.bolio-css-module-source
+var SliderMark_module_css_default = { "span": "SliderMark-module_span__gKYKM" };
+
+// core/Slider/SliderMark.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var getMarks = (min, max, step) => {
+  const value = max - min;
+  const roundFunc = !(value % step) ? Math.floor : Math.ceil;
+  const count = roundFunc(value / step) - 1;
+  if (count >= 99) return [];
+  return [...new Array(count)].map(
+    (_, index) => step * (index + 1) * 100 / value
+  );
+};
+function SliderMark({ step, max, min }) {
+  const theme = use_theme_default();
+  const marks = useMemo(() => getMarks(min, max, step), [min, max, step]);
+  return /* @__PURE__ */ jsx2(Fragment, { children: marks.map((val, index) => /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: SliderMark_module_css_default.span,
+      style: { left: `${val}%`, backgroundColor: theme.palette.background }
+    },
+    `${val}-${index}`
+  )) });
+}
+var SliderMark_default = SliderMark;
+
+// core/Slider/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: {
+      bg: palette.accents_8
+    },
+    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/Slider/Slider.module.css.bolio-css-module-source
+var Slider_module_css_default = { "slider": "Slider-module_slider__Mn7eI" };
+
+// core/Slider/Slider.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var getRefWidth = (elementRef) => {
+  if (!elementRef || !elementRef.current) return 0;
+  const rect = elementRef.current.getBoundingClientRect();
+  return rect.width || rect.right - rect.left;
+};
+var getValue = (max, min, step, offsetX, railWidth) => {
+  if (offsetX < 0) return min;
+  if (offsetX > railWidth) return max;
+  const widthForEachStep = railWidth / (max - min) * step;
+  if (widthForEachStep <= 0) return min;
+  const slideDistance = Math.round(offsetX / widthForEachStep) * step + min;
+  return Number.isInteger(slideDistance) ? slideDistance : Number.parseFloat(slideDistance.toFixed(1));
+};
+var SliderComponent = React3.forwardRef(
+  ({
+    hideValue = false,
+    disabled = false,
+    type = "default",
+    step = 1,
+    max = 100,
+    min = 0,
+    initialValue = 0,
+    value: customValue,
+    onChange,
+    className = "",
+    showMarkers = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [value, setValue] = useState(initialValue);
+    const [, setSliderWidth, sideWidthRef] = use_current_state_default(0);
+    const [, setLastDargOffset, lastDargOffsetRef] = use_current_state_default(0);
+    const [isClick, setIsClick] = useState(false);
+    const sliderRef = useRef2(null);
+    useImperativeHandle(ref, () => sliderRef.current);
+    const dotRef = useRef2(null);
+    const currentRatio = useMemo2(
+      () => (value - min) / (max - min) * 100,
+      [value, max, min]
+    );
+    const setLastOffsetManually = (val) => {
+      const width = getRefWidth(sliderRef);
+      const shouldOffset = (val - min) / (max - min) * width;
+      setLastDargOffset(shouldOffset);
+    };
+    const updateValue = useCallback(
+      (offset) => {
+        const currentValue = getValue(
+          max,
+          min,
+          step,
+          offset,
+          sideWidthRef.current
+        );
+        setValue(currentValue);
+        if (onChange) onChange(currentValue);
+      },
+      [max, min, step, sideWidthRef, onChange]
+    );
+    const { bg } = useMemo2(
+      () => getColors(theme.palette, type),
+      [theme.palette, type]
+    );
+    const dragHandler = (event) => {
+      if (disabled) return;
+      const currentOffset = event.currentX - event.startX;
+      const offset = currentOffset + lastDargOffsetRef.current;
+      updateValue(offset);
+    };
+    const dragStartHandler = () => {
+      setIsClick(false);
+      setSliderWidth(getRefWidth(sliderRef));
+    };
+    const dragEndHandler = (event) => {
+      if (disabled) return;
+      const offset = event.currentX - event.startX;
+      const currentOffset = offset + lastDargOffsetRef.current;
+      const boundOffset = currentOffset < 0 ? 0 : Math.min(currentOffset, sideWidthRef.current);
+      setLastDargOffset(boundOffset);
+    };
+    const keyDownHandler = (event) => {
+      if (disabled) return;
+      const nextByKey = {
+        ArrowRight: value + step,
+        ArrowUp: value + step,
+        ArrowLeft: value - step,
+        ArrowDown: value - step,
+        PageUp: value + step * 10,
+        PageDown: value - step * 10,
+        Home: min,
+        End: max
+      };
+      if (!(event.key in nextByKey)) return;
+      event.preventDefault();
+      const next = Math.min(max, Math.max(min, nextByKey[event.key]));
+      if (next === value) return;
+      setValue(next);
+      setLastOffsetManually(next);
+      if (onChange) onChange(next);
+    };
+    const clickHandler = (event) => {
+      if (disabled) return;
+      if (!sliderRef || !sliderRef.current) return;
+      setIsClick(true);
+      setSliderWidth(getRefWidth(sliderRef));
+      const clickOffset = event.clientX - sliderRef.current.getBoundingClientRect().x;
+      setLastDargOffset(clickOffset);
+      updateValue(clickOffset);
+    };
+    use_drag_default(dotRef, dragHandler, dragStartHandler, dragEndHandler);
+    useEffect2(() => {
+      if (customValue === void 0) return;
+      if (customValue === value) return;
+      setValue(customValue);
+    }, [customValue, value]);
+    useEffect2(() => {
+      if (initialValue) setLastOffsetManually(initialValue);
+    }, []);
+    const sliderStyle = {
+      backgroundColor: disabled ? theme.palette.accents_2 : bg,
+      cursor: disabled ? "not-allow" : "pointer",
+      "--slider-font-size": SCALES.font(1),
+      width: SCALES.width(1, "100%"),
+      height: SCALES.height(0.5),
+      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(
+      "div",
+      {
+        className: use_classes_default(Slider_module_css_default.slider, className),
+        onClick: clickHandler,
+        ref: sliderRef,
+        ...props,
+        style: sliderStyle,
+        children: [
+          /* @__PURE__ */ jsx3(
+            SliderDot_default,
+            {
+              disabled,
+              ref: dotRef,
+              isClick,
+              left: currentRatio,
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": value,
+              "aria-disabled": disabled || void 0,
+              onKeyDown: keyDownHandler,
+              children: hideValue || value
+            }
+          ),
+          showMarkers && /* @__PURE__ */ jsx3(SliderMark_default, { max, min, step })
+        ]
+      }
+    );
+  }
+);
+SliderComponent.displayName = "BolioUISlider";
+var Slider = with_scale_default(SliderComponent);
+var Slider_default = Slider;
+
+// core/Slider/index.ts
+var Slider_default2 = Slider_default;
+
+export {
+  Slider_default2 as Slider_default
+};

package/esm/chunk-JAVXTBV2.js

@@ -0,0 +1,238 @@
+import {
+  InputBlockLabel_default
+} from "./chunk-UOGCO6CV.js";
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.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/NumberInput/NumberInput.tsx
+import React, { useEffect, useId, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/NumberInput/NumberInput.module.css.bolio-css-module-source
+var NumberInput_module_css_default = { "withLabel": "NumberInput-module_withLabel__NYE52", "numberInput": "NumberInput-module_numberInput__hOY3x", "disabled": "NumberInput-module_disabled__gDhCu", "input": "NumberInput-module_input__LsKWE", "control": "NumberInput-module_control__mog--" };
+
+// core/NumberInput/NumberInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var decimalsOf = (num) => {
+  const [, decimals = ""] = String(num).split(".");
+  return decimals.length;
+};
+var PARTIAL_NUMBER = /^-?\d*([.,]\d*)?$/;
+var parse = (text) => {
+  const normalized = text.replace(",", ".");
+  if (normalized === "" || normalized === "-" || normalized === ".") return null;
+  const num = Number(normalized);
+  return Number.isNaN(num) ? null : num;
+};
+var NumberInputComponent = React.forwardRef(
+  ({
+    value: customValue,
+    initialValue = null,
+    onChange,
+    min,
+    max,
+    step = 1,
+    precision,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    disabled = false,
+    readOnly = false,
+    hideControls = false,
+    error = false,
+    errorMessage,
+    className = "",
+    children,
+    onKeyDown,
+    onBlur,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    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 colors = getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const places = precision != null ? precision : decimalsOf(step);
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const value = isControlled ? customValue : selfValue;
+    const format = (num) => num === null ? "" : String(num);
+    const [text, setText] = useState(format(value));
+    useEffect(() => {
+      if (parse(text) !== value) setText(format(value));
+    }, [value]);
+    const clamp = (num) => {
+      let next = num;
+      if (max !== void 0) next = Math.min(next, max);
+      if (min !== void 0) next = Math.max(next, min);
+      return Number(next.toFixed(places));
+    };
+    const commit = (next) => {
+      setText(format(next));
+      if (next === value) return;
+      if (!isControlled) setSelfValue(next);
+      onChange == null ? void 0 : onChange(next);
+    };
+    const locked = disabled || readOnly;
+    const increment = (direction, multiplier = 1) => {
+      if (locked) return;
+      commit(clamp((value != null ? value : 0) + direction * step * multiplier));
+    };
+    const changeHandler = (event) => {
+      const next = event.target.value;
+      if (!PARTIAL_NUMBER.test(next)) return;
+      setText(next);
+      const parsed = parse(next);
+      if (parsed === value) return;
+      if (!isControlled) setSelfValue(parsed);
+      onChange == null ? void 0 : onChange(parsed);
+    };
+    const blurHandler = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      const parsed = parse(text);
+      commit(parsed === null ? null : clamp(parsed));
+    };
+    const keyDownHandler = (event) => {
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      if (event.defaultPrevented) return;
+      const actions = {
+        ArrowUp: () => increment(1),
+        ArrowDown: () => increment(-1),
+        PageUp: () => increment(1, 10),
+        PageDown: () => increment(-1, 10),
+        Home: () => min !== void 0 && !locked && commit(min),
+        End: () => max !== void 0 && !locked && commit(max)
+      };
+      const action = actions[event.key];
+      if (!action) return;
+      event.preventDefault();
+      action();
+    };
+    const atMin = min !== void 0 && value !== null && value <= min;
+    const atMax = max !== void 0 && value !== null && value >= max;
+    const control = (direction) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: NumberInput_module_css_default.control,
+        "aria-label": direction === 1 ? "Increase" : "Decrease",
+        "aria-controls": inputId,
+        disabled: disabled || readOnly || (direction === 1 ? atMax : atMin),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => increment(direction),
+        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: direction === 1 ? "M12 5v14M5 12h14" : "M5 12h14",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        ) })
+      }
+    );
+    const withLabelStyle = {
+      "--input-height": SCALES.height(2.25),
+      fontSize: SCALES.font(0.875),
+      width: SCALES.width(1, "initial"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
+    };
+    const numberInputStyle = {
+      "--input-border": colors.borderColor,
+      "--input-radius": rounded ? "25px" : theme.layout.radius,
+      "--input-bg": colors.bgColor,
+      "--input-hover-border": colors.hoverBorder,
+      "--input-hover-bg": colors.hoverBgColor,
+      "--input-focus-border": colors.focusBorder,
+      "--input-placeholder-color": colors.placeholderColor,
+      "--input-color": colors.color,
+      "--control-color": colors.iconColor,
+      "--control-hover-color": colors.color,
+      "--control-disabled-color": theme.palette.accents_3
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: use_classes_default(NumberInput_module_css_default.withLabel, className),
+        style: withLabelStyle,
+        children: [
+          children && /* @__PURE__ */ jsx(InputBlockLabel_default, { htmlFor: inputId, children }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: use_classes_default(NumberInput_module_css_default.numberInput, {
+                [NumberInput_module_css_default.disabled]: disabled
+              }),
+              style: numberInputStyle,
+              children: [
+                !hideControls && control(-1),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref,
+                    type: "text",
+                    role: "spinbutton",
+                    inputMode: places > 0 ? "decimal" : "numeric",
+                    autoComplete: "off",
+                    value: text,
+                    disabled,
+                    readOnly,
+                    onChange: changeHandler,
+                    onKeyDown: keyDownHandler,
+                    onBlur: blurHandler,
+                    ...props,
+                    id: inputId,
+                    "aria-valuenow": value != null ? value : void 0,
+                    "aria-valuemin": min,
+                    "aria-valuemax": max,
+                    "aria-invalid": error || void 0,
+                    "aria-describedby": describedBy,
+                    className: NumberInput_module_css_default.input,
+                    style: {
+                      textAlign: hideControls ? "left" : "center",
+                      ...props.style
+                    }
+                  }
+                ),
+                !hideControls && control(1)
+              ]
+            }
+          ),
+          error && /* @__PURE__ */ jsx(InputBlockLabel_default, { error, id: errorId, children: errorMessage })
+        ]
+      }
+    );
+  }
+);
+NumberInputComponent.displayName = "BolioUINumberInput";
+var NumberInput = with_scale_default(NumberInputComponent);
+var NumberInput_default = NumberInput;
+
+// core/NumberInput/index.ts
+var NumberInput_default2 = NumberInput_default;
+
+export {
+  NumberInput_default2 as NumberInput_default
+};