@onesy/ui-react 1.0.0

package/esm/PieChart/PieChart.js

@@ -0,0 +1,364 @@
+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", "values", "animate", "animateTimeout", "names", "gap", "innerOffset", "tooltipRender", "PathProps", "LegendItemProps", "className"],
+  _excluded2 = ["item", "className"];
+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 { is, copy, percentageFromValueWithinRange, unique } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import SurfaceElement from '../Surface';
+import ChartElement from '../Chart';
+import PathElement from '../Path';
+import useMediaQuery from '../useMediaQuery';
+import { angleToCoordinates, staticClassName, valueBreakpoints } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    '& .onesy-Chart-wrapper': {
+      aspectRatio: '1',
+      maxWidth: '240px',
+      height: 'unset',
+      overflow: 'hidden'
+    }
+  },
+  legend_item: {
+    userSelect: 'none'
+  },
+  legend_icon: {
+    width: '10px',
+    height: '2px'
+  },
+  text: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
+    textAnchor: 'middle',
+    alignmentBaseline: 'middle',
+    userSelect: 'none'
+  }),
+  append_wrapper: {
+    userSelect: 'none',
+    pointerEvents: 'none'
+  },
+  append: {
+    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
+    borderRadius: theme.methods.shape.radius.value(1.5, 'px')
+  },
+  append_icon: {
+    width: '8px',
+    height: '8px',
+    borderRadius: theme.methods.shape.radius.value(40, 'px')
+  }
+}), {
+  name: 'onesy-PieChart'
+});
+const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPieChart?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
+  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      values,
+      animate: animate_,
+      animateTimeout: animateTimeout_,
+      names,
+      gap = 4,
+      innerOffset = 0,
+      tooltipRender: tooltipRender_,
+      PathProps,
+      LegendItemProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: React.useRef(undefined),
+    rects: React.useRef(undefined),
+    pathStyle: React.useRef(undefined),
+    animate: React.useRef(undefined),
+    animateTimeout: React.useRef(undefined),
+    init: React.useRef(undefined),
+    theme: React.useRef(undefined)
+  };
+  const keys = React.useMemo(() => {
+    const result = [];
+    const items = [animate_, animateTimeout_];
+    items.forEach(item => {
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+    });
+    return unique(result);
+  }, [animate_, animateTimeout_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+      element: refs.root.current
+    });
+  });
+  const animate = valueBreakpoints(animate_, true, breakpoints, theme);
+  const animateTimeout = valueBreakpoints(animateTimeout_, 140, breakpoints, theme);
+  const [value, setValue] = React.useState();
+  const [init, setInit] = React.useState();
+  refs.theme.current = theme;
+  refs.animate.current = animate;
+  refs.animateTimeout.current = animateTimeout;
+  refs.init.current = init;
+  const LegendItem = React.useCallback(props__ => {
+    const {
+        item = {},
+        className: className_
+      } = props__,
+      other_ = _objectWithoutProperties(props__, _excluded2);
+    const {
+      color: color_,
+      tone = 'main',
+      name = 'No name'
+    } = item;
+    return /*#__PURE__*/React.createElement(Line, _extends({
+      gap: 1,
+      direction: "row",
+      align: "center"
+    }, LegendItemProps, {
+      className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-legend-item'], className_, LegendItemProps?.className, classes.legend_item])
+    }, other_), /*#__PURE__*/React.createElement("span", {
+      className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-legend-icon'], classes.legend_icon]),
+      style: {
+        background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
+      }
+    }), /*#__PURE__*/React.createElement(Type, {
+      version: "b3"
+    }, name));
+  }, [theme]);
+  const make = () => {
+    // Make values into x, y, coordinates
+    // normalized in rect width, height values
+
+    // invert y so 0, 0 is at bottom left
+    if (refs.rects.current && values) {
+      const {
+        width,
+        height
+      } = refs.rects.current.wrapper;
+
+      // Legend
+      const legend_ = values.map(item => {
+        return {
+          item,
+          element: /*#__PURE__*/React.createElement(LegendItem, {
+            item: item
+          })
+        };
+      });
+      const center = width / 2;
+      const radius = width / 2 - gap / 2;
+      const total = 360;
+      const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
+      const angles = {
+        start: angleToCoordinates(0, center, center, radius)
+      };
+      let anglePrevious = 0;
+      let anglePreviousInner = 0;
+      let value_ = [];
+      let d = '';
+
+      // Elements
+      const elements_ = copy(values).map((item, index) => {
+        const {
+          color: color_,
+          tone = 'main'
+        } = item;
+        const partPercentage = percentageFromValueWithinRange(item.values[0], 0, valueTotal);
+        let part = total * (partPercentage / 100);
+        if (partPercentage === 100) part -= 0.0001;
+        const startInner = angleToCoordinates(anglePreviousInner, center, center, radius * innerOffset);
+
+        // Move from inner value
+        if (index === 0) value_.push('M', startInner.x, startInner.y,
+        // Move to 0 deg
+        'L', angles.start.x, angles.start.y);
+        const angleEnd = anglePrevious + part;
+        const angleEndInner = anglePreviousInner + part;
+        const angleText = anglePrevious + part / 2;
+        const angleTextCoordinates = angleToCoordinates(angleText, center, center, radius - (radius - radius * innerOffset) / 2);
+        angles.end = angleToCoordinates(angleEnd, center, center, radius);
+        angles.endInner = angleToCoordinates(angleEndInner, center, center, radius * innerOffset);
+        angles.move = angleToCoordinates(angleEnd, center, center, radius);
+        angles.moveInner = angleToCoordinates(angleEnd, center, center, radius * innerOffset);
+
+        // Arc
+        let invert = 0;
+        if (part > 180) invert = 1;
+        value_.push('A', radius, radius, 0, invert, 1, angles.end.x, angles.end.y);
+
+        // To donut value or center
+        if (innerOffset) {
+          const endInner = angleToCoordinates(angleEndInner, center, center, radius * innerOffset);
+          value_.push('L', endInner.x, endInner.y);
+          value_.push('A', radius * innerOffset, radius * innerOffset, 0, invert, 0, startInner.x, startInner.y);
+        }
+        value_.push('Z');
+
+        // path
+        d = value_.join(' ');
+        anglePrevious = angleEnd;
+        anglePreviousInner = angleEndInner;
+
+        // Move for the next value
+        if (index < values.length - 1) {
+          value_ = ['M', angles.moveInner.x, angles.moveInner.y, 'L', angles.move.x, angles.move.y];
+        }
+        return {
+          item,
+          element: /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Path, _extends({
+            d: d,
+            fill: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone],
+            stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
+            strokeWidth: gap
+          }, PathProps, {
+            style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
+              opacity: 0,
+              transform: 'scale(0)'
+            }), {}, {
+              transformBox: 'fill-box',
+              transformOrigin: 'center'
+            }, refs.pathStyle.current)
+          })), partPercentage >= 7 && /*#__PURE__*/React.createElement("text", {
+            x: angleTextCoordinates.x,
+            y: angleTextCoordinates.y,
+            className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
+            fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone], true, 'light'),
+            style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
+              opacity: 0
+            }), refs.animate.current && refs.init.current === 'animated' && {
+              opacity: 1
+            }), refs.pathStyle.current)
+          }, `${partPercentage.toFixed(1)}%`.replace('.0%', '%')))
+        };
+      });
+
+      // Sort
+      elements_.sort((a, b) => a?.item?.values?.[0] - b?.item?.values?.[0]);
+
+      // Update children value
+      setValue({
+        legend: legend_,
+        elements: elements_
+      });
+    }
+  };
+  const initMethod = React.useCallback(() => {
+    if (animate) {
+      if (!init) {
+        refs.pathStyle.current = {
+          transition: theme.methods.transitions.make(['transform', 'opacity'], {
+            timing_function: 'decelerated'
+          })
+        };
+        setInit(true);
+        setTimeout(() => {
+          refs.pathStyle.current = _objectSpread(_objectSpread({}, refs.pathStyle.current), {}, {
+            opacity: 1,
+            transform: 'scale(1)'
+          });
+          setInit('animated');
+        }, refs.animateTimeout.current);
+      }
+    }
+  }, [init, animate]);
+  React.useEffect(() => {
+    make();
+    initMethod();
+  }, [values, theme, animate, init]);
+  const onUpdateRects = valueNew => {
+    refs.rects.current = valueNew;
+    make();
+  };
+  const tooltipRender = is('function', tooltipRender_) ? tooltipRender_ : values_ => {
+    const {
+      name,
+      color: color_,
+      tone = 'main',
+      values: values__
+    } = values_;
+    const valueTotal = values.reduce((result, itemValue) => result += itemValue.values[0], 0);
+    const valueValue = values__[0];
+    const valuePercentage = (valueValue / valueTotal * 100).toFixed(1).replace('.0', '');
+    return {
+      element: /*#__PURE__*/React.createElement(Line, {
+        tonal: tonal,
+        color: color,
+        elevation: 1,
+        gap: 0.5,
+        direction: "column",
+        Component: Surface,
+        className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-append'], classes.append])
+      }, /*#__PURE__*/React.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classNames([staticClassName('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
+        style: {
+          background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
+        }
+      }), /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, name)), /*#__PURE__*/React.createElement(Line, {
+        gap: 0.4,
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/React.createElement(Type, {
+        version: "b3",
+        style: {
+          fontWeight: 600
+        }
+      }, names?.value || 'Value'), /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, valueValue)), /*#__PURE__*/React.createElement(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center"
+      }, /*#__PURE__*/React.createElement(Type, {
+        version: "b3",
+        style: {
+          fontWeight: 600
+        }
+      }, names?.percentage || 'Percentage'), /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, valuePercentage, "%"))))
+    };
+  };
+  return /*#__PURE__*/React.createElement(Chart, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    values: values,
+    names: names,
+    elements: value?.elements,
+    legend: value?.legend,
+    labels: false,
+    marks: false,
+    borders: false,
+    tooltipRender: tooltipRender,
+    onUpdateRects: onUpdateRects,
+    elementTooltip: true,
+    noMain: true,
+    className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-root'], className, classes.root])
+  }, other));
+});
+PieChart.displayName = 'onesy-PieChart';
+export default PieChart;

package/esm/PieChart/index.js

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

package/esm/Placeholder/Placeholder.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["color", "version", "width", "height", "animation", "text", "Component", "className", "style", "children"];
+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 { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SurfaceElement from '../Surface';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  '@keyframes move': {
+    '100%': {
+      transform: 'translateX(100%)'
+    }
+  },
+  '@keyframes pulse': {
+    '0%': {
+      opacity: '1'
+    },
+    '50%': {
+      opacity: '0.4'
+    },
+    '100%': {
+      opacity: '1'
+    }
+  },
+  '@keyframes pulseDark': {
+    '0%': {
+      opacity: '1'
+    },
+    '50%': {
+      opacity: '0.7'
+    },
+    '100%': {
+      opacity: '1'
+    }
+  },
+  root: {
+    position: 'relative',
+    userSelect: 'none',
+    overflow: 'hidden'
+  },
+  wrapper: {
+    opacity: theme.palette.light ? '0.07' : '0.14',
+    background: 'currentColor',
+    width: '100%',
+    height: '100%'
+  },
+  animation_wave: {
+    '&::before': {
+      content: "''",
+      position: 'absolute',
+      inset: '0',
+      background: `linear-gradient(90deg, transparent, ${theme.methods.palette.color.colorToRgb(theme.palette.text.default.primary, 4)}, transparent)`,
+      transform: 'translateX(-100%)',
+      animation: '$move 2.4s infinite'
+    }
+  },
+  animation_pulse: {
+    animation: `$pulse${theme.palette.light ? '' : 'Dark'} 2.4s 0.4s infinite`
+  },
+  version_circle: {
+    borderRadius: theme.methods.shape.radius.value(40, 'px')
+  },
+  version_rounded: {
+    borderRadius: theme.methods.shape.radius.value(1, 'px')
+  },
+  version_rectangle: {
+    borderRadius: '0px'
+  },
+  text: {
+    height: '1em'
+  },
+  children: {
+    visibility: 'hidden'
+  }
+}), {
+  name: 'onesy-Placeholder'
+});
+const Placeholder = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPlaceholder?.props?.default), props_), [props_]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const {
+      color = 'default',
+      version = 'rounded',
+      width,
+      height,
+      animation = 'pulse',
+      text,
+      Component = 'div',
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const styles = {
+    root: {}
+  };
+  if (width !== undefined) styles.root.width = width;
+  if (height !== undefined) styles.root.height = height;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    className: classNames([staticClassName('Placeholder', theme) && [`onesy-Placeholder-root`], className, classes.root, classes[`version_${version}`], animation && animation && classes[`animation_${animation}`], text && classes.text]),
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }, other), /*#__PURE__*/React.createElement(Surface, {
+    version: "text",
+    tonal: false,
+    color: color,
+    className: classNames([staticClassName('Placeholder', theme) && [`onesy-Placeholder-wrapper`], classes.wrapper])
+  }, children && /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('Placeholder', theme) && [`onesy-Placeholder-children`], classes.children])
+  }, children)));
+});
+Placeholder.displayName = 'onesy-Placeholder';
+export default Placeholder;

package/esm/Placeholder/index.js

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

package/esm/Portal/Portal.js

@@ -0,0 +1,30 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["element", "children"];
+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 ReactDOM from 'react-dom';
+import { is } from '@onesy/utils';
+import { useOnesyTheme } from '@onesy/style-react';
+const Portal = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPortal?.props?.default), props_), [props_]);
+  const {
+      element,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.cloneElement(children, _objectSpread({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      if (children.ref) {
+        if (is('function', children.ref)) children.ref(item);else children.ref.current = item;
+      }
+    }
+  }, other)), element);
+});
+Portal.displayName = 'onesy-Portal';
+export default Portal;

package/esm/Portal/index.js

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

package/esm/Properties/Properties.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["version", "size", "values", "onlyWithValues", "maxWidth", "PropertyProps", "className", "children"];
+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 { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import LineElement from '../Line/Line';
+import PropertyElement from '../Property';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {},
+  maxWidth_extra_small: {
+    maxWidth: '240px'
+  },
+  maxWidth_small: {
+    maxWidth: '340px'
+  },
+  maxWidth_regular: {
+    maxWidth: '440px'
+  },
+  maxWidth_large: {
+    maxWidth: '740px'
+  },
+  maxWidth_extra_large: {
+    maxWidth: '1024px'
+  },
+  maxWidth_extra_extra_large: {
+    maxWidth: '1440px'
+  }
+}), {
+  name: 'onesy-Properties'
+});
+const Properties = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyProperties?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Property = React.useMemo(() => theme?.elements?.Property || PropertyElement, [theme]);
+  const {
+      version = 'row-20',
+      size = 'regular',
+      values = [],
+      onlyWithValues = true,
+      maxWidth,
+      PropertyProps,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  if (!values?.length || onlyWithValues && !values.every(item => item.value !== undefined)) return null;
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    gap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5,
+    rowGap: size === 'large' ? 1.5 : size === 'regular' ? 1 : 0.5,
+    fullWidth: true,
+    className: classNames([staticClassName('Properties', theme) && ['onesy-Properties-root', `onesy-Properties-version-${version}`, `onesy-Properties-size-${size}`], className, classes.root, maxWidth && classes[`maxWidth_${maxWidth}`]])
+  }, other), values?.filter(Boolean)?.map((item, index) => /*#__PURE__*/React.createElement(Property, _extends({
+    key: index,
+    version: version,
+    size: size,
+    name: item.name,
+    value: item.value,
+    separator: item.separator
+  }, PropertyProps, item.props))));
+});
+Properties.displayName = 'onesy-Properties';
+export default Properties;

package/esm/Properties/index.js

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