@mirai/ui 1.1.12 → 1.1.13

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 (15) hide show
  1. package/README.md +3 -3
  2. package/build/components/Calendar/Calendar.module.css +1 -1
  3. package/build/components/InputOption/InputOption.module.css +2 -2
  4. package/build/components/Menu/Menu.module.css +2 -2
  5. package/build/components/Modal/Modal.module.css +2 -2
  6. package/build/components/Slider/Slider.module.css +2 -2
  7. package/build/components/Table/Table.module.css +2 -2
  8. package/build/components/Table/Table.stories.module.css +2 -2
  9. package/build/hooks/useDevice.js +1 -1
  10. package/build/hooks/useDevice.js.map +1 -1
  11. package/build/primitives/Checkbox/Checkbox.module.css +2 -2
  12. package/build/primitives/Radio/Radio.module.css +2 -2
  13. package/build/primitives/Switch/Switch.module.css +2 -2
  14. package/build/theme/default.theme.css +1 -1
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -1382,7 +1382,7 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
1382
1382
  --mirai-ui-space-XXL: 64px;
1383
1383
 
1384
1384
  /* breakpoints */
1385
- --mirai-ui-breakpoint-S: 430px;
1385
+ --mirai-ui-breakpoint-S: 480px;
1386
1386
  --mirai-ui-breakpoint-M: 820px;
1387
1387
  --mirai-ui-breakpoint-content: 1280px;
1388
1388
 
@@ -1434,8 +1434,8 @@ This _hook_ can help you know what type of device your application or component
1434
1434
  - `isLandscape:bool` orientation is landscape
1435
1435
  - `isPortrait:bool` orientation is portrait
1436
1436
  <!-- type -->
1437
- - `isMobile:bool` is in the mobile breakpoint (<=430)
1438
- - `isTable:bool` is in the mobile breakpoint (>430px && <=820px)
1437
+ - `isMobile:bool` is in the mobile breakpoint (<=480)
1438
+ - `isTable:bool` is in the mobile breakpoint (>480px && <=820px)
1439
1439
  - `isDesktop:bool` in in the desktop breakpoint (>820px)
1440
1440
 
1441
1441
  Let's see a simple use of the hook:
package/build/components/Calendar/Calendar.module.css CHANGED
@@ -120,7 +120,7 @@
120
120
  color: transparent;
121
121
  }
122
122
 
123
- @media only screen and (min-width: 431px) {
123
+ @media only screen and (min-width: 481px) {
124
124
  .dayTouchable:hover {
125
125
  background-color: var(--mirai-ui-calendar-selected-background);
126
126
  }
package/build/components/InputOption/InputOption.module.css CHANGED
@@ -20,13 +20,13 @@
20
20
  color: var(--mirai-ui-input-text-focus);
21
21
  }
22
22
 
23
- @media only screen and (max-width: 430px) {
23
+ @media only screen and (max-width: 480px) {
24
24
  .icon {
25
25
  margin: calc(calc(var(--mirai-ui-checkbox-size-mobile) - var(--mirai-ui-input-text-icon)) / 2);
26
26
  }
27
27
  }
28
28
 
29
- @media only screen and (min-width: 431px) {
29
+ @media only screen and (min-width: 481px) {
30
30
  .icon {
31
31
  margin: var(--mirai-ui-border-width);
32
32
  }
package/build/components/Menu/Menu.module.css CHANGED
@@ -54,13 +54,13 @@
54
54
  }
55
55
 
56
56
  /* S */
57
- @media only screen and (max-width: 430px) {
57
+ @media only screen and (max-width: 480px) {
58
58
  .menu {
59
59
  padding-bottom: var(--mirai-ui-space-XS);
60
60
  }
61
61
  }
62
62
 
63
- @media only screen and (min-width: 430px) {
63
+ @media only screen and (min-width: 481px) {
64
64
  .menu {
65
65
  background-color: var(--mirai-ui-menu-base);
66
66
  border-radius: var(--mirai-ui-menu-border-radius);
package/build/components/Modal/Modal.module.css CHANGED
@@ -97,7 +97,7 @@
97
97
  }
98
98
 
99
99
  /* S */
100
- @media only screen and (max-width: 430px) {
100
+ @media only screen and (max-width: 480px) {
101
101
  .container {
102
102
  align-items: flex-end;
103
103
  align-content: flex-end;
@@ -130,7 +130,7 @@
130
130
  }
131
131
 
132
132
  /* M & L */
133
- @media only screen and (min-width: 431px) {
133
+ @media only screen and (min-width: 481px) {
134
134
  .container {
135
135
  align-items: center;
136
136
  top: 0;
package/build/components/Slider/Slider.module.css CHANGED
@@ -105,11 +105,11 @@
105
105
  }
106
106
 
107
107
  /* S */
108
- @media only screen and (max-width: 430px) {
108
+ @media only screen and (max-width: 480px) {
109
109
  }
110
110
 
111
111
  /* M & L */
112
- @media only screen and (min-width: 431px) {
112
+ @media only screen and (min-width: 481px) {
113
113
  .item .caption {
114
114
  transition: opacity var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
115
115
  opacity: 0;
package/build/components/Table/Table.module.css CHANGED
@@ -154,7 +154,7 @@
154
154
  }
155
155
 
156
156
  /* Mobile */
157
- @media only screen and (max-width: 430px) {
157
+ @media only screen and (max-width: 480px) {
158
158
  .table .checkbox {
159
159
  max-width: var(--mirai-ui-checkbox-size-mobile);
160
160
  min-width: var(--mirai-ui-checkbox-size-mobile);
@@ -162,7 +162,7 @@
162
162
  }
163
163
 
164
164
  /* Table & Desktop */
165
- @media only screen and (min-width: 431px) {
165
+ @media only screen and (min-width: 481px) {
166
166
  .table .checkbox {
167
167
  max-width: var(--mirai-ui-checkbox-size);
168
168
  min-width: var(--mirai-ui-checkbox-size);
package/build/components/Table/Table.stories.module.css CHANGED
@@ -23,14 +23,14 @@
23
23
  }
24
24
 
25
25
  /* Mobile */
26
- @media only screen and (max-width: 430px) {
26
+ @media only screen and (max-width: 480px) {
27
27
  .table {
28
28
  max-height: 80svh;
29
29
  }
30
30
  }
31
31
 
32
32
  /* Tablet & Desktop */
33
- @media only screen and (min-width: 431px) {
33
+ @media only screen and (min-width: 481px) {
34
34
  .table {
35
35
  max-height: 70svh;
36
36
  }
package/build/hooks/useDevice.js CHANGED
@@ -36,7 +36,7 @@ var useDevice = function useDevice() {
36
36
  return (0, _react.useMemo)(function () {
37
37
  var _Theme$get = _theme.Theme.get(),
38
38
  _Theme$get$breakpoint = _Theme$get.breakpointS,
39
- breakpointS = _Theme$get$breakpoint === void 0 ? '430px' : _Theme$get$breakpoint,
39
+ breakpointS = _Theme$get$breakpoint === void 0 ? '480px' : _Theme$get$breakpoint,
40
40
  _Theme$get$breakpoint2 = _Theme$get.breakpointM,
41
41
  breakpointM = _Theme$get$breakpoint2 === void 0 ? '820px' : _Theme$get$breakpoint2;
42
42
  var isLandscape = resolution.width >= resolution.height;
package/build/hooks/useDevice.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n const [resolution, setResolution] = useState(getResolution());\n\n useEffect(() => {\n const handleResize = () => setResolution(getResolution());\n\n window.addEventListener('resize', handleResize);\n\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return useMemo(() => {\n const { breakpointS = '430px', breakpointM = '820px' } = Theme.get();\n const isLandscape = resolution.width >= resolution.height;\n const isMobile = resolution.width <= sanitizePx(breakpointS);\n const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n const navigator = getNavigator();\n\n return {\n ...resolution,\n ...navigator,\n isLandscape,\n isPortrait: !isLandscape,\n isMobile,\n isTablet,\n isDesktop: !isMobile && !isTablet,\n };\n }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}
1
+ {"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n const [resolution, setResolution] = useState(getResolution());\n\n useEffect(() => {\n const handleResize = () => setResolution(getResolution());\n\n window.addEventListener('resize', handleResize);\n\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return useMemo(() => {\n const { breakpointS = '480px', breakpointM = '820px' } = Theme.get();\n const isLandscape = resolution.width >= resolution.height;\n const isMobile = resolution.width <= sanitizePx(breakpointS);\n const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n const navigator = getNavigator();\n\n return {\n ...resolution,\n ...navigator,\n isLandscape,\n isPortrait: !isLandscape,\n isMobile,\n isTablet,\n isDesktop: !isMobile && !isTablet,\n };\n }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}
package/build/primitives/Checkbox/Checkbox.module.css CHANGED
@@ -56,7 +56,7 @@
56
56
  }
57
57
 
58
58
  /* S */
59
- @media only screen and (max-width: 430px) {
59
+ @media only screen and (max-width: 480px) {
60
60
  .checkbox {
61
61
  height: var(--mirai-ui-checkbox-size-mobile);
62
62
  width: var(--mirai-ui-checkbox-size-mobile);
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  /* M & L */
72
- @media only screen and (min-width: 431px) {
72
+ @media only screen and (min-width: 481px) {
73
73
  .checkbox {
74
74
  height: var(--mirai-ui-checkbox-size);
75
75
  width: var(--mirai-ui-checkbox-size);
package/build/primitives/Radio/Radio.module.css CHANGED
@@ -72,7 +72,7 @@
72
72
  }
73
73
 
74
74
  /* S */
75
- @media only screen and (max-width: 430px) {
75
+ @media only screen and (max-width: 480px) {
76
76
  .radio {
77
77
  height: var(--mirai-ui-radio-size-mobile);
78
78
  width: var(--mirai-ui-radio-size-mobile);
@@ -91,7 +91,7 @@
91
91
  }
92
92
 
93
93
  /* M & L */
94
- @media only screen and (min-width: 431px) {
94
+ @media only screen and (min-width: 481px) {
95
95
  .radio {
96
96
  height: var(--mirai-ui-radio-size);
97
97
  width: var(--mirai-ui-radio-size);
package/build/primitives/Switch/Switch.module.css CHANGED
@@ -61,7 +61,7 @@
61
61
  transform: translateX(-100%);
62
62
  }
63
63
 
64
- @media only screen and (max-width: 430px) {
64
+ @media only screen and (max-width: 480px) {
65
65
  .switch .area {
66
66
  height: calc(var(--mirai-ui-switch-size-mobile) + calc(var(--mirai-ui-switch-border-size) * 2));
67
67
  width: calc(var(--mirai-ui-switch-size-mobile) * 2.4);
@@ -73,7 +73,7 @@
73
73
  }
74
74
  }
75
75
 
76
- @media only screen and (min-width: 431px) {
76
+ @media only screen and (min-width: 481px) {
77
77
  .switch .area {
78
78
  height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border-size) * 2));
79
79
  width: calc(var(--mirai-ui-switch-size) * 2.4);
package/build/theme/default.theme.css CHANGED
@@ -72,7 +72,7 @@
72
72
  --mirai-ui-space-XXL: 64px;
73
73
 
74
74
  /* breakpoints */
75
- --mirai-ui-breakpoint-S: 430px;
75
+ --mirai-ui-breakpoint-S: 480px;
76
76
  --mirai-ui-breakpoint-M: 820px;
77
77
  --mirai-ui-breakpoint-content: 1280px;
78
78
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirai/ui",
3
- "version": "1.1.12",
3
+ "version": "1.1.13",
4
4
  "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
5
5
  "author": "JΛVI <hello@soyjavi.com>",
6
6
  "license": "MIT",