@onesy/ui-react 1.0.130 → 1.0.132

package/LinearMeter/LinearMeter.js

@@ -1,401 +1,477 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Surface_1 = __importDefault(require("../Surface"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        width: '100%'
-    },
-    size_small: {
-        maxWidth: '180px'
-    },
-    size_regular: {
-        maxWidth: '240px'
-    },
-    size_large: {
-        maxWidth: '300px'
-    },
-    label: Object.assign(Object.assign({}, theme.typography.values.b2), { textAnchor: 'middle', alignmentBaseline: 'central', dominantBaseline: 'central' }),
-    svg: {
-        position: 'relative',
-        width: '100%',
-        height: 'auto'
-    }
-}), { name: 'onesy-LinearMeter' });
-const LinearMeter = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyLinearMeter) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', size = 'regular', parts: parts_ = 1, lineCap, 
-    // vertical, horizontal
-    orientation = 'horizontal', 
-    // start, center, end
-    linePosition = 'end', width: width_, height: height_, padding: outsidePadding = 0, paddingVertical, paddingHorizontal, gap = 0, border = false, background = false, boundaryWidth = 1, lineProgress = false, linesVisible = true, marksVisible = true, labelsVisible = true, marks: marks_ = [], markSize = 4, markWidth = 1, labels: labels_ = [], additional, textProps, pathProps, SvgProps, MarkProps, LabelProps, BackgroundProps, BorderProps, LineProps, LineMainProps, LinesProgressProps, LineProgressProps, Component = 'div', className, style, children } = props, other = __rest(props, ["tonal", "color", "size", "parts", "lineCap", "orientation", "linePosition", "width", "height", "padding", "paddingVertical", "paddingHorizontal", "gap", "border", "background", "boundaryWidth", "lineProgress", "linesVisible", "marksVisible", "labelsVisible", "marks", "markSize", "markWidth", "labels", "additional", "textProps", "pathProps", "SvgProps", "MarkProps", "LabelProps", "BackgroundProps", "BorderProps", "LineProps", "LineMainProps", "LinesProgressProps", "LineProgressProps", "Component", "className", "style", "children"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(undefined)
-    };
-    const styles = {
-        root: {}
-    };
-    let width = width_ !== undefined ? width_ : size === 'regular' ? 240 : size === 'large' ? 300 : 180;
-    let height = height_ !== undefined ? height_ : 100;
-    if (orientation === 'vertical') {
-        height = height_ !== undefined ? height_ : size === 'regular' ? 240 : size === 'large' ? 300 : 180;
-        width = width_ !== undefined ? width_ : 100;
-        styles.root.maxWidth = width;
-    }
-    else {
-        styles.root.height = height;
-    }
-    const parts = (0, utils_1.clamp)((0, utils_1.parse)(parts_), 1, 1000);
-    const paddings = {
-        x: paddingHorizontal !== undefined ? paddingHorizontal : outsidePadding || 0,
-        y: paddingVertical !== undefined ? paddingVertical : outsidePadding || 0
-    };
-    if (!['small', 'regular', 'large'].includes(size))
-        styles.root.maxWidth = size;
-    const marks = react_1.default.useMemo(() => {
-        const values = [];
-        if (marks_.length) {
-            let marksValues = marks_;
-            if (!(0, utils_1.is)('array', marksValues[0]))
-                marksValues = [marksValues];
-            marksValues.forEach((marksValue, index) => {
-                values[index] = [];
-                marksValue.forEach((mark) => {
-                    const { size: size_, padding: markPadding = 0, position } = mark, other_ = __rest(mark, ["size", "padding", "position"]);
-                    if (orientation === 'horizontal') {
-                        const total = width - (paddings.x * 2);
-                        const x = total * (position / 100);
-                        let y = height - paddings.y - boundaryWidth - markPadding;
-                        let yl = y - size_;
-                        if (linePosition === 'start') {
-                            y = paddings.y + boundaryWidth + markPadding;
-                            yl = y + size_;
-                        }
-                        if (linePosition === 'center') {
-                            y = (height / 2) - (boundaryWidth / 2) - markPadding;
-                            yl = y - size_;
-                        }
-                        if (linePosition === 'end') {
-                            y = height - paddings.y - boundaryWidth - markPadding;
-                            yl = y - size_;
-                        }
-                        values[index].push(Object.assign({ d: [
-                                'M', x + paddings.x, y,
-                                'L', x + paddings.x, yl
-                            ].join(' ') }, other_));
-                    }
-                    if (orientation === 'vertical') {
-                        const total = height - (paddings.y * 2);
-                        const y = total * (position / 100);
-                        let x = width - paddings.x - boundaryWidth - markPadding;
-                        let xl = x - size_;
-                        if (linePosition === 'start') {
-                            x = paddings.x + boundaryWidth + markPadding;
-                            xl = x + size_;
-                        }
-                        if (linePosition === 'center') {
-                            x = (width / 2) + (boundaryWidth / 2) + markPadding;
-                            xl = x + size_;
-                        }
-                        if (linePosition === 'end') {
-                            x = width - paddings.y - boundaryWidth - markPadding;
-                            xl = x - size_;
-                        }
-                        values[index].push(Object.assign({ d: [
-                                'M', x, y + paddings.y,
-                                'L', xl, y + paddings.y
-                            ].join(' ') }, other_));
-                    }
-                });
-            });
-        }
-        return values;
-    }, [orientation, linePosition, width, height, parts, marks_, markWidth, markSize, boundaryWidth, lineCap, paddingVertical, paddingHorizontal, outsidePadding, gap]);
-    const labels = react_1.default.useMemo(() => {
-        var _a;
-        const values = [];
-        if (labels_.length) {
-            const marksPadding = (marks_ === null || marks_ === void 0 ? void 0 : marks_.length) ? ((_a = (marks_ || []).sort((a, b) => b.size - a.size)[0]) === null || _a === void 0 ? void 0 : _a.size) || markSize : 0;
-            let labelsValues = labels_;
-            if (!(0, utils_1.is)('array', labelsValues[0]))
-                labelsValues = [labelsValues];
-            labelsValues.forEach((labelsValue, index) => {
-                values[index] = [];
-                labelsValue.forEach((label) => {
-                    var _a;
-                    const { value, padding: labelPadding = 0, position } = label, other_ = __rest(label, ["value", "padding", "position"]);
-                    const fontSize = ((_a = label.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== undefined ? label.style.fontSize : 14;
-                    if (orientation === 'horizontal') {
-                        const total = width - (paddings.x * 2);
-                        const x = total * (position / 100);
-                        let y = height - paddings.y - boundaryWidth - labelPadding;
-                        if (linePosition === 'start') {
-                            y = paddings.y + boundaryWidth + labelPadding + (fontSize / 2) + marksPadding;
-                        }
-                        if (linePosition === 'center') {
-                            y = (height / 2) - (boundaryWidth / 2) - labelPadding - (fontSize / 2) - marksPadding;
-                        }
-                        if (linePosition === 'end') {
-                            y = height - paddings.y - boundaryWidth - labelPadding - (fontSize / 2) - marksPadding;
-                        }
-                        values[index].push(Object.assign({ x: x + paddings.x, y,
-                            value }, other_));
-                    }
-                    if (orientation === 'vertical') {
-                        const total = height - (paddings.y * 2);
-                        const y = total * (position / 100);
-                        let x = width - paddings.x - boundaryWidth - labelPadding;
-                        if (linePosition === 'start') {
-                            x = paddings.x + boundaryWidth + labelPadding + (fontSize / 2) + marksPadding;
-                        }
-                        if (linePosition === 'center') {
-                            x = (width / 2) + (boundaryWidth / 2) + labelPadding + (fontSize / 2) + marksPadding;
-                        }
-                        if (linePosition === 'end') {
-                            x = width - paddings.y - boundaryWidth - labelPadding - (fontSize / 2) - marksPadding;
-                        }
-                        values[index].push(Object.assign({ x, y: y + paddings.y, value }, other));
-                    }
-                });
-            });
-        }
-        return values;
-    }, [orientation, linePosition, width, height, parts, marks_, markWidth, markSize, boundaryWidth, lineCap, outsidePadding, gap]);
-    const lines = react_1.default.useMemo(() => {
-        const values = [];
-        let value = [];
-        if (orientation === 'horizontal') {
-            const lineCapOffset = ['round', 'square'].includes(lineCap) ? boundaryWidth / 2 : 0;
-            const offset = (paddings.x * 2) + (lineCapOffset ? boundaryWidth * parts : 0);
-            const total = width;
-            const part = (total - ((parts - 1) * gap) - offset) / parts;
-            let previousValue = 0;
-            const x = 0 + lineCapOffset + paddings.x;
-            let y = height - (boundaryWidth / 2);
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "size", "parts", "lineCap", "orientation", "linePosition", "width", "height", "padding", "paddingVertical", "paddingHorizontal", "gap", "border", "background", "boundaryWidth", "lineProgress", "linesVisible", "marksVisible", "labelsVisible", "marks", "markSize", "markWidth", "labels", "additional", "textProps", "pathProps", "SvgProps", "MarkProps", "LabelProps", "BackgroundProps", "BorderProps", "LineProps", "LineMainProps", "LinesProgressProps", "LineProgressProps", "Component", "className", "style", "children"],
+  _excluded2 = ["size", "padding", "position"],
+  _excluded3 = ["value", "padding", "position"],
+  _excluded4 = ["x", "y", "value"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    width: '100%'
+  },
+  size_small: {
+    maxWidth: '180px'
+  },
+  size_regular: {
+    maxWidth: '240px'
+  },
+  size_large: {
+    maxWidth: '300px'
+  },
+  label: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
+    textAnchor: 'middle',
+    alignmentBaseline: 'central',
+    dominantBaseline: 'central'
+  }),
+  svg: {
+    position: 'relative',
+    width: '100%',
+    height: 'auto'
+  }
+}), {
+  name: 'onesy-LinearMeter'
+});
+const LinearMeter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyLinearMeter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Surface = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      size = 'regular',
+      parts: parts_ = 1,
+      lineCap,
+      // vertical, horizontal
+      orientation = 'horizontal',
+      // start, center, end
+      linePosition = 'end',
+      width: width_,
+      height: height_,
+      padding: outsidePadding = 0,
+      paddingVertical,
+      paddingHorizontal,
+      gap = 0,
+      border = false,
+      background = false,
+      boundaryWidth = 1,
+      lineProgress = false,
+      linesVisible = true,
+      marksVisible = true,
+      labelsVisible = true,
+      marks: marks_ = [],
+      markSize = 4,
+      markWidth = 1,
+      labels: labels_ = [],
+      additional,
+      textProps,
+      pathProps,
+      SvgProps,
+      MarkProps,
+      LabelProps,
+      BackgroundProps,
+      BorderProps,
+      LineProps,
+      LineMainProps,
+      LinesProgressProps,
+      LineProgressProps,
+      Component = 'div',
+      className,
+      style,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(undefined)
+  };
+  const styles = {
+    root: {}
+  };
+  let width = width_ !== undefined ? width_ : size === 'regular' ? 240 : size === 'large' ? 300 : 180;
+  let height = height_ !== undefined ? height_ : 100;
+  if (orientation === 'vertical') {
+    height = height_ !== undefined ? height_ : size === 'regular' ? 240 : size === 'large' ? 300 : 180;
+    width = width_ !== undefined ? width_ : 100;
+    styles.root.maxWidth = width;
+  } else {
+    styles.root.height = height;
+  }
+  const parts = (0, _utils.clamp)((0, _utils.parse)(parts_), 1, 1000);
+  const paddings = {
+    x: paddingHorizontal !== undefined ? paddingHorizontal : outsidePadding || 0,
+    y: paddingVertical !== undefined ? paddingVertical : outsidePadding || 0
+  };
+  if (!['small', 'regular', 'large'].includes(size)) styles.root.maxWidth = size;
+  const marks = _react.default.useMemo(() => {
+    const values = [];
+    if (marks_.length) {
+      let marksValues = marks_;
+      if (!(0, _utils.is)('array', marksValues[0])) marksValues = [marksValues];
+      marksValues.forEach((marksValue, index) => {
+        values[index] = [];
+        marksValue.forEach(mark => {
+          const {
+              size: size_,
+              padding: markPadding = 0,
+              position
+            } = mark,
+            other_ = (0, _objectWithoutProperties2.default)(mark, _excluded2);
+          if (orientation === 'horizontal') {
+            const total = width - paddings.x * 2;
+            const x = total * (position / 100);
+            let y = height - paddings.y - boundaryWidth - markPadding;
+            let yl = y - size_;
             if (linePosition === 'start') {
-                y = boundaryWidth / 2;
-                y += paddings.y;
+              y = paddings.y + boundaryWidth + markPadding;
+              yl = y + size_;
             }
-            if (linePosition === 'center')
-                y = height / 2;
-            if (linePosition === 'end') {
-                y = height - (boundaryWidth / 2);
-                y -= paddings.y;
+            if (linePosition === 'center') {
+              y = height / 2 - boundaryWidth / 2 - markPadding;
+              yl = y - size_;
             }
-            for (let i = 0; i < parts; i++) {
-                // move to bottom left
-                if (i === 0)
-                    value.push(
-                    // Move to bottom left
-                    'm', x, y);
-                // line
-                value.push('l', part, 0);
-                // Previous value with/out the gap value
-                if (gap > 0 && i < parts - 1)
-                    previousValue += part + gap + (lineCapOffset ? boundaryWidth : 0);
-                else
-                    previousValue += part + (lineCapOffset ? boundaryWidth : 0);
-                values.push({ d: value.join(' ') });
-                if (i === 0)
-                    previousValue += lineCapOffset + paddings.x;
-                // move for the next value
-                if (i < parts - 1) {
-                    value = [
-                        'm', previousValue, y
-                    ];
-                }
+            if (linePosition === 'end') {
+              y = height - paddings.y - boundaryWidth - markPadding;
+              yl = y - size_;
             }
-        }
-        if (orientation === 'vertical') {
-            const lineCapOffset = ['round', 'square'].includes(lineCap) ? boundaryWidth / 2 : 0;
-            const offset = (paddings.y * 2) + (lineCapOffset ? boundaryWidth * parts : 0);
-            const total = height;
-            const part = (total - ((parts - 1) * gap) - offset) / parts;
-            let previousValue = 0;
-            let x = width - (boundaryWidth / 2);
-            const y = 0 + lineCapOffset + paddings.y;
+            values[index].push(_objectSpread({
+              d: ['M', x + paddings.x, y, 'L', x + paddings.x, yl].join(' ')
+            }, other_));
+          }
+          if (orientation === 'vertical') {
+            const total = height - paddings.y * 2;
+            const y = total * (position / 100);
+            let x = width - paddings.x - boundaryWidth - markPadding;
+            let xl = x - size_;
             if (linePosition === 'start') {
-                x = boundaryWidth / 2;
-                x += paddings.x;
+              x = paddings.x + boundaryWidth + markPadding;
+              xl = x + size_;
             }
-            if (linePosition === 'center')
-                x = width / 2;
-            if (linePosition === 'end') {
-                x = width - (boundaryWidth / 2);
-                x -= paddings.x;
+            if (linePosition === 'center') {
+              x = width / 2 + boundaryWidth / 2 + markPadding;
+              xl = x + size_;
             }
-            for (let i = 0; i < parts; i++) {
-                // move to bottom left
-                if (i === 0)
-                    value.push(
-                    // Move to bottom left
-                    'm', x, y);
-                // line
-                value.push('l', 0, part);
-                // Previous value with/out the gap value
-                if (gap > 0 && i < parts - 1)
-                    previousValue += part + gap + (lineCapOffset ? boundaryWidth : 0);
-                else
-                    previousValue += part + (lineCapOffset ? boundaryWidth : 0);
-                values.push({ d: value.join(' ') });
-                if (i === 0)
-                    previousValue += lineCapOffset + paddings.y;
-                // move for the next value
-                if (i < parts - 1) {
-                    value = [
-                        'm', x, previousValue
-                    ];
-                }
+            if (linePosition === 'end') {
+              x = width - paddings.y - boundaryWidth - markPadding;
+              xl = x - size_;
             }
-        }
-        return values;
-    }, [width, height, parts, boundaryWidth, lineCap, orientation, linePosition, paddingVertical, paddingHorizontal, outsidePadding, gap]);
-    const pathBackground = react_1.default.useMemo(() => {
-        const values = [];
-        if (orientation === 'horizontal') {
-            values.push(
-            // Move
-            'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
-        }
-        if (orientation === 'vertical') {
-            values.push(
-            // Move
-            'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
-        }
-        return values.join(' ');
-    }, [orientation, linePosition, width, height, boundaryWidth, outsidePadding, paddingVertical, paddingHorizontal]);
-    const pathBorder = react_1.default.useMemo(() => {
-        const values = [];
-        if (orientation === 'horizontal') {
+            values[index].push(_objectSpread({
+              d: ['M', x, y + paddings.y, 'L', xl, y + paddings.y].join(' ')
+            }, other_));
+          }
+        });
+      });
+    }
+    return values;
+  }, [orientation, linePosition, width, height, parts, marks_, markWidth, markSize, boundaryWidth, lineCap, paddingVertical, paddingHorizontal, outsidePadding, gap]);
+  const labels = _react.default.useMemo(() => {
+    const values = [];
+    if (labels_.length) {
+      var _sort$;
+      const marksPadding = marks_ !== null && marks_ !== void 0 && marks_.length ? ((_sort$ = (marks_ || []).sort((a, b) => b.size - a.size)[0]) === null || _sort$ === void 0 ? void 0 : _sort$.size) || markSize : 0;
+      let labelsValues = labels_;
+      if (!(0, _utils.is)('array', labelsValues[0])) labelsValues = [labelsValues];
+      labelsValues.forEach((labelsValue, index) => {
+        values[index] = [];
+        labelsValue.forEach(label => {
+          var _label$style;
+          const {
+              value,
+              padding: labelPadding = 0,
+              position
+            } = label,
+            other_ = (0, _objectWithoutProperties2.default)(label, _excluded3);
+          const fontSize = ((_label$style = label.style) === null || _label$style === void 0 ? void 0 : _label$style.fontSize) !== undefined ? label.style.fontSize : 14;
+          if (orientation === 'horizontal') {
+            const total = width - paddings.x * 2;
+            const x = total * (position / 100);
+            let y = height - paddings.y - boundaryWidth - labelPadding;
             if (linePosition === 'start') {
-                values.push(
-                // Move
-                'M', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'L', width - paddings.x, paddings.y);
+              y = paddings.y + boundaryWidth + labelPadding + fontSize / 2 + marksPadding;
             }
             if (linePosition === 'center') {
-                values.push(
-                // Move
-                'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
+              y = height / 2 - boundaryWidth / 2 - labelPadding - fontSize / 2 - marksPadding;
             }
             if (linePosition === 'end') {
-                values.push(
-                // Move
-                'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y);
+              y = height - paddings.y - boundaryWidth - labelPadding - fontSize / 2 - marksPadding;
             }
-        }
-        if (orientation === 'vertical') {
+            values[index].push(_objectSpread({
+              x: x + paddings.x,
+              y,
+              value
+            }, other_));
+          }
+          if (orientation === 'vertical') {
+            const total = height - paddings.y * 2;
+            const y = total * (position / 100);
+            let x = width - paddings.x - boundaryWidth - labelPadding;
             if (linePosition === 'start') {
-                values.push(
-                // Move
-                'M', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'L', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y);
+              x = paddings.x + boundaryWidth + labelPadding + fontSize / 2 + marksPadding;
             }
             if (linePosition === 'center') {
-                values.push(
-                // Move
-                'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
+              x = width / 2 + boundaryWidth / 2 + labelPadding + fontSize / 2 + marksPadding;
             }
             if (linePosition === 'end') {
-                values.push(
-                // Move
-                'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y);
+              x = width - paddings.y - boundaryWidth - labelPadding - fontSize / 2 - marksPadding;
             }
+            values[index].push(_objectSpread({
+              x,
+              y: y + paddings.y,
+              value
+            }, other));
+          }
+        });
+      });
+    }
+    return values;
+  }, [orientation, linePosition, width, height, parts, marks_, markWidth, markSize, boundaryWidth, lineCap, outsidePadding, gap]);
+  const lines = _react.default.useMemo(() => {
+    const values = [];
+    let value = [];
+    if (orientation === 'horizontal') {
+      const lineCapOffset = ['round', 'square'].includes(lineCap) ? boundaryWidth / 2 : 0;
+      const offset = paddings.x * 2 + (lineCapOffset ? boundaryWidth * parts : 0);
+      const total = width;
+      const part = (total - (parts - 1) * gap - offset) / parts;
+      let previousValue = 0;
+      const x = 0 + lineCapOffset + paddings.x;
+      let y = height - boundaryWidth / 2;
+      if (linePosition === 'start') {
+        y = boundaryWidth / 2;
+        y += paddings.y;
+      }
+      if (linePosition === 'center') y = height / 2;
+      if (linePosition === 'end') {
+        y = height - boundaryWidth / 2;
+        y -= paddings.y;
+      }
+      for (let i = 0; i < parts; i++) {
+        // move to bottom left
+        if (i === 0) value.push(
+        // Move to bottom left
+        'm', x, y);
+
+        // line
+        value.push('l', part, 0);
+
+        // Previous value with/out the gap value
+        if (gap > 0 && i < parts - 1) previousValue += part + gap + (lineCapOffset ? boundaryWidth : 0);else previousValue += part + (lineCapOffset ? boundaryWidth : 0);
+        values.push({
+          d: value.join(' ')
+        });
+        if (i === 0) previousValue += lineCapOffset + paddings.x;
+
+        // move for the next value
+        if (i < parts - 1) {
+          value = ['m', previousValue, y];
         }
-        return values.join(' ');
-    }, [orientation, linePosition, width, height, boundaryWidth, outsidePadding, paddingVertical, paddingHorizontal]);
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                'onesy-LinearMeter-root',
-                `onesy-LinearMeter-size-${size}`
-            ],
-            className,
-            classes.root,
-            classes[`size_${size}`]
-        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [additional, (0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color }, { children: ({ color: color_, backgroundColor }) => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${width || 0} ${height || 0}` }, SvgProps, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                            'onesy-LinearMeter-svg'
-                        ],
-                        SvgProps === null || SvgProps === void 0 ? void 0 : SvgProps.className,
-                        classes.svg
-                    ]) }, { children: [background && ((0, jsx_runtime_1.jsx)("path", Object.assign({ d: pathBackground, fill: backgroundColor, stroke: 'none' }, pathProps, BackgroundProps))), border && ((0, jsx_runtime_1.jsx)("path", Object.assign({ d: pathBorder, fill: 'none', stroke: color_, strokeWidth: boundaryWidth }, pathProps, BorderProps))), linesVisible && ((0, jsx_runtime_1.jsx)("g", Object.assign({ className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                                    'onesy-LinearMeter-arcs'
-                                ],
-                                classes.arcs
-                            ]) }, { children: (lines.map((item, index) => ((0, jsx_runtime_1.jsx)("path", Object.assign({ d: item.d, fill: 'none', stroke: color_, strokeWidth: boundaryWidth, strokeLinecap: lineCap }, pathProps, LineProps, LineMainProps), index)))) }))), linesVisible && lineProgress && ((0, jsx_runtime_1.jsx)("g", Object.assign({}, LinesProgressProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                                    'onesy-LinearMeter-lines-progress'
-                                ],
-                                LinesProgressProps === null || LinesProgressProps === void 0 ? void 0 : LinesProgressProps.className,
-                                classes.lines_progress
-                            ]) }, { children: (lines.map((item, index) => ((0, jsx_runtime_1.jsx)("path", Object.assign({ d: item.d, fill: 'none', stroke: color_, strokeWidth: boundaryWidth, strokeLinecap: lineCap }, pathProps, LineProps, LineProgressProps), index)))) }))), children && ((0, jsx_runtime_1.jsx)("g", Object.assign({ className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                                    'onesy-LinearMeter-children'
-                                ],
-                                classes.children
-                            ]) }, { children: react_1.default.Children.toArray(children).map((item, index) => {
-                                return (react_1.default.cloneElement(item, {
-                                    key: index,
-                                    fill: item.props.fill !== undefined ? item.props.fill : color_,
-                                    stroke: item.props.stroke !== undefined ? item.props.stroke : color_,
-                                    // clean up
-                                    value: undefined,
-                                    style: Object.assign(Object.assign({}, (item.props.value !== undefined ? {
-                                        transform: orientation === 'horizontal' ?
-                                            `translate3d(${paddings.x + (((item.props.value / 100) || 0) * (width - (paddings.x * 2)))}px, 0, 0)` :
-                                            `translate3d(0, ${paddings.y + (((item.props.value / 100) || 0) * (height - (paddings.y * 2)))}px, 0)`
-                                    } : undefined)), item.props.style)
-                                }));
-                            }) }))), marksVisible && !!marks_.length && (marks.map((marksValue, index) => ((0, jsx_runtime_1.jsx)("g", Object.assign({ className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                                    'onesy-LinearMeter-marks'
-                                ],
-                                classes.marks
-                            ]) }, { children: (marksValue.map((item, index_) => ((0, jsx_runtime_1.jsx)("path", Object.assign({ d: item.d, fill: 'none', stroke: color_, strokeWidth: item.width !== undefined ? item.width : markWidth, strokeLinecap: lineCap }, pathProps, MarkProps), index_)))) }), index)))), labelsVisible && !!labels_.length && (labels.map((labelsValue, index) => ((0, jsx_runtime_1.jsx)("g", Object.assign({ className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                                    'onesy-LinearMeter-labels'
-                                ],
-                                classes.labels
-                            ]) }, { children: (labelsValue.map((item, index_) => {
-                                const { x, y, value } = item, other_ = __rest(item, ["x", "y", "value"]);
-                                return ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: x, y: y }, other_, textProps, LabelProps, { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('LinearMeter', theme) && [
-                                            'onesy-LinearMeter-label'
-                                        ],
-                                        other_ === null || other_ === void 0 ? void 0 : other_.className,
-                                        textProps === null || textProps === void 0 ? void 0 : textProps.className,
-                                        LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className,
-                                        classes.label
-                                    ]), style: Object.assign(Object.assign(Object.assign({ fill: color_ }, other_.style), textProps === null || textProps === void 0 ? void 0 : textProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style) }, { children: value }), index_));
-                            })) }), index))))] }))) }))] })));
+      }
+    }
+    if (orientation === 'vertical') {
+      const lineCapOffset = ['round', 'square'].includes(lineCap) ? boundaryWidth / 2 : 0;
+      const offset = paddings.y * 2 + (lineCapOffset ? boundaryWidth * parts : 0);
+      const total = height;
+      const part = (total - (parts - 1) * gap - offset) / parts;
+      let previousValue = 0;
+      let x = width - boundaryWidth / 2;
+      const y = 0 + lineCapOffset + paddings.y;
+      if (linePosition === 'start') {
+        x = boundaryWidth / 2;
+        x += paddings.x;
+      }
+      if (linePosition === 'center') x = width / 2;
+      if (linePosition === 'end') {
+        x = width - boundaryWidth / 2;
+        x -= paddings.x;
+      }
+      for (let i = 0; i < parts; i++) {
+        // move to bottom left
+        if (i === 0) value.push(
+        // Move to bottom left
+        'm', x, y);
+
+        // line
+        value.push('l', 0, part);
+
+        // Previous value with/out the gap value
+        if (gap > 0 && i < parts - 1) previousValue += part + gap + (lineCapOffset ? boundaryWidth : 0);else previousValue += part + (lineCapOffset ? boundaryWidth : 0);
+        values.push({
+          d: value.join(' ')
+        });
+        if (i === 0) previousValue += lineCapOffset + paddings.y;
+
+        // move for the next value
+        if (i < parts - 1) {
+          value = ['m', x, previousValue];
+        }
+      }
+    }
+    return values;
+  }, [width, height, parts, boundaryWidth, lineCap, orientation, linePosition, paddingVertical, paddingHorizontal, outsidePadding, gap]);
+  const pathBackground = _react.default.useMemo(() => {
+    const values = [];
+    if (orientation === 'horizontal') {
+      values.push(
+      // Move
+      'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
+    }
+    if (orientation === 'vertical') {
+      values.push(
+      // Move
+      'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
+    }
+    return values.join(' ');
+  }, [orientation, linePosition, width, height, boundaryWidth, outsidePadding, paddingVertical, paddingHorizontal]);
+  const pathBorder = _react.default.useMemo(() => {
+    const values = [];
+    if (orientation === 'horizontal') {
+      if (linePosition === 'start') {
+        values.push(
+        // Move
+        'M', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'L', width - paddings.x, paddings.y);
+      }
+      if (linePosition === 'center') {
+        values.push(
+        // Move
+        'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
+      }
+      if (linePosition === 'end') {
+        values.push(
+        // Move
+        'M', paddings.x, height - paddings.y, 'L', paddings.x, paddings.y, 'L', width - paddings.x, paddings.y, 'L', width - paddings.x, height - paddings.y);
+      }
+    }
+    if (orientation === 'vertical') {
+      if (linePosition === 'start') {
+        values.push(
+        // Move
+        'M', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'L', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y);
+      }
+      if (linePosition === 'center') {
+        values.push(
+        // Move
+        'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y, 'Z');
+      }
+      if (linePosition === 'end') {
+        values.push(
+        // Move
+        'M', width - paddings.x, paddings.y, 'L', paddings.x, paddings.y, 'L', paddings.x, height - paddings.y, 'L', width - paddings.x, height - paddings.y);
+      }
+    }
+    return values.join(' ');
+  }, [orientation, linePosition, width, height, boundaryWidth, outsidePadding, paddingVertical, paddingHorizontal]);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-root', `onesy-LinearMeter-size-${size}`], className, classes.root, classes[`size_${size}`]]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), additional, /*#__PURE__*/_react.default.createElement(Surface, {
+    tonal: tonal,
+    color: color
+  }, ({
+    color: color_,
+    backgroundColor
+  }) => /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: `0 0 ${width || 0} ${height || 0}`
+  }, SvgProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-svg'], SvgProps === null || SvgProps === void 0 ? void 0 : SvgProps.className, classes.svg])
+  }), background && /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    d: pathBackground,
+    fill: backgroundColor,
+    stroke: "none"
+  }, pathProps, BackgroundProps)), border && /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    d: pathBorder,
+    fill: "none",
+    stroke: color_,
+    strokeWidth: boundaryWidth
+  }, pathProps, BorderProps)), linesVisible && /*#__PURE__*/_react.default.createElement("g", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-arcs'], classes.arcs])
+  }, lines.map((item, index) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    key: index,
+    d: item.d,
+    fill: "none",
+    stroke: color_,
+    strokeWidth: boundaryWidth,
+    strokeLinecap: lineCap
+  }, pathProps, LineProps, LineMainProps)))), linesVisible && lineProgress && /*#__PURE__*/_react.default.createElement("g", (0, _extends2.default)({}, LinesProgressProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-lines-progress'], LinesProgressProps === null || LinesProgressProps === void 0 ? void 0 : LinesProgressProps.className, classes.lines_progress])
+  }), lines.map((item, index) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    key: index,
+    d: item.d,
+    fill: "none",
+    stroke: color_,
+    strokeWidth: boundaryWidth,
+    strokeLinecap: lineCap
+  }, pathProps, LineProps, LineProgressProps)))), children && /*#__PURE__*/_react.default.createElement("g", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-children'], classes.children])
+  }, _react.default.Children.toArray(children).map((item, index) => {
+    return /*#__PURE__*/_react.default.cloneElement(item, {
+      key: index,
+      fill: item.props.fill !== undefined ? item.props.fill : color_,
+      stroke: item.props.stroke !== undefined ? item.props.stroke : color_,
+      // clean up
+      value: undefined,
+      style: _objectSpread(_objectSpread({}, item.props.value !== undefined ? {
+        transform: orientation === 'horizontal' ? `translate3d(${paddings.x + (item.props.value / 100 || 0) * (width - paddings.x * 2)}px, 0, 0)` : `translate3d(0, ${paddings.y + (item.props.value / 100 || 0) * (height - paddings.y * 2)}px, 0)`
+      } : undefined), item.props.style)
+    });
+  })), marksVisible && !!marks_.length && marks.map((marksValue, index) => /*#__PURE__*/_react.default.createElement("g", {
+    key: index,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-marks'], classes.marks])
+  }, marksValue.map((item, index_) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    key: index_,
+    d: item.d,
+    fill: "none",
+    stroke: color_,
+    strokeWidth: item.width !== undefined ? item.width : markWidth,
+    strokeLinecap: lineCap
+  }, pathProps, MarkProps))))), labelsVisible && !!labels_.length && labels.map((labelsValue, index) => /*#__PURE__*/_react.default.createElement("g", {
+    key: index,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-labels'], classes.labels])
+  }, labelsValue.map((item, index_) => {
+    const {
+        x,
+        y,
+        value
+      } = item,
+      other_ = (0, _objectWithoutProperties2.default)(item, _excluded4);
+    return /*#__PURE__*/_react.default.createElement("text", (0, _extends2.default)({
+      key: index_,
+      x: x,
+      y: y
+    }, other_, textProps, LabelProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('LinearMeter', theme) && ['onesy-LinearMeter-label'], other_ === null || other_ === void 0 ? void 0 : other_.className, textProps === null || textProps === void 0 ? void 0 : textProps.className, LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.label]),
+      style: _objectSpread(_objectSpread(_objectSpread({
+        fill: color_
+      }, other_.style), textProps === null || textProps === void 0 ? void 0 : textProps.style), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
+    }), value);
+  }))))));
 });
 LinearMeter.displayName = 'onesy-LinearMeter';
-exports.default = LinearMeter;
+var _default = exports.default = LinearMeter;