@onesy/ui-react 1.0.0

package/esm/Watch/Watch.js

@@ -0,0 +1,411 @@
+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", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "Component", "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 { is, unique } from '@onesy/utils';
+import { OnesyDate, format } from '@onesy/date';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import PathElement from '../Path';
+import TypeElement from '../Type';
+import SurfaceElement from '../Surface';
+import RoundMeterElement from '../RoundMeter';
+import LineElement from '../Line';
+import { staticClassName, angleToCoordinates } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    userSelect: 'none'
+  },
+  timeOfDay: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
+    textAnchor: 'middle',
+    alignmentBaseline: 'central',
+    dominantBaseline: 'central'
+  }),
+  version_regular: {
+    borderRadius: theme.methods.shape.radius.value('rg', 'px')
+  },
+  version_regular_size_small: {
+    minWidth: '174px',
+    padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(4, 'px')}`
+  },
+  version_regular_size_regular: {
+    minWidth: '204px',
+    padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(5, 'px')}`
+  },
+  version_regular_size_large: {
+    minWidth: '234px',
+    padding: `${theme.methods.space.value(4, 'px')} ${theme.methods.space.value(6, 'px')}`
+  },
+  shadow_version_regular: {
+    boxShadow: [theme.shadows.values.default[6], '!important']
+  },
+  version_analog: {
+    background: 'transparent',
+    '& .onesy-RoundMeter-marks': {
+      opacity: '0.74'
+    }
+  },
+  shadow_version_analog: {
+    '& .onesy-RoundMeter-svg': {
+      filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
+    }
+  },
+  version_minimal: {
+    background: 'transparent'
+  },
+  version_minimal_label: {
+    '&.onesy-RoundMeter-label': _objectSpread({}, theme.typography.values.t2)
+  },
+  shadow_version_minimal: {
+    '& .onesy-RoundMeter-svg': {
+      filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
+    }
+  },
+  version_modern: {
+    background: 'transparent'
+  },
+  shadow_version_modern: {
+    '& svg:first-of-type': {
+      filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
+    }
+  },
+  modern_background: {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: 'auto'
+  },
+  modernDate: {
+    textAnchor: 'middle'
+  }
+}), {
+  name: 'onesy-Watch'
+});
+const Watch = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWatch?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const RoundMeter = React.useMemo(() => theme?.elements?.RoundMeter || RoundMeterElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      // regular, analog, minimal, modern
+      version = 'regular',
+      size = 'regular',
+      start = true,
+      timeVisible = true,
+      timeOfDayVisible = true,
+      dateVisible = true,
+      timeFormatString = `HH:mm:ss`,
+      dateFormatString = `d, DD.MM.YYYY`,
+      renderTime,
+      renderDate,
+      shadow,
+      AnalogProps,
+      RegularProps,
+      MinimalProps,
+      ModernProps,
+      Component = 'div',
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    value: React.useRef(undefined),
+    requestAnimationFrameID: React.useRef(undefined)
+  };
+  const [value, setValue] = React.useState(OnesyDate.onesyDate);
+  const update = React.useCallback(() => {
+    setValue(OnesyDate.onesyDate);
+    refs.requestAnimationFrameID.current = requestAnimationFrame(update);
+  }, []);
+  const marks = React.useMemo(() => {
+    return {
+      analog: unique([
+      // Hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        height: 8,
+        padding: theme.methods.space.value(0.5, 'px'),
+        position: index * (100 / 12)
+      })),
+      // Minutes
+      ...Array.from({
+        length: 60
+      }).map((item, index) => ({
+        height: 4,
+        padding: theme.methods.space.value(0.5, 'px'),
+        position: index * (100 / 60)
+      }))], 'position')
+    };
+  }, []);
+  const labels = React.useMemo(() => {
+    return {
+      analog: unique([
+      // Hours
+      ...Array.from({
+        length: 12
+      }).map((item, index) => ({
+        value: index === 0 ? 12 : index,
+        padding: theme.methods.space.value(1.5, 'px'),
+        style: {
+          fontSize: 14
+        },
+        position: index * (100 / 12)
+      }))], 'position'),
+      'minimal': unique([
+      // Hours
+      {
+        value: 12,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 0 * (100 / 12)
+      }, {
+        value: 3,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 3 * (100 / 12)
+      }, {
+        value: 6,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 6 * (100 / 12)
+      }, {
+        value: 9,
+        padding: theme.methods.space.value(1, 'px'),
+        style: {
+          lineHeight: 1,
+          letterSpacing: 0,
+          fontSize: 87,
+          fontWeight: 900
+        },
+        position: 9 * (100 / 12)
+      }], 'position')
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!start) {
+      cancelAnimationFrame(refs.requestAnimationFrameID.current);
+    } else {
+      refs.requestAnimationFrameID.current = requestAnimationFrame(update);
+    }
+    return () => {
+      // Clean up
+      cancelAnimationFrame(refs.requestAnimationFrameID.current);
+    };
+  }, [start]);
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: ref,
+    tonal: tonal,
+    color: color,
+    Component: Component,
+    className: classNames([staticClassName('Watch', theme) && ['onesy-Watch-root', `onesy-Watch-version-${version}`, `onesy-Watch-size-${size}`], className, classes.root, classes[`version_${version.replace('-', '_')}`], classes[`version_${version.replace('-', '_')}_size_${size}`], shadow && classes[`shadow_version_${version.replace('-', '_')}`]])
+  }, other), /*#__PURE__*/React.createElement(Surface, {
+    tonal: tonal,
+    color: color
+  }, _ref => {
+    let {
+      backgroundColor,
+      palette
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, version === 'regular' && /*#__PURE__*/React.createElement(Line, _extends({
+      gap: 0.5,
+      direction: "column",
+      align: "center",
+      justify: "center"
+    }, RegularProps, {
+      className: classNames([staticClassName('Watch', theme) && ['onesy-Watch-regular'], RegularProps?.className, classes.regular])
+    }), timeVisible && (is('function', renderTime) ? renderTime(value) : /*#__PURE__*/React.createElement(Type, {
+      version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3'
+    }, format(value, timeFormatString))), dateVisible && (is('function', renderDate) ? renderDate(value) : /*#__PURE__*/React.createElement(Type, {
+      version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+      priority: "secondary"
+    }, format(value, dateFormatString)))), version === 'analog' && /*#__PURE__*/React.createElement(RoundMeter, _extends({
+      tonal: tonal,
+      color: color,
+      size: size,
+      marks: marks.analog,
+      labels: labels.analog,
+      background: true
+    }, AnalogProps), timeOfDayVisible && /*#__PURE__*/React.createElement("text", {
+      x: 120,
+      y: 74,
+      stroke: "none",
+      fill: "currentColor",
+      className: classNames([staticClassName('Watch', theme) && ['onesy-Watch-time-of-day'], classes.timeOfDay]),
+      style: {
+        fontSize: 11
+      }
+    }, format(value, `A`)), /*#__PURE__*/React.createElement(Path, {
+      Component: "rect",
+      value: 100 / 12 * value.hour,
+      x: 120,
+      y: 120 - 5 / 2,
+      height: 5,
+      width: 57,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: 'currentColor'
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      Component: "rect",
+      value: 100 / 60 * value.minute,
+      x: 120,
+      y: 120 - 3 / 2,
+      height: 3,
+      width: 105,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: 'currentColor'
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      d: `M 120 120 L ${angleToCoordinates(0, 120, 120, 115).x} ${angleToCoordinates(0, 120, 120, 115).y}`,
+      value: 100 / 60 * value.second,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'currentColor'
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      Component: "circle",
+      r: "4",
+      cx: "120",
+      cy: "120",
+      style: {
+        fill: 'currentColor',
+        stroke: color,
+        strokeWidth: 1
+      }
+    })), version === 'minimal' && /*#__PURE__*/React.createElement(RoundMeter, _extends({
+      tonal: tonal,
+      color: color,
+      size: size,
+      labels: labels['minimal'],
+      arcsVisible: false,
+      LabelProps: {
+        className: classes.version_minimal_label,
+        style: {
+          fill: theme.methods.palette.color.value(undefined, 60, true, palette)
+        }
+      },
+      background: true
+    }, MinimalProps), /*#__PURE__*/React.createElement(Path, {
+      d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`,
+      value: 100 / 12 * value.hour,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 30, true, palette)
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      d: `M 120 118 L 217 118 A 1 1 0 0 1 217 122 L 120 122 A 1 1 0 0 1 120 118`,
+      value: 100 / 60 * value.minute,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 20, true, palette)
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      d: `M 120 119.5 L 217 119.5 A 1 1 0 0 1 217 120.5 L 120 120.5 A 1 1 0 0 1 120 119.5`,
+      value: 100 / 60 * value.second,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 10, true, palette)
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      Component: "circle",
+      r: "3",
+      cx: "120",
+      cy: "120",
+      style: {
+        stroke: 'none',
+        fill: theme.methods.palette.color.value(undefined, 10, true, palette)
+      }
+    })), version === 'modern' && /*#__PURE__*/React.createElement(RoundMeter, _extends({
+      tonal: tonal,
+      color: color,
+      size: size,
+      arcsVisible: false,
+      additional: /*#__PURE__*/React.createElement("svg", {
+        viewBox: "0 0 240 240",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: theme.methods.palette.color.value(undefined, 10, false, palette),
+        className: classNames([staticClassName('Watch', theme) && ['onesy-Watch-modern-background'], classes.modern_background])
+      }, /*#__PURE__*/React.createElement("path", {
+        d: "M109.976 2.90439C116.096 -0.528799 123.562 -0.528799 129.683 2.90439L143.879 10.8678C146.815 12.5147 150.117 13.3994 153.483 13.4411L169.759 13.6427C176.776 13.7296 183.241 17.4627 186.825 23.496L195.138 37.4906C196.857 40.3849 199.274 42.802 202.168 44.5212L216.163 52.8337C222.196 56.4175 225.929 62.8832 226.016 69.9001L226.218 86.1761C226.26 89.5422 227.144 92.8441 228.791 95.78L236.755 109.976C240.188 116.096 240.188 123.563 236.755 129.683L228.791 143.879C227.144 146.815 226.26 150.117 226.218 153.483L226.016 169.759C225.929 176.776 222.196 183.242 216.163 186.825L202.168 195.138C199.274 196.857 196.857 199.274 195.138 202.168L186.825 216.163C183.241 222.196 176.776 225.929 169.759 226.016L153.483 226.218C150.117 226.26 146.815 227.144 143.879 228.791L129.683 236.755C123.562 240.188 116.096 240.188 109.976 236.755L95.7799 228.791C92.844 227.144 89.5421 226.26 86.1761 226.218L69.9001 226.016C62.8832 225.929 56.4174 222.196 52.8337 216.163L44.5211 202.168C42.802 199.274 40.3848 196.857 37.4906 195.138L23.496 186.825C17.4626 183.242 13.7296 176.776 13.6427 169.759L13.4411 153.483C13.3994 150.117 12.5147 146.815 10.8678 143.879L2.90436 129.683C-0.52883 123.563 -0.528829 116.096 2.90436 109.976L10.8678 95.78C12.5147 92.8441 13.3994 89.5422 13.4411 86.1761L13.6427 69.9001C13.7296 62.8832 17.4626 56.4175 23.496 52.8337L37.4906 44.5212C40.3848 42.802 42.802 40.3849 44.5211 37.4906L52.8337 23.496C56.4174 17.4627 62.8832 13.7296 69.9001 13.6427L86.1761 13.4411C89.5421 13.3994 92.844 12.5147 95.78 10.8678L109.976 2.90439Z"
+      }))
+    }, ModernProps), /*#__PURE__*/React.createElement(Path, {
+      Component: "g",
+      value: 100 / 60 * value.second,
+      style: {
+        transformOrigin: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("text", {
+      x: 25,
+      y: 130,
+      stroke: "none",
+      fill: theme.methods.palette.color.value(undefined, 90, false, palette),
+      transform: "rotate(-90, 25, 120)",
+      className: classNames([staticClassName('Watch', theme) && ['onesy-Watch-modern-date'], classes.modernDate]),
+      style: {
+        fontSize: 19
+      }
+    }, format(value, `d DD`))), /*#__PURE__*/React.createElement(Path, {
+      d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`,
+      value: 100 / 12 * value.hour,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: palette[20]
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      d: `M 120 114 L 194 114 A 1 1 0 0 1 194 126 L 120 126 A 1 1 0 0 1 120 114`,
+      value: 100 / 60 * value.minute,
+      style: {
+        transformOrigin: '50% 50%',
+        stroke: 'none',
+        fill: palette[30]
+      }
+    }), /*#__PURE__*/React.createElement(Path, {
+      Component: "circle",
+      r: "8",
+      cx: "215",
+      cy: "120",
+      value: 100 / 60 * value.second,
+      style: {
+        stroke: 'none',
+        fill: palette[50],
+        transformOrigin: 'center'
+      }
+    })));
+  }));
+});
+Watch.displayName = 'onesy-Watch';
+export default Watch;

package/esm/Watch/index.js

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

package/esm/Weather/Weather.js

@@ -0,0 +1,276 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+const _excluded = ["tonal", "color", "style"],
+  _excluded2 = ["tonal", "color", "version", "size", "shadow", "dayTime", "weather", "temperature", "values", "interval", "IconDay", "IconNight", "IconCloud", "IconRain", "IconSnow", "IconProps", "Component", "className", "style"];
+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 } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialCircle from '@amaui/icons-material-rounded-react/IconMaterialCircleW100Filled';
+import IconMaterialNightlight from '@amaui/icons-material-rounded-react/IconMaterialNightlightW100Filled';
+import IconMaterialCloud from '@amaui/icons-material-rounded-react/IconMaterialCloudW100Filled';
+import IconMaterialRainy from '@amaui/icons-material-rounded-react/IconMaterialRainyW100Filled';
+import IconMaterialCloudySnowing from '@amaui/icons-material-rounded-react/IconMaterialCloudySnowingW100Filled';
+import SurfaceElement from '../Surface';
+import TypeElement from '../Type';
+import FadeElement from '../Fade';
+import TransitionsElement from '../Transitions';
+import { staticClassName } from '../utils';
+const IconWeather = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const theme = useOnesyTheme();
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const {
+      tonal,
+      color: color_,
+      style
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Surface, {
+    tonal: tonal,
+    color: color_
+  }, _ref => {
+    let {
+      color,
+      backgroundColor
+    } = _ref;
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      ref: ref,
+      viewBox: "0 0 177 178",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, other, {
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        color,
+        fill: backgroundColor
+      })
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M93.964 1.5C85.944 3.181 78.964 4.033 66.185 12.689C62.393 14.903 52.521 23.956 36.901 39.544C15.559 60.841 12.951 63.812 9.244 71.058C2.449 84.337 0.5 92.138 0.5 106.058C0.5 115.812 0.935 119.455 2.826 125.523C10.658 150.657 27.954 167.964 52.964 175.692C59.053 177.573 62.722 178.008 72.464 178C86.543 177.99 93.354 176.43 105.964 170.329C114.063 166.411 115.649 165.033 139.556 141.138C162.652 118.054 166.644 113.063 170.5 105.504C175.5 93.058 176.964 86.676 176.964 74.212C176.964 61.815 175.094 53.787 169.473 42.058C160.683 23.716 143.356 9.513 123.082 4.033C114.951 1.835 101.984 -0.181001 93.964 1.5Z"
+    }));
+  });
+});
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    aspectRatio: '1',
+    width: '100vw',
+    '&.onesy-Surface-root': {
+      background: 'transparent'
+    }
+  },
+  text: {
+    position: 'absolute',
+    textAlign: 'center',
+    fontWeight: '500',
+    lineHeight: '1',
+    userSelect: 'none'
+  },
+  text_regular: {
+    top: '22%',
+    width: '100%',
+    paddingLeft: '30%',
+    paddingRight: '11%',
+    fontSize: '34%'
+  },
+  text_large: {
+    top: '22%',
+    width: '100%',
+    paddingLeft: '27%',
+    paddingRight: '11%',
+    fontSize: '30%'
+  },
+  icon_background: {
+    '&.onesy-Icon-root': {
+      width: '100%',
+      height: 'auto'
+    }
+  },
+  icon_background_shadow: {
+    filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
+  },
+  icon_dayTime: {
+    '&.onesy-Icon-root': {
+      position: 'absolute',
+      zIndex: '1',
+      bottom: '21%',
+      width: '40% !important',
+      height: 'auto',
+      left: '13%'
+    }
+  },
+  icon_dayTime_day: {
+    '&.onesy-Icon-root': {
+      color: '#fcc21d'
+    }
+  },
+  icon_dayTime_night: {
+    '&.onesy-Icon-root': {
+      color: '#dfe0e2'
+    }
+  },
+  icon_weather: {
+    position: 'absolute',
+    width: '40% !important',
+    height: 'auto',
+    zIndex: '4'
+  },
+  icon_arrangement_regular: {
+    bottom: '22%',
+    left: '15%'
+  },
+  icon_arrangement_pair: {
+    bottom: '8%',
+    left: '25%',
+    opacity: '0.94 !important'
+  },
+  icon_weather_cloudy: {
+    '&.onesy-Icon-root': {
+      color: '#f1f3f4'
+    }
+  },
+  icon_weather_rainy: {
+    '&.onesy-Icon-root': {
+      color: '#e6f5fc'
+    }
+  },
+  icon_weather_snowy: {
+    '&.onesy-Icon-root': {
+      color: '#dcf0ff'
+    }
+  },
+  size_small: {
+    maxWidth: '120px'
+  },
+  size_regular: {
+    maxWidth: '180px'
+  },
+  size_large: {
+    maxWidth: '240px'
+  }
+}), {
+  name: 'onesy-Weather'
+});
+const Weather = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWeather?.props?.default), props_), [props_]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const Transitions = React.useMemo(() => theme?.elements?.Transitions || TransitionsElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'filled',
+      size = 'regular',
+      shadow,
+      dayTime: dayTime_,
+      weather: weather_,
+      temperature: temperature_,
+      values: values_,
+      // Once every 1 hour
+      interval = 60 * 60 * 1e3,
+      IconDay = IconMaterialCircle,
+      IconNight = IconMaterialNightlight,
+      IconCloud = IconMaterialCloud,
+      IconRain = IconMaterialRainy,
+      IconSnow = IconMaterialCloudySnowing,
+      IconProps: IconProps_,
+      Component = 'div',
+      className,
+      style
+    } = props,
+    other = _objectWithoutProperties(props, _excluded2);
+  const {
+    classes
+  } = useStyle();
+  const [rect, setRect] = React.useState();
+  const [values, setValues] = React.useState(values_ !== undefined ? values_ : {
+    dayTime: dayTime_ !== undefined ? dayTime_ : 'day',
+    weather: weather_ !== undefined ? weather_ : 'clear',
+    temperature: temperature_ !== undefined ? temperature_ : '14'
+  });
+  const refs = {
+    root: React.useRef(undefined),
+    values: React.useRef(undefined)
+  };
+  refs.values.current = values;
+  const styles = {
+    root: {}
+  };
+  React.useEffect(() => {
+    const method = () => setRect(refs.root.current?.getBoundingClientRect());
+    const observer = new ResizeObserver(method);
+    method();
+    observer.observe(refs.root.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  React.useEffect(() => {
+    if (values_ !== undefined && values_ !== refs.values.current) setValues(values_);
+  }, [values_]);
+  React.useEffect(() => {
+    if (dayTime_ !== undefined && dayTime_ !== refs.values.current.dayTime) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+      dayTime: dayTime_
+    }));
+  }, [dayTime_]);
+  React.useEffect(() => {
+    if (weather_ !== undefined && weather_ !== refs.values.current.weather) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+      weather: weather_
+    }));
+  }, [weather_]);
+  React.useEffect(() => {
+    if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
+      temperature: temperature_
+    }));
+  }, [temperature_]);
+  if (!['small', 'regular', 'large'].includes(size)) styles.root.maxWidth = size;
+  const IconProps = _objectSpread({
+    color: 'unset'
+  }, IconProps_);
+  let IconDayTime = IconDay;
+  if (['day'].includes(values.dayTime)) IconDayTime = IconDay;
+  if (['night'].includes(values.dayTime)) IconDayTime = IconNight;
+  let IconWeather_ = IconCloud;
+  if (['partly clear', 'cloudy'].includes(values.weather)) IconWeather_ = IconCloud;
+  if (['rainy'].includes(values.weather)) IconWeather_ = IconRain;
+  if (['snowy'].includes(values.weather)) IconWeather_ = IconSnow;
+  const useDayTime = ['clear', 'partly clear'].includes(values.weather);
+  const useWeather = !['clear'].includes(values.weather);
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    version: version,
+    Component: Component,
+    className: classNames([staticClassName('Weather', theme) && ['onesy-Weather-root', `onesy-Weather-version-${version}`, `onesy-Weather-size-${size}`], className, classes.root, classes[`size_${size}`]]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), /*#__PURE__*/React.createElement(IconWeather, {
+    tonal: tonal,
+    color: color,
+    className: classNames([staticClassName('Weather', theme) && ['onesy-Weather-icon-background'], classes.icon_background, shadow && classes.icon_background_shadow])
+  }), /*#__PURE__*/React.createElement(Fade, {
+    in: values.temperature !== undefined
+  }, /*#__PURE__*/React.createElement(Type, {
+    version: "d1",
+    className: classNames([staticClassName('Weather', theme) && ['onesy-Weather-text'], classes.text, classes[`text_${+values.temperature < 100 ? 'regular' : 'large'}`]]),
+    style: {
+      fontSize: `${(rect?.width || 0) * (+values.temperature < 100 ? +values.temperature < -10 ? 0.32 : 0.34 : 0.27)}px`
+    }
+  }, values.temperature, "\xB0")), useDayTime && /*#__PURE__*/React.createElement(Transitions, null, /*#__PURE__*/React.createElement(Fade, {
+    key: values.dayTime
+  }, /*#__PURE__*/React.createElement(IconDayTime, _extends({}, IconProps, {
+    className: classNames([staticClassName('Weather', theme) && ['onesy-Weather-icon', 'onesy-Weather-icon-day-time'], IconProps?.className, classes.icon_dayTime, classes[`icon_dayTime_${values.dayTime}`]])
+  })))), useWeather && values.weather && /*#__PURE__*/React.createElement(Transitions, null, /*#__PURE__*/React.createElement(Fade, {
+    key: values.weather
+  }, /*#__PURE__*/React.createElement(IconWeather_, _extends({}, IconProps, {
+    className: classNames([staticClassName('Weather', theme) && ['onesy-Weather-icon', 'onesy-Weather-icon-weather'], IconProps?.className, classes.icon_weather, classes[`icon_weather_${values.weather === 'partly clear' ? 'cloudy' : values.weather}`], classes[`icon_arrangement_${useDayTime ? 'pair' : 'regular'}`]])
+  })))));
+});
+Weather.displayName = 'onesy-Weather';
+export default Weather;

package/esm/Weather/index.js

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