@onesy/ui-react 1.0.0

package/esm/RichTextEditor/index.js

@@ -0,0 +1 @@
+export { default } from './RichTextEditor';

package/esm/RoundMeter/RoundMeter.js

@@ -0,0 +1,634 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "size", "parts", "lineCap", "padding", "gap", "border", "background", "boundary", "boundaryWidth", "arcProgress", "arcsVisible", "marksVisible", "labelsVisible", "marks", "markSize", "markWidth", "labels", "renderLabel", "childrenPosition", "additional", "textProps", "pathProps", "SvgProps", "MarkProps", "LabelProps", "BackgroundProps", "BorderProps", "ArcProps", "ArcMainProps", "ArcsProgressProps", "ArcProgressProps", "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) { _defineProperty(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; }
+import React from 'react';
+import { clamp, is, parse, valueFromPercentageWithinRange } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SurfaceElement from '../Surface';
+import { angleToCoordinates, staticClassName, toNumber } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    width: '100vw'
+  },
+  size_small: {
+    maxWidth: '180px'
+  },
+  size_regular: {
+    maxWidth: '240px'
+  },
+  size_large: {
+    maxWidth: '300px'
+  },
+  boundary_1: {
+    aspectRatio: '1'
+  },
+  boundary_075: {
+    aspectRatio: '1'
+  },
+  boundary_05: {
+    aspectRatio: '1'
+  },
+  boundary_025: {
+    aspectRatio: '1'
+  },
+  label: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
+    textAnchor: 'middle',
+    alignmentBaseline: 'central',
+    dominantBaseline: 'central'
+  }),
+  svg: {
+    position: 'relative',
+    width: '100%',
+    height: 'auto'
+  }
+}), {
+  name: 'onesy-RoundMeter'
+});
+const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundMeter?.props?.default), props_), [props_]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      size = 'regular',
+      parts: parts_ = 1,
+      lineCap,
+      padding: outsidePadding = 0,
+      gap: gap_ = 0,
+      border = false,
+      background = false,
+      boundary: boundary_ = 1,
+      boundaryWidth = 1,
+      arcProgress = false,
+      arcsVisible = true,
+      marksVisible = true,
+      labelsVisible = true,
+      marks: marks_ = [],
+      markSize = 4,
+      markWidth = 1,
+      labels: labels_ = [],
+      renderLabel,
+      childrenPosition = 'post',
+      additional,
+      textProps,
+      pathProps,
+      SvgProps,
+      MarkProps,
+      LabelProps,
+      BackgroundProps,
+      BorderProps,
+      ArcProps,
+      ArcMainProps,
+      ArcsProgressProps,
+      ArcProgressProps,
+      Component = 'div',
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const styles = {
+    root: {}
+  };
+  let radius;
+  const boundary = parse(boundary_);
+  const width = 240;
+  const height = width;
+  let gap = ['round', 'square'].includes(lineCap) ? gap_ + boundaryWidth / 2 : gap_;
+  const parts = clamp(parse(parts_), 1, 180);
+  let min = 0;
+  let max = 360;
+  let yViewBox = 0;
+
+  // 1
+  if (boundary === 1) {
+    // 0 is middle top
+    // ie. 270 degreese
+    min = 270;
+    max = 270 + 360;
+  }
+
+  // 0.75
+  if (boundary === 0.75) {
+    // 0 is angle bottom left
+    // ie. 270 degreese
+    min = 135;
+    max = 135 + 270;
+    yViewBox = -15;
+  }
+
+  // 0.5
+  if (boundary === 0.5) {
+    // 0 is left
+    // ie. 180 degreese
+    min = 180;
+    max = 180 + 180;
+    yViewBox = -50;
+  }
+
+  // 0.25
+  if (boundary === 0.25) {
+    // 0 is angle top left
+    // ie. 225 degreese
+    min = 225;
+    max = 225 + 90;
+    yViewBox = -60;
+  }
+  if (!['small', 'regular', 'large'].includes(size)) styles.root.maxWidth = size;
+  const marks = React.useMemo(() => {
+    const values = [];
+    if (marks_.length) {
+      const center = toNumber(width / 2);
+      radius = toNumber(width / 2 - boundaryWidth - outsidePadding);
+      let marksValues = marks_;
+      if (!is('array', marksValues[0])) marksValues = [marksValues];
+      marksValues.forEach((marksValue, index) => {
+        values[index] = [];
+        marksValue.forEach(mark => {
+          const {
+              size: size_,
+              padding: markPadding = 0,
+              position
+            } = mark,
+            other_ = _objectWithoutProperties(mark, _excluded2);
+          const itemPadding = toNumber(markPadding);
+          const angle = valueFromPercentageWithinRange(position, min, max);
+          const start = angleToCoordinates(angle, center, center, radius - itemPadding);
+          const end = angleToCoordinates(angle, center, center, radius - (size_ !== undefined ? size_ : markSize) - itemPadding);
+          values[index].push(_objectSpread({
+            d: ['M', start.x, start.y, 'L', end.x, end.y].join(' ')
+          }, other_));
+        });
+      });
+    }
+    return values;
+  }, [width, height, parts, marks_, markSize, boundary, boundaryWidth, lineCap, outsidePadding, gap]);
+  const labels = React.useMemo(() => {
+    const values = [];
+    if (labels_.length) {
+      const center = toNumber(width / 2);
+      const marksPadding = toNumber(marks_?.length ? (marks_ || []).sort((a, b) => b.size - a.size)[0]?.size || markSize : 0);
+      radius = toNumber(width / 2 - boundaryWidth - marksPadding - outsidePadding);
+      let labelsValues = labels_;
+      if (!is('array', labelsValues[0])) labelsValues = [labelsValues];
+      labelsValues.forEach((labelsValue, index) => {
+        values[index] = [];
+        labelsValue.forEach(label => {
+          const {
+              value,
+              padding: labelPadding = 0,
+              position
+            } = label,
+            other_ = _objectWithoutProperties(label, _excluded3);
+          const itemPadding = toNumber(labelPadding);
+          const fontSize = toNumber(label.style?.fontSize !== undefined ? label.style.fontSize : 14);
+          const angle = valueFromPercentageWithinRange(position, min, max);
+          const start = angleToCoordinates(angle, center, center, radius - fontSize / 2 - itemPadding);
+          values[index].push(_objectSpread({
+            x: start.x,
+            y: start.y,
+            value
+          }, other_));
+        });
+      });
+    }
+    return values;
+  }, [width, height, parts, marks_, markSize, boundary, boundaryWidth, lineCap, outsidePadding, gap]);
+  const arcs = React.useMemo(() => {
+    const values = [];
+    let value = [];
+    const offset = outsidePadding;
+
+    // 1
+    if (boundary === 1) {
+      if (parts === 1) {
+        radius = width / 2 - boundaryWidth / 2 - offset;
+        values.push({
+          d: [
+          // Move
+          'M', offset + boundaryWidth / 2, width / 2 + 0.001,
+          // Arc
+          'A', radius, radius, 0, 1, 0, offset + boundaryWidth / 2, width / 2].join(' ')
+        });
+      } else {
+        const center = width / 2;
+        radius = width / 2 - boundaryWidth / 2 - offset;
+        const total = 360;
+        const part = (total - parts * gap) / parts;
+        const angles = {
+          start: angleToCoordinates(0, center, center, radius)
+        };
+        let anglePrevious = 0;
+        for (let i = 0; i < parts; i++) {
+          // Move to 0 deg
+          if (i === 0) value.push(
+          // Move to 0 deg
+          'M', angles.start.x, angles.start.y);
+          const angleEnd = anglePrevious + part;
+          angles.end = angleToCoordinates(angleEnd, center, center, radius);
+          angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+
+          // Arc
+          value.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
+
+          // Move the gap if there's a gap
+          if (gap > 0 && i < parts - 1) {
+            value.push('M', angles.move.x, angles.move.y);
+            anglePrevious = angleEnd + gap;
+          } else anglePrevious = angleEnd;
+          values.push({
+            d: value.join(' ')
+          });
+
+          // Move for the next value
+          if (i < parts - 1) {
+            value = ['M', angles.move.x, angles.move.y];
+          }
+        }
+      }
+    }
+
+    // 0.75
+    if (boundary === 0.75) {
+      value = [];
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const angles = {
+        end: angleToCoordinates(45, center, center, radius),
+        start: angleToCoordinates(135, center, center, radius)
+      };
+      if (parts === 1) {
+        values.push({
+          d: [
+          // Line middle bottom
+          'M', angles.start.x, angles.start.y,
+          // Arc
+          'A', radius, radius, 0, 1, 1, angles.end.x, angles.end.y].join(' ')
+        });
+      } else {
+        const total = 270;
+        const part = (total - (parts - 1) * gap) / parts;
+        const angles_ = {
+          0: angleToCoordinates(135, center, center, radius)
+        };
+        let anglePrevious = 135;
+        for (let i = 0; i < parts; i++) {
+          // Move to 135 deg
+          if (i === 0) value.push(
+          // Move to 0 deg
+          'M', angles_[0].x, angles_[0].y);
+          const angleEnd = anglePrevious + part;
+          angles_.end = angleToCoordinates(angleEnd, center, center, radius);
+          angles_.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+
+          // Arc
+          value.push('A', radius, radius, 0, 0, 1, angles_.end.x, angles_.end.y);
+
+          // Move the gap if there's a gap
+          if (gap > 0 && i < parts - 1) {
+            value.push('M', angles_.move.x, angles_.move.y);
+            anglePrevious = angleEnd + gap;
+          } else anglePrevious = angleEnd;
+          values.push({
+            d: value.join(' ')
+          });
+
+          // Move for the next value
+          if (i < parts - 1) {
+            value = ['M', angles_.move.x, angles_.move.y];
+          }
+        }
+      }
+    }
+
+    // 0.5
+    if (boundary === 0.5) {
+      value = [];
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const total = 180;
+      const part = (total - (parts - 1) * gap) / parts;
+      const angles = {
+        start: angleToCoordinates(180, center, center, radius)
+      };
+      let anglePrevious = 180;
+      for (let i = 0; i < parts; i++) {
+        // Move to 180 deg
+        if (i === 0) value.push(
+        // Move to 0 deg
+        'M', angles.start.x, angles.start.y);
+        const angleEnd = anglePrevious + part;
+        angles.end = angleToCoordinates(angleEnd, center, center, radius);
+        angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+
+        // Arc
+        value.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
+
+        // Move the gap if there's a gap
+        if (gap > 0 && i < parts - 1) {
+          value.push('M', angles.move.x, angles.move.y);
+          anglePrevious = angleEnd + gap;
+        } else anglePrevious = angleEnd;
+        values.push({
+          d: value.join(' ')
+        });
+
+        // Move for the next value
+        if (i < parts - 1) {
+          value = ['M', angles.move.x, angles.move.y];
+        }
+      }
+    }
+
+    // 0.25
+    if (boundary === 0.25) {
+      value = [];
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const total = 90;
+      const part = clamp((total - (parts - 1) * gap) / parts, 0.01);
+      gap = clamp(gap, 0, (total - part * parts) / (parts - 1));
+      const angles = {
+        start: angleToCoordinates(225, center, center, radius)
+      };
+      let anglePrevious = 225;
+      for (let i = 0; i < parts; i++) {
+        // Move to 225 deg
+        if (i === 0) value.push(
+        // Move to 0 deg
+        'M', angles.start.x, angles.start.y);
+        const angleEnd = anglePrevious + part;
+        angles.end = angleToCoordinates(angleEnd, center, center, radius);
+        angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+
+        // Arc
+        value.push('A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y);
+
+        // Move the gap if there's a gap
+        if (gap > 0 && i < parts - 1) {
+          value.push('M', angles.move.x, angles.move.y);
+          anglePrevious = angleEnd + gap;
+        } else anglePrevious = angleEnd;
+        values.push({
+          d: value.join(' ')
+        });
+
+        // Move for the next value
+        if (i < parts - 1) {
+          value = ['M', angles.move.x, angles.move.y];
+        }
+      }
+    }
+    return values;
+  }, [width, height, parts, boundary, boundaryWidth, lineCap, outsidePadding, gap, gap_]);
+  const pathBackground = React.useMemo(() => {
+    const values = [];
+    const offset = outsidePadding;
+
+    // 1
+    if (boundary === 1) {
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      values.push(
+      // Move
+      'M', offset + boundaryWidth / 2, width / 2 + 0.001,
+      // Arc
+      'A', radius, radius, 0, 1, 0, offset + boundaryWidth / 2, width / 2);
+    }
+
+    // 0.75
+    if (boundary === 0.75) {
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const angles = {
+        end: angleToCoordinates(45, center, center, radius),
+        start: angleToCoordinates(135, center, center, radius)
+      };
+      values.push(
+      // Move
+      'M', center, center,
+      // Line middle bottom
+      'L', angles.start.x, angles.start.y,
+      // Arc
+      'A', radius, radius, 0, 1, 1, angles.end.x, angles.end.y,
+      // Line bottom middle
+      'L', center, center, 'Z');
+    }
+
+    // 0.5
+    if (boundary === 0.5) {
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const total = 180;
+      const part = (total - (parts - 1) * gap) / parts;
+      const angles = {
+        start: angleToCoordinates(180, center, center, radius)
+      };
+      const anglePrevious = 180;
+      const angleEnd = anglePrevious + part;
+      angles.end = angleToCoordinates(angleEnd, center, center, radius);
+      angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+      values.push(
+      // Move
+      'M', angles.start.x, angles.start.y,
+      // Arc
+      'A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y, 'Z');
+    }
+
+    // 0.25
+    if (boundary === 0.25) {
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const total = 90;
+      const part = clamp((total - (parts - 1) * gap) / parts, 0.01);
+      gap = clamp(gap, 0, (total - part * parts) / (parts - 1));
+      const angles = {
+        start: angleToCoordinates(225, center, center, radius)
+      };
+      const anglePrevious = 225;
+      const angleEnd = anglePrevious + part;
+      angles.end = angleToCoordinates(angleEnd, center, center, radius);
+      angles.move = angleToCoordinates(angleEnd + gap, center, center, radius);
+      values.push(
+      // Move
+      'M', center, width / 2 - boundaryWidth,
+      // Line middle bottom, top quarter left
+      'L', angles.start.x, angles.start.y,
+      // Arc
+      'A', radius, radius, 0, 0, 1, angles.end.x, angles.end.y,
+      // Line top quarter right, middle bottom
+      'L', center, width / 2 - boundaryWidth, 'Z');
+    }
+    return values.join(' ');
+  }, [width, height, boundary, boundaryWidth, outsidePadding]);
+  const pathBorder = React.useMemo(() => {
+    const values = [];
+    const offset = outsidePadding;
+
+    // 0.75
+    if (boundary === 0.75) {
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const angles = {
+        end: angleToCoordinates(45, center, center, radius),
+        start: angleToCoordinates(135, center, center, radius)
+      };
+      values.push(
+      // Move bottom angle left
+      'M', angles.start.x, angles.start.y,
+      // Line middle
+      'L', center, center,
+      // Line bottom angle right
+      'L', angles.end.x, angles.end.y);
+    }
+
+    // 0.5
+    if (boundary === 0.5) {
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const angles = {
+        start: angleToCoordinates(180, center, center, radius)
+      };
+      values.push(
+      // Move
+      'M', angles.start.x, angles.start.y,
+      // Line
+      'L', width - boundaryWidth / 2 - offset, angles.start.y);
+    }
+
+    // 0.25
+    if (boundary === 0.25) {
+      const center = width / 2;
+      radius = width / 2 - boundaryWidth / 2 - offset;
+      const total = 90;
+      const part = clamp((total - (parts - 1) * gap) / parts, 0.01);
+      gap = clamp(gap, 0, (total - part * parts) / (parts - 1));
+      const angles = {
+        start: angleToCoordinates(225, center, center, radius),
+        end: angleToCoordinates(315, center, center, radius)
+      };
+      values.push(
+      // Move middle bottom, top quarter left
+      'M', angles.start.x, angles.start.y,
+      // Line middle bottom
+      'L', center, width / 2 - boundaryWidth,
+      // Arc  top quarter right, middle bottom
+      'L', angles.end.x, angles.end.y);
+    }
+    return values.join(' ');
+  }, [width, height, boundary, boundaryWidth, outsidePadding]);
+  const children_ = children && /*#__PURE__*/React.createElement("g", {
+    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-children'], classes.children])
+  }, React.Children.toArray(children).map((item, index) => {
+    return /*#__PURE__*/React.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: `rotate(${valueFromPercentageWithinRange(item.props.value, min, max)}deg)`
+      } : undefined), item.props.style)
+    });
+  }));
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-root', `onesy-RoundMeter-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`boundary_${String(boundary).replace('.', '')}`]]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), additional, /*#__PURE__*/React.createElement(Surface, {
+    tonal: tonal,
+    color: color
+  }, _ref => {
+    let {
+      color: color_,
+      backgroundColor
+    } = _ref;
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 ${yViewBox} ${width || 0} ${height || 0}`
+    }, SvgProps, {
+      className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-svg'], SvgProps?.className, classes.svg])
+    }), childrenPosition === 'pre' && children_, background && /*#__PURE__*/React.createElement("path", _extends({
+      d: pathBackground,
+      fill: backgroundColor,
+      stroke: "none"
+    }, pathProps, BackgroundProps)), border && /*#__PURE__*/React.createElement("path", _extends({
+      d: pathBorder,
+      fill: "none",
+      stroke: color_,
+      strokeWidth: boundaryWidth
+    }, pathProps, BorderProps)), arcsVisible && /*#__PURE__*/React.createElement("g", {
+      className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs'], classes.arcs])
+    }, arcs.map((item, index) => /*#__PURE__*/React.createElement("path", _extends({
+      key: index,
+      d: item.d,
+      fill: "none",
+      stroke: color_,
+      strokeWidth: boundaryWidth,
+      strokeLinecap: lineCap
+    }, pathProps, ArcProps, ArcMainProps)))), arcsVisible && arcProgress && /*#__PURE__*/React.createElement("g", _extends({}, ArcsProgressProps, {
+      className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs-progress'], ArcsProgressProps?.className, classes.arcs_progress])
+    }), arcs.map((item, index) => /*#__PURE__*/React.createElement("path", _extends({
+      key: index,
+      d: item.d,
+      fill: "none",
+      stroke: color_,
+      strokeWidth: boundaryWidth,
+      strokeLinecap: lineCap
+    }, pathProps, ArcProps, ArcProgressProps)))), childrenPosition === 'pre-marks' && children_, marksVisible && !!marks_.length && marks.map((marksValue, index) => /*#__PURE__*/React.createElement("g", {
+      key: index,
+      className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-marks'], classes.marks])
+    }, marksValue.map((item, index_) => /*#__PURE__*/React.createElement("path", _extends({
+      key: index_,
+      d: item.d,
+      fill: "none",
+      stroke: color_,
+      strokeWidth: item.width !== undefined ? item.width : markWidth,
+      strokeLinecap: lineCap
+    }, pathProps, MarkProps))))), childrenPosition === 'pre-labels' && children_, labelsVisible && !!labels_.length && labels.map((labelsValue, index) => {
+      return /*#__PURE__*/React.createElement("g", {
+        key: index,
+        className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-labels'], classes.labels])
+      }, labelsValue.map((item, index_) => {
+        const {
+            x,
+            y,
+            value
+          } = item,
+          other_ = _objectWithoutProperties(item, _excluded4);
+        const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other_), textProps), LabelProps), {}, {
+          style: _objectSpread(_objectSpread(_objectSpread({
+            fill: color_
+          }, other_.style), textProps?.style), LabelProps?.style)
+        });
+        if (is('function', renderLabel)) return renderLabel(x, y, value, propsLabel);
+        return /*#__PURE__*/React.createElement("text", _extends({
+          key: index_,
+          x: x,
+          y: y
+        }, propsLabel, {
+          className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-label'], other_?.className, textProps?.className, LabelProps?.className, classes.label])
+        }), value);
+      }));
+    }), childrenPosition === 'post' && children_);
+  }));
+});
+RoundMeter.displayName = 'onesy-RoundMeter';
+export default RoundMeter;

package/esm/RoundMeter/index.js

@@ -0,0 +1 @@
+export { default } from './RoundMeter';