@onesy/ui-react 1.0.180 → 1.0.181

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/RoundMeter/RoundMeter.js +1 -0
  2. package/Watch/Watch.d.ts +1 -0
  3. package/Watch/Watch.js +24 -9
  4. package/esm/RoundMeter/RoundMeter.js +1 -0
  5. package/esm/Watch/Watch.js +24 -9
  6. package/esm/index.js +1 -1
  7. package/index.js +1 -1
  8. package/package.json +1 -1
package/RoundMeter/RoundMeter.js CHANGED
@@ -21,6 +21,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
21
21
  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; }
22
22
  const useStyle = (0, _styleReact.style)(theme => ({
23
23
  root: {
24
+ position: 'relative',
24
25
  width: '100vw'
25
26
  },
26
27
  size_small: {
package/Watch/Watch.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare type IWatch = Omit<ISurface, 'version'> & {
17
17
  RegularProps?: IPropsAny;
18
18
  MinimalProps?: IPropsAny;
19
19
  ModernProps?: IPropsAny;
20
+ RoundMeterProps?: IPropsAny;
20
21
  };
21
22
  declare const Watch: React.FC<IWatch>;
22
23
  export default Watch;
package/Watch/Watch.js CHANGED
@@ -18,7 +18,7 @@ var _RoundMeter = _interopRequireDefault(require("../RoundMeter"));
18
18
  var _Line = _interopRequireDefault(require("../Line"));
19
19
  var _utils2 = require("../utils");
20
20
  var _jsxRuntime = require("react/jsx-runtime");
21
- const _excluded = ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "Component", "className", "children"];
21
+ const _excluded = ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "RoundMeterProps", "Component", "className", "children"];
22
22
  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; }
23
23
  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; }
24
24
  const useStyle = (0, _styleReact.style)(theme => ({
@@ -74,6 +74,16 @@ const useStyle = (0, _styleReact.style)(theme => ({
74
74
  version_modern: {
75
75
  background: 'transparent'
76
76
  },
77
+ roundMeter: {
78
+ '&.onesy-RoundMeter-root': {
79
+ marginInline: 'auto',
80
+ '& .onesy-RoundMeter-svg': {
81
+ aspectRatio: '1 / 1',
82
+ maxWidth: '100%',
83
+ maxHeight: '100%'
84
+ }
85
+ }
86
+ },
77
87
  shadow_version_modern: {
78
88
  '& svg:first-of-type': {
79
89
  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%))`
@@ -82,8 +92,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
82
92
  modern_background: {
83
93
  position: 'absolute',
84
94
  inset: '0',
85
- width: '100%',
86
- height: 'auto'
95
+ aspectRatio: '1 / 1',
96
+ maxWidth: '100%',
97
+ maxHeight: '100%'
87
98
  },
88
99
  modernDate: {
89
100
  textAnchor: 'middle'
@@ -120,6 +131,7 @@ const Watch = props_ => {
120
131
  RegularProps,
121
132
  MinimalProps,
122
133
  ModernProps,
134
+ RoundMeterProps,
123
135
  Component = 'div',
124
136
  className,
125
137
  children
@@ -261,14 +273,15 @@ const Watch = props_ => {
261
273
  l
262
274
  })
263
275
  }))]
264
- })), version === 'analog' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread({
276
+ })), version === 'analog' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
265
277
  tonal: tonal,
266
278
  color: color,
267
279
  size: size,
268
280
  marks: marks.analog,
269
281
  labels: labels.analog,
270
282
  background: true
271
- }, AnalogProps), {}, {
283
+ }, RoundMeterProps), AnalogProps), {}, {
284
+ className: (0, _styleReact.classNames)([RoundMeterProps === null || RoundMeterProps === void 0 ? void 0 : RoundMeterProps.className, AnalogProps === null || AnalogProps === void 0 ? void 0 : AnalogProps.className, classes.roundMeter]),
272
285
  children: [timeOfDayVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
273
286
  x: 120,
274
287
  y: 74,
@@ -321,7 +334,7 @@ const Watch = props_ => {
321
334
  strokeWidth: 1
322
335
  }
323
336
  })]
324
- })), version === 'minimal' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread({
337
+ })), version === 'minimal' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
325
338
  tonal: tonal,
326
339
  color: color,
327
340
  size: size,
@@ -334,7 +347,8 @@ const Watch = props_ => {
334
347
  }
335
348
  },
336
349
  background: true
337
- }, MinimalProps), {}, {
350
+ }, RoundMeterProps), MinimalProps), {}, {
351
+ className: (0, _styleReact.classNames)([RoundMeterProps === null || RoundMeterProps === void 0 ? void 0 : RoundMeterProps.className, MinimalProps === null || MinimalProps === void 0 ? void 0 : MinimalProps.className, classes.roundMeter]),
338
352
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Path, {
339
353
  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`,
340
354
  value: 100 / 12 * value.hour,
@@ -369,7 +383,7 @@ const Watch = props_ => {
369
383
  fill: theme.methods.palette.color.value(undefined, 10, true, palette)
370
384
  }
371
385
  })]
372
- })), version === 'modern' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread({
386
+ })), version === 'modern' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
373
387
  tonal: tonal,
374
388
  color: color,
375
389
  size: size,
@@ -383,7 +397,8 @@ const Watch = props_ => {
383
397
  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"
384
398
  })
385
399
  })
386
- }, ModernProps), {}, {
400
+ }, RoundMeterProps), ModernProps), {}, {
401
+ className: (0, _styleReact.classNames)([RoundMeterProps === null || RoundMeterProps === void 0 ? void 0 : RoundMeterProps.className, ModernProps === null || ModernProps === void 0 ? void 0 : ModernProps.className, classes.roundMeter]),
387
402
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Path, {
388
403
  Component: "g",
389
404
  value: 100 / 60 * value.second,
package/esm/RoundMeter/RoundMeter.js CHANGED
@@ -14,6 +14,7 @@ import { angleToCoordinates, staticClassName, toNumber } from '../utils';
14
14
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
15
15
  const useStyle = styleMethod(theme => ({
16
16
  root: {
17
+ position: 'relative',
17
18
  width: '100vw'
18
19
  },
19
20
  size_small: {
package/esm/Watch/Watch.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- const _excluded = ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "Component", "className", "children"];
3
+ const _excluded = ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "RoundMeterProps", "Component", "className", "children"];
4
4
  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; }
5
5
  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; }
6
6
  import React from 'react';
@@ -67,6 +67,16 @@ const useStyle = styleMethod(theme => ({
67
67
  version_modern: {
68
68
  background: 'transparent'
69
69
  },
70
+ roundMeter: {
71
+ '&.onesy-RoundMeter-root': {
72
+ marginInline: 'auto',
73
+ '& .onesy-RoundMeter-svg': {
74
+ aspectRatio: '1 / 1',
75
+ maxWidth: '100%',
76
+ maxHeight: '100%'
77
+ }
78
+ }
79
+ },
70
80
  shadow_version_modern: {
71
81
  '& svg:first-of-type': {
72
82
  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%))`
@@ -75,8 +85,9 @@ const useStyle = styleMethod(theme => ({
75
85
  modern_background: {
76
86
  position: 'absolute',
77
87
  inset: '0',
78
- width: '100%',
79
- height: 'auto'
88
+ aspectRatio: '1 / 1',
89
+ maxWidth: '100%',
90
+ maxHeight: '100%'
80
91
  },
81
92
  modernDate: {
82
93
  textAnchor: 'middle'
@@ -112,6 +123,7 @@ const Watch = props_ => {
112
123
  RegularProps,
113
124
  MinimalProps,
114
125
  ModernProps,
126
+ RoundMeterProps,
115
127
  Component = 'div',
116
128
  className,
117
129
  children
@@ -253,14 +265,15 @@ const Watch = props_ => {
253
265
  l
254
266
  })
255
267
  }))]
256
- })), version === 'analog' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread({
268
+ })), version === 'analog' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
257
269
  tonal: tonal,
258
270
  color: color,
259
271
  size: size,
260
272
  marks: marks.analog,
261
273
  labels: labels.analog,
262
274
  background: true
263
- }, AnalogProps), {}, {
275
+ }, RoundMeterProps), AnalogProps), {}, {
276
+ className: classNames([RoundMeterProps?.className, AnalogProps?.className, classes.roundMeter]),
264
277
  children: [timeOfDayVisible && /*#__PURE__*/_jsx("text", {
265
278
  x: 120,
266
279
  y: 74,
@@ -313,7 +326,7 @@ const Watch = props_ => {
313
326
  strokeWidth: 1
314
327
  }
315
328
  })]
316
- })), version === 'minimal' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread({
329
+ })), version === 'minimal' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
317
330
  tonal: tonal,
318
331
  color: color,
319
332
  size: size,
@@ -326,7 +339,8 @@ const Watch = props_ => {
326
339
  }
327
340
  },
328
341
  background: true
329
- }, MinimalProps), {}, {
342
+ }, RoundMeterProps), MinimalProps), {}, {
343
+ className: classNames([RoundMeterProps?.className, MinimalProps?.className, classes.roundMeter]),
330
344
  children: [/*#__PURE__*/_jsx(Path, {
331
345
  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`,
332
346
  value: 100 / 12 * value.hour,
@@ -361,7 +375,7 @@ const Watch = props_ => {
361
375
  fill: theme.methods.palette.color.value(undefined, 10, true, palette)
362
376
  }
363
377
  })]
364
- })), version === 'modern' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread({
378
+ })), version === 'modern' && /*#__PURE__*/_jsxs(RoundMeter, _objectSpread(_objectSpread(_objectSpread({
365
379
  tonal: tonal,
366
380
  color: color,
367
381
  size: size,
@@ -375,7 +389,8 @@ const Watch = props_ => {
375
389
  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"
376
390
  })
377
391
  })
378
- }, ModernProps), {}, {
392
+ }, RoundMeterProps), ModernProps), {}, {
393
+ className: classNames([RoundMeterProps?.className, ModernProps?.className, classes.roundMeter]),
379
394
  children: [/*#__PURE__*/_jsx(Path, {
380
395
  Component: "g",
381
396
  value: 100 / 60 * value.second,
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.179
1
+ /** @license UiReact v1.0.180
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.179
1
+ /** @license UiReact v1.0.180
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onesy/ui-react",
3
- "version": "1.0.180",
3
+ "version": "1.0.181",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar Erić <lazareric1@proton.me>",