react-miui 0.3.0 → 0.4.0

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 (256) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/assets/forward.svg +1 -0
  3. package/assets/sources/back.fla +0 -0
  4. package/dist/components/icons/Back.d.ts.map +1 -1
  5. package/dist/components/icons/Back.js.map +1 -1
  6. package/dist/components/icons/Forward.d.ts +7 -0
  7. package/dist/components/icons/Forward.d.ts.map +1 -0
  8. package/dist/components/icons/Forward.js +13 -0
  9. package/dist/components/icons/Forward.js.map +1 -0
  10. package/dist/components/icons/Icon.d.ts +2 -1
  11. package/dist/components/icons/Icon.d.ts.map +1 -1
  12. package/dist/components/icons/Icon.js +3 -0
  13. package/dist/components/icons/Icon.js.map +1 -1
  14. package/dist/components/layout/list/Header.d.ts +4 -0
  15. package/dist/components/layout/list/Header.d.ts.map +1 -0
  16. package/dist/components/layout/list/Header.js +16 -0
  17. package/dist/components/layout/list/Header.js.map +1 -0
  18. package/dist/components/layout/list/Header.module.scss +8 -0
  19. package/dist/components/layout/list/Item.d.ts +1 -0
  20. package/dist/components/layout/list/Item.d.ts.map +1 -1
  21. package/dist/components/layout/list/Item.js +18 -5
  22. package/dist/components/layout/list/Item.js.map +1 -1
  23. package/dist/components/layout/list/Item.module.scss +10 -2
  24. package/dist/components/layout/list/Label.d.ts +8 -0
  25. package/dist/components/layout/list/Label.d.ts.map +1 -0
  26. package/dist/components/layout/list/Label.js +16 -0
  27. package/dist/components/layout/list/Label.js.map +1 -0
  28. package/dist/components/layout/list/Label.module.scss +9 -0
  29. package/dist/components/layout/list/Value.d.ts +4 -0
  30. package/dist/components/layout/list/Value.d.ts.map +1 -0
  31. package/dist/components/layout/list/Value.js +13 -0
  32. package/dist/components/layout/list/Value.js.map +1 -0
  33. package/dist/components/layout/list/Value.module.scss +7 -0
  34. package/dist/global.scss +3 -0
  35. package/docs/assets/js/search.js +1 -1
  36. package/docs/assets/js/search.json +1 -1
  37. package/docs/enums/ICON.html +19 -5
  38. package/docs/index.html +4 -4
  39. package/docs/modules/StickyHeader.html +4 -4
  40. package/docs/modules.html +12 -12
  41. package/docs/pages/Tutorials/Test.html +3 -3
  42. package/esm/components/icons/Back.d.ts.map +1 -1
  43. package/esm/components/icons/Back.js.map +1 -1
  44. package/esm/components/icons/Forward.d.ts +7 -0
  45. package/esm/components/icons/Forward.d.ts.map +1 -0
  46. package/esm/components/icons/Forward.js +7 -0
  47. package/esm/components/icons/Forward.js.map +1 -0
  48. package/esm/components/icons/Icon.d.ts +2 -1
  49. package/esm/components/icons/Icon.d.ts.map +1 -1
  50. package/esm/components/icons/Icon.js +3 -0
  51. package/esm/components/icons/Icon.js.map +1 -1
  52. package/esm/components/layout/list/Header.d.ts +4 -0
  53. package/esm/components/layout/list/Header.d.ts.map +1 -0
  54. package/esm/components/layout/list/Header.js +10 -0
  55. package/esm/components/layout/list/Header.js.map +1 -0
  56. package/esm/components/layout/list/Header.module.scss +8 -0
  57. package/esm/components/layout/list/Item.d.ts +1 -0
  58. package/esm/components/layout/list/Item.d.ts.map +1 -1
  59. package/esm/components/layout/list/Item.js +18 -5
  60. package/esm/components/layout/list/Item.js.map +1 -1
  61. package/esm/components/layout/list/Item.module.scss +10 -2
  62. package/esm/components/layout/list/Label.d.ts +8 -0
  63. package/esm/components/layout/list/Label.d.ts.map +1 -0
  64. package/esm/components/layout/list/Label.js +10 -0
  65. package/esm/components/layout/list/Label.js.map +1 -0
  66. package/esm/components/layout/list/Label.module.scss +9 -0
  67. package/esm/components/layout/list/Value.d.ts +4 -0
  68. package/esm/components/layout/list/Value.d.ts.map +1 -0
  69. package/esm/components/layout/list/Value.js +7 -0
  70. package/esm/components/layout/list/Value.js.map +1 -0
  71. package/esm/components/layout/list/Value.module.scss +7 -0
  72. package/esm/global.scss +3 -0
  73. package/package.json +1 -1
  74. package/src/components/icons/Back.tsx +7 -1
  75. package/src/components/icons/Forward.tsx +21 -0
  76. package/src/components/icons/Icon.tsx +5 -2
  77. package/src/components/layout/list/Header.module.scss +8 -0
  78. package/src/components/layout/list/Header.tsx +16 -0
  79. package/src/components/layout/list/Item.module.scss +10 -2
  80. package/src/components/layout/list/Item.tsx +23 -5
  81. package/src/components/layout/list/Label.module.scss +9 -0
  82. package/src/components/layout/list/Label.tsx +21 -0
  83. package/src/components/layout/list/Value.module.scss +7 -0
  84. package/src/components/layout/list/Value.tsx +11 -0
  85. package/src/demo/components/form/Toggle.tsx +12 -22
  86. package/src/demo/components/layout/list/Header.tsx +24 -0
  87. package/src/demo/components/layout/list/ItemRatio.tsx +21 -0
  88. package/src/demo/components/layout/list/Label.tsx +30 -0
  89. package/src/demo/components/layout/list/List.Item.module.scss +4 -0
  90. package/src/demo/components/layout/list/Value.module.scss +4 -0
  91. package/src/demo/components/layout/list/Value.tsx +26 -0
  92. package/src/demo/components/ui/icons/Icons.tsx +3 -7
  93. package/src/demo/componentsMap.ts +22 -0
  94. package/src/global.scss +3 -0
  95. package/dist/demo/Demo.d.ts +0 -4
  96. package/dist/demo/Demo.d.ts.map +0 -1
  97. package/dist/demo/Demo.js +0 -18
  98. package/dist/demo/Demo.js.map +0 -1
  99. package/dist/demo/Demo.module.scss +0 -4
  100. package/dist/demo/Main.d.ts +0 -4
  101. package/dist/demo/Main.d.ts.map +0 -1
  102. package/dist/demo/Main.js +0 -83
  103. package/dist/demo/Main.js.map +0 -1
  104. package/dist/demo/Main.module.scss +0 -30
  105. package/dist/demo/Menu.d.ts +0 -9
  106. package/dist/demo/Menu.d.ts.map +0 -1
  107. package/dist/demo/Menu.js +0 -31
  108. package/dist/demo/Menu.js.map +0 -1
  109. package/dist/demo/Menu.module.scss +0 -41
  110. package/dist/demo/components/form/Checkbox.d.ts +0 -4
  111. package/dist/demo/components/form/Checkbox.d.ts.map +0 -1
  112. package/dist/demo/components/form/Checkbox.js +0 -31
  113. package/dist/demo/components/form/Checkbox.js.map +0 -1
  114. package/dist/demo/components/form/Toggle.d.ts +0 -4
  115. package/dist/demo/components/form/Toggle.d.ts.map +0 -1
  116. package/dist/demo/components/form/Toggle.js +0 -65
  117. package/dist/demo/components/form/Toggle.js.map +0 -1
  118. package/dist/demo/components/form/Toggle.module.scss +0 -5
  119. package/dist/demo/components/layout/header/Header.d.ts +0 -8
  120. package/dist/demo/components/layout/header/Header.d.ts.map +0 -1
  121. package/dist/demo/components/layout/header/Header.js +0 -60
  122. package/dist/demo/components/layout/header/Header.js.map +0 -1
  123. package/dist/demo/components/layout/header/StickyHeader.d.ts +0 -9
  124. package/dist/demo/components/layout/header/StickyHeader.d.ts.map +0 -1
  125. package/dist/demo/components/layout/header/StickyHeader.js +0 -73
  126. package/dist/demo/components/layout/header/StickyHeader.js.map +0 -1
  127. package/dist/demo/components/layout/list/List.Item.d.ts +0 -4
  128. package/dist/demo/components/layout/list/List.Item.d.ts.map +0 -1
  129. package/dist/demo/components/layout/list/List.Item.js +0 -42
  130. package/dist/demo/components/layout/list/List.Item.js.map +0 -1
  131. package/dist/demo/components/layout/list/List.Item.module.scss +0 -3
  132. package/dist/demo/components/ui/action/Action.d.ts +0 -8
  133. package/dist/demo/components/ui/action/Action.d.ts.map +0 -1
  134. package/dist/demo/components/ui/action/Action.js +0 -83
  135. package/dist/demo/components/ui/action/Action.js.map +0 -1
  136. package/dist/demo/components/ui/action/ActionDemo.module.scss +0 -3
  137. package/dist/demo/components/ui/button/ButtonDemo.d.ts +0 -4
  138. package/dist/demo/components/ui/button/ButtonDemo.d.ts.map +0 -1
  139. package/dist/demo/components/ui/button/ButtonDemo.js +0 -20
  140. package/dist/demo/components/ui/button/ButtonDemo.js.map +0 -1
  141. package/dist/demo/components/ui/directionPad/Pad.d.ts +0 -4
  142. package/dist/demo/components/ui/directionPad/Pad.d.ts.map +0 -1
  143. package/dist/demo/components/ui/directionPad/Pad.js +0 -49
  144. package/dist/demo/components/ui/directionPad/Pad.js.map +0 -1
  145. package/dist/demo/components/ui/icons/Icons.d.ts +0 -4
  146. package/dist/demo/components/ui/icons/Icons.d.ts.map +0 -1
  147. package/dist/demo/components/ui/icons/Icons.js +0 -20
  148. package/dist/demo/components/ui/icons/Icons.js.map +0 -1
  149. package/dist/demo/components/ui/icons/Icons.module.scss +0 -4
  150. package/dist/demo/componentsMap.d.ts +0 -13
  151. package/dist/demo/componentsMap.d.ts.map +0 -1
  152. package/dist/demo/componentsMap.js +0 -112
  153. package/dist/demo/componentsMap.js.map +0 -1
  154. package/dist/demo/utils/makeVariants.d.ts +0 -3
  155. package/dist/demo/utils/makeVariants.d.ts.map +0 -1
  156. package/dist/demo/utils/makeVariants.js +0 -14
  157. package/dist/demo/utils/makeVariants.js.map +0 -1
  158. package/dist/demo/utils/safeUseHash.d.ts +0 -3
  159. package/dist/demo/utils/safeUseHash.d.ts.map +0 -1
  160. package/dist/demo/utils/safeUseHash.js +0 -13
  161. package/dist/demo/utils/safeUseHash.js.map +0 -1
  162. package/dist/demo-global.scss +0 -9
  163. package/dist/pages/_app.d.ts +0 -7
  164. package/dist/pages/_app.d.ts.map +0 -1
  165. package/dist/pages/_app.js +0 -15
  166. package/dist/pages/_app.js.map +0 -1
  167. package/dist/pages/index.d.ts +0 -4
  168. package/dist/pages/index.d.ts.map +0 -1
  169. package/dist/pages/index.js +0 -10
  170. package/dist/pages/index.js.map +0 -1
  171. package/dist/pages/react-miui.d.ts +0 -4
  172. package/dist/pages/react-miui.d.ts.map +0 -1
  173. package/dist/pages/react-miui.js +0 -11
  174. package/dist/pages/react-miui.js.map +0 -1
  175. package/esm/demo/Demo.d.ts +0 -4
  176. package/esm/demo/Demo.d.ts.map +0 -1
  177. package/esm/demo/Demo.js +0 -12
  178. package/esm/demo/Demo.js.map +0 -1
  179. package/esm/demo/Demo.module.scss +0 -4
  180. package/esm/demo/Main.d.ts +0 -4
  181. package/esm/demo/Main.d.ts.map +0 -1
  182. package/esm/demo/Main.js +0 -58
  183. package/esm/demo/Main.js.map +0 -1
  184. package/esm/demo/Main.module.scss +0 -30
  185. package/esm/demo/Menu.d.ts +0 -9
  186. package/esm/demo/Menu.d.ts.map +0 -1
  187. package/esm/demo/Menu.js +0 -25
  188. package/esm/demo/Menu.js.map +0 -1
  189. package/esm/demo/Menu.module.scss +0 -41
  190. package/esm/demo/components/form/Checkbox.d.ts +0 -4
  191. package/esm/demo/components/form/Checkbox.d.ts.map +0 -1
  192. package/esm/demo/components/form/Checkbox.js +0 -9
  193. package/esm/demo/components/form/Checkbox.js.map +0 -1
  194. package/esm/demo/components/form/Toggle.d.ts +0 -4
  195. package/esm/demo/components/form/Toggle.d.ts.map +0 -1
  196. package/esm/demo/components/form/Toggle.js +0 -40
  197. package/esm/demo/components/form/Toggle.js.map +0 -1
  198. package/esm/demo/components/form/Toggle.module.scss +0 -5
  199. package/esm/demo/components/layout/header/Header.d.ts +0 -8
  200. package/esm/demo/components/layout/header/Header.d.ts.map +0 -1
  201. package/esm/demo/components/layout/header/Header.js +0 -50
  202. package/esm/demo/components/layout/header/Header.js.map +0 -1
  203. package/esm/demo/components/layout/header/StickyHeader.d.ts +0 -9
  204. package/esm/demo/components/layout/header/StickyHeader.d.ts.map +0 -1
  205. package/esm/demo/components/layout/header/StickyHeader.js +0 -62
  206. package/esm/demo/components/layout/header/StickyHeader.js.map +0 -1
  207. package/esm/demo/components/layout/list/List.Item.d.ts +0 -4
  208. package/esm/demo/components/layout/list/List.Item.d.ts.map +0 -1
  209. package/esm/demo/components/layout/list/List.Item.js +0 -17
  210. package/esm/demo/components/layout/list/List.Item.js.map +0 -1
  211. package/esm/demo/components/layout/list/List.Item.module.scss +0 -3
  212. package/esm/demo/components/ui/action/Action.d.ts +0 -8
  213. package/esm/demo/components/ui/action/Action.d.ts.map +0 -1
  214. package/esm/demo/components/ui/action/Action.js +0 -73
  215. package/esm/demo/components/ui/action/Action.js.map +0 -1
  216. package/esm/demo/components/ui/action/ActionDemo.module.scss +0 -3
  217. package/esm/demo/components/ui/button/ButtonDemo.d.ts +0 -4
  218. package/esm/demo/components/ui/button/ButtonDemo.d.ts.map +0 -1
  219. package/esm/demo/components/ui/button/ButtonDemo.js +0 -14
  220. package/esm/demo/components/ui/button/ButtonDemo.js.map +0 -1
  221. package/esm/demo/components/ui/directionPad/Pad.d.ts +0 -4
  222. package/esm/demo/components/ui/directionPad/Pad.d.ts.map +0 -1
  223. package/esm/demo/components/ui/directionPad/Pad.js +0 -27
  224. package/esm/demo/components/ui/directionPad/Pad.js.map +0 -1
  225. package/esm/demo/components/ui/icons/Icons.d.ts +0 -4
  226. package/esm/demo/components/ui/icons/Icons.d.ts.map +0 -1
  227. package/esm/demo/components/ui/icons/Icons.js +0 -14
  228. package/esm/demo/components/ui/icons/Icons.js.map +0 -1
  229. package/esm/demo/components/ui/icons/Icons.module.scss +0 -4
  230. package/esm/demo/componentsMap.d.ts +0 -13
  231. package/esm/demo/componentsMap.d.ts.map +0 -1
  232. package/esm/demo/componentsMap.js +0 -109
  233. package/esm/demo/componentsMap.js.map +0 -1
  234. package/esm/demo/utils/makeVariants.d.ts +0 -3
  235. package/esm/demo/utils/makeVariants.d.ts.map +0 -1
  236. package/esm/demo/utils/makeVariants.js +0 -11
  237. package/esm/demo/utils/makeVariants.js.map +0 -1
  238. package/esm/demo/utils/safeUseHash.d.ts +0 -3
  239. package/esm/demo/utils/safeUseHash.d.ts.map +0 -1
  240. package/esm/demo/utils/safeUseHash.js +0 -10
  241. package/esm/demo/utils/safeUseHash.js.map +0 -1
  242. package/esm/demo-global.scss +0 -9
  243. package/esm/pages/_app.d.ts +0 -7
  244. package/esm/pages/_app.d.ts.map +0 -1
  245. package/esm/pages/_app.js +0 -10
  246. package/esm/pages/_app.js.map +0 -1
  247. package/esm/pages/index.d.ts +0 -4
  248. package/esm/pages/index.d.ts.map +0 -1
  249. package/esm/pages/index.js +0 -5
  250. package/esm/pages/index.js.map +0 -1
  251. package/esm/pages/react-miui.d.ts +0 -4
  252. package/esm/pages/react-miui.d.ts.map +0 -1
  253. package/esm/pages/react-miui.js +0 -6
  254. package/esm/pages/react-miui.js.map +0 -1
  255. package/src/demo/components/form/Toggle.module.scss +0 -5
  256. package/src/demo/components/ui/icons/Icons.module.scss +0 -4
package/docs/modules.html CHANGED
@@ -3,8 +3,8 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <title>react-miui - v0.3.0</title>
7
- <meta name="description" content="Documentation for react-miui - v0.3.0">
6
+ <title>react-miui - v0.4.0</title>
7
+ <meta name="description" content="Documentation for react-miui - v0.4.0">
8
8
  <meta name="viewport" content="width=device-width, initial-scale=1">
9
9
  <link rel="stylesheet" href="assets/css/main.css">
10
10
  <link rel="stylesheet" href="assets/css/pages.css">
@@ -23,7 +23,7 @@
23
23
  <li class="state loading">Preparing search index...</li>
24
24
  <li class="state failure">The search index is not available</li>
25
25
  </ul>
26
- <a href="index.html" class="title">react-miui - v0.3.0</a>
26
+ <a href="index.html" class="title">react-miui - v0.4.0</a>
27
27
  </div>
28
28
  <div class="table-cell" id="tsd-widgets">
29
29
  <div id="tsd-filter">
@@ -57,7 +57,7 @@
57
57
  <a href="modules.html">Globals</a>
58
58
  </li>
59
59
  </ul>
60
- <h1>Project react-miui - v0.3.0</h1>
60
+ <h1>Project react-miui - v0.4.0</h1>
61
61
  </div>
62
62
  </div>
63
63
  </header>
@@ -104,7 +104,7 @@
104
104
  <div class="tsd-signature tsd-kind-icon">Button<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
105
105
  <aside class="tsd-sources">
106
106
  <ul>
107
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/ui/button/Button.tsx#L12">src/components/ui/button/Button.tsx:12</a></li>
107
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/ui/button/Button.tsx#L12">src/components/ui/button/Button.tsx:12</a></li>
108
108
  </ul>
109
109
  </aside>
110
110
  </section>
@@ -114,7 +114,7 @@
114
114
  <div class="tsd-signature tsd-kind-icon">Checkbox<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
115
115
  <aside class="tsd-sources">
116
116
  <ul>
117
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/form/Checkbox.tsx#L13">src/components/form/Checkbox.tsx:13</a></li>
117
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/form/Checkbox.tsx#L13">src/components/form/Checkbox.tsx:13</a></li>
118
118
  </ul>
119
119
  </aside>
120
120
  </section>
@@ -124,7 +124,7 @@
124
124
  <div class="tsd-signature tsd-kind-icon">Direction<wbr>Pad<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
125
125
  <aside class="tsd-sources">
126
126
  <ul>
127
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
127
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
128
128
  </ul>
129
129
  </aside>
130
130
  </section>
@@ -134,7 +134,7 @@
134
134
  <div class="tsd-signature tsd-kind-icon">Header<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
135
135
  <aside class="tsd-sources">
136
136
  <ul>
137
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
137
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
138
138
  </ul>
139
139
  </aside>
140
140
  </section>
@@ -144,7 +144,7 @@
144
144
  <div class="tsd-signature tsd-kind-icon">Icon<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
145
145
  <aside class="tsd-sources">
146
146
  <ul>
147
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/icons/Icon.tsx#L22">src/components/icons/Icon.tsx:22</a></li>
147
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/icons/Icon.tsx#L25">src/components/icons/Icon.tsx:25</a></li>
148
148
  </ul>
149
149
  </aside>
150
150
  </section>
@@ -154,7 +154,7 @@
154
154
  <div class="tsd-signature tsd-kind-icon">Item<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
155
155
  <aside class="tsd-sources">
156
156
  <ul>
157
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/list/Item.tsx#L18">src/components/layout/list/Item.tsx:18</a></li>
157
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/layout/list/Item.tsx#L21">src/components/layout/list/Item.tsx:21</a></li>
158
158
  </ul>
159
159
  </aside>
160
160
  </section>
@@ -164,7 +164,7 @@
164
164
  <div class="tsd-signature tsd-kind-icon">List<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol"> = ...</span></div>
165
165
  <aside class="tsd-sources">
166
166
  <ul>
167
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/list/List.tsx#L5">src/components/layout/list/List.tsx:5</a></li>
167
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/layout/list/List.tsx#L5">src/components/layout/list/List.tsx:5</a></li>
168
168
  </ul>
169
169
  </aside>
170
170
  </section>
@@ -174,7 +174,7 @@
174
174
  <div class="tsd-signature tsd-kind-icon">Sticky<wbr>Header<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">Content</span><span class="tsd-signature-symbol"> = ...</span></div>
175
175
  <aside class="tsd-sources">
176
176
  <ul>
177
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/f959440/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
177
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/e3001bc/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
178
178
  </ul>
179
179
  </aside>
180
180
  </section>
package/docs/pages/Tutorials/Test.html CHANGED
@@ -3,8 +3,8 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <title>Test | react-miui - v0.3.0</title>
7
- <meta name="description" content="Documentation for react-miui - v0.3.0">
6
+ <title>Test | react-miui - v0.4.0</title>
7
+ <meta name="description" content="Documentation for react-miui - v0.4.0">
8
8
  <meta name="viewport" content="width=device-width, initial-scale=1">
9
9
  <link rel="stylesheet" href="../../assets/css/main.css">
10
10
  <link rel="stylesheet" href="../../assets/css/pages.css">
@@ -23,7 +23,7 @@
23
23
  <li class="state loading">Preparing search index...</li>
24
24
  <li class="state failure">The search index is not available</li>
25
25
  </ul>
26
- <a href="../../index.html" class="title">react-miui - v0.3.0</a>
26
+ <a href="../../index.html" class="title">react-miui - v0.4.0</a>
27
27
  </div>
28
28
  <div class="table-cell" id="tsd-widgets">
29
29
  <div id="tsd-filter">
package/esm/components/icons/Back.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Back.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAM1B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Back.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAY1B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
package/esm/components/icons/Back.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Back.js","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,IAAI,GAAqB,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO,CACH,6BAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,4BAA4B,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;QAC/G,8BAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,mJAAmJ,GAAI,CACpL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Back.js","sourceRoot":"","sources":["../../../src/components/icons/Back.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,IAAI,GAAqB,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO,CACH,6BACI,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,8BAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,mJAAmJ,GAAI,CACpL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
package/esm/components/icons/Forward.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ interface Props {
3
+ className?: string;
4
+ }
5
+ declare const Forward: React.VFC<Props>;
6
+ export { Forward };
7
+ //# sourceMappingURL=Forward.d.ts.map
package/esm/components/icons/Forward.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Forward.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Forward.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAY7B,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
package/esm/components/icons/Forward.js ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ const Forward = (props) => {
3
+ return (React.createElement("svg", { width: "9", height: "16", viewBox: "0 0 9 16", xmlns: "http://www.w3.org/2000/svg", className: props.className },
4
+ React.createElement("path", { fill: "currentColor", d: "M.95.15Q.8 0 .55 0t-.4.15Q0 .3 0 .55t.15.4L7.35 8l-7.2 7.05Q0 15.2 0 15.4q0 .25.2.4.15.2.4.2.2 0 .35-.15L9 8 1 .2Q1 .15.95.15" })));
5
+ };
6
+ export { Forward };
7
+ //# sourceMappingURL=Forward.js.map
package/esm/components/icons/Forward.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Forward.js","sourceRoot":"","sources":["../../../src/components/icons/Forward.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,OAAO,GAAqB,CAAC,KAAK,EAAE,EAAE;IACxC,OAAO,CACH,6BACI,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,4BAA4B,EACnC,SAAS,EAAE,KAAK,CAAC,SAAS;QAE1B,8BAAM,IAAI,EAAE,cAAc,EAAE,CAAC,EAAE,+HAA+H,GAAI,CAChK,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
package/esm/components/icons/Icon.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
2
  declare enum ICON {
3
3
  checkmark = "checkmark",
4
- back = "back"
4
+ back = "back",
5
+ forward = "forward"
5
6
  }
6
7
  interface Props {
7
8
  name: ICON;
package/esm/components/icons/Icon.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;CAChB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAOD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,IAAI;IACL,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,OAAO,YAAY;CACtB;AAED,UAAU,KAAK;IACX,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAQD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAMzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}
package/esm/components/icons/Icon.js CHANGED
@@ -1,14 +1,17 @@
1
1
  import React from "react";
2
2
  import { Checkmark } from "./Checkmark";
3
3
  import { Back } from "./Back";
4
+ import { Forward } from "./Forward";
4
5
  var ICON;
5
6
  (function (ICON) {
6
7
  ICON["checkmark"] = "checkmark";
7
8
  ICON["back"] = "back";
9
+ ICON["forward"] = "forward";
8
10
  })(ICON || (ICON = {}));
9
11
  const iconsMap = new Map([
10
12
  [ICON.checkmark, Checkmark],
11
13
  [ICON.back, Back],
14
+ [ICON.forward, Forward],
12
15
  ]);
13
16
  const Icon = ({ name: iconName, ...props }) => {
14
17
  const C = iconsMap.get(iconName);
package/esm/components/icons/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,IAAK,IAGJ;AAHD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;AACjB,CAAC,EAHI,IAAI,KAAJ,IAAI,QAGR;AAOD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,CAAC,EAAE;QACJ,MAAM,IAAI,SAAS,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC;KACpD;IACD,OAAO,oBAAC,CAAC,OAAK,KAAK,GAAI,CAAC;AAC5B,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icons/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,IAAK,IAIJ;AAJD,WAAK,IAAI;IACL,+BAAuB,CAAA;IACvB,qBAAa,CAAA;IACb,2BAAmB,CAAA;AACvB,CAAC,EAJI,IAAI,KAAJ,IAAI,QAIR;AAOD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAqB;IACzC,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;IACjB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC;CAC1B,CAAC,CAAC;AAEH,MAAM,IAAI,GAAoB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3D,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,CAAC,EAAE;QACJ,MAAM,IAAI,SAAS,CAAC,gBAAgB,GAAG,QAAQ,CAAC,CAAC;KACpD;IACD,OAAO,oBAAC,CAAC,OAAK,KAAK,GAAI,CAAC;AAC5B,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC"}
package/esm/components/layout/list/Header.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ declare const Header: React.FC;
3
+ export { Header };
4
+ //# sourceMappingURL=Header.d.ts.map
package/esm/components/layout/list/Header.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAOnB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
package/esm/components/layout/list/Header.js ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+ import styles from "./Item.module.scss";
4
+ import headerStyles from "./Header.module.scss";
5
+ const Header = (props) => {
6
+ return (React.createElement("li", { className: classnames(styles.item, headerStyles.header) },
7
+ React.createElement("div", null, props.children)));
8
+ };
9
+ export { Header };
10
+ //# sourceMappingURL=Header.js.map
package/esm/components/layout/list/Header.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAEhD,MAAM,MAAM,GAAa,CAAC,KAAK,EAAE,EAAE;IAE/B,OAAO,CACH,4BAAI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC;QACvD,iCAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
package/esm/components/layout/list/Header.module.scss ADDED
@@ -0,0 +1,8 @@
1
+ .header > * {
2
+ padding-top: calc(80px / var(--ratio-dimensions));
3
+ padding-bottom: calc(40px / var(--ratio-dimensions));
4
+
5
+ font-size: calc(26px / var(--ratio-font));
6
+ color: var(--sub);
7
+ text-transform: uppercase;
8
+ }
package/esm/components/layout/list/Item.d.ts CHANGED
@@ -8,6 +8,7 @@ interface Props {
8
8
  onClick?: () => void;
9
9
  className?: string;
10
10
  Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
11
+ ratio?: string;
11
12
  }
12
13
  declare const Item: React.FC<Props>;
13
14
  export { Item };
package/esm/components/layout/list/Item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;CAChE;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8BzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6CzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
package/esm/components/layout/list/Item.js CHANGED
@@ -1,18 +1,31 @@
1
1
  import React from "react";
2
2
  import classnames from "classnames";
3
3
  import styles from "./Item.module.scss";
4
+ import { Value } from "./Value";
4
5
  const Item = (props) => {
5
- const { className, children, href, to, onClick, Link, ...restProps } = props;
6
+ const { className, children, href, to, onClick, Link, ratio, ...restProps } = props;
6
7
  const cls = classnames(styles.item, className);
7
8
  const liProps = {
8
9
  className: cls,
9
10
  };
11
+ const r = ratio ? ratio.split("/") : [];
12
+ const ren = React.Children.map(props.children, (child, index) => {
13
+ let flex = undefined;
14
+ if (!r.length && child && typeof child === "object" && "type" in child && child.type === Value) {
15
+ return child;
16
+ }
17
+ if (index in r) {
18
+ flex = r[index];
19
+ }
20
+ return React.createElement("div", { style: { flex } }, child);
21
+ });
10
22
  if (to) {
11
23
  if (!Link) {
12
24
  throw new TypeError("`to` prop given without `Link` component");
13
25
  }
14
26
  return React.createElement("li", { ...liProps },
15
- React.createElement(Link, { href: to, ...restProps }, children));
27
+ React.createElement(Link, { href: to, ...restProps },
28
+ React.createElement("a", { className: styles.content }, ren)));
16
29
  }
17
30
  if (href) {
18
31
  const aProps = { ...restProps };
@@ -20,14 +33,14 @@ const Item = (props) => {
20
33
  aProps.onClick = onClick;
21
34
  }
22
35
  return React.createElement("li", { ...liProps },
23
- React.createElement("a", { href: href, ...aProps }, children));
36
+ React.createElement("a", { href: href, ...aProps, className: styles.content }, ren));
24
37
  }
25
38
  if (onClick) {
26
39
  return (React.createElement("li", { ...liProps },
27
- React.createElement("button", { className: styles.button, onClick: props.onClick, ...restProps }, children)));
40
+ React.createElement("button", { className: classnames(styles.button, styles.content), onClick: props.onClick, ...restProps }, ren)));
28
41
  }
29
42
  return React.createElement("li", { ...liProps },
30
- React.createElement("div", { ...restProps }, children));
43
+ React.createElement("div", { ...restProps, className: styles.content }, ren));
31
44
  };
32
45
  export { Item };
33
46
  //# sourceMappingURL=Item.js.map
package/esm/components/layout/list/Item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAcxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7E,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG;QACZ,SAAS,EAAE,GAAG;KACjB,CAAC;IAEF,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,+BAAQ,OAAO;YAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS,IAAG,QAAQ,CAAQ,CAAK,CAAC;KACjF;IACD,IAAI,IAAI,EAAE;QACN,MAAM,MAAM,GAAqD,EAAE,GAAG,SAAS,EAAE,CAAC;QAClF,IAAI,OAAO,EAAE;YACT,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;SAC5B;QACD,OAAO,+BAAQ,OAAO;YAAE,2BAAG,IAAI,EAAE,IAAI,KAAM,MAAM,IAAG,QAAQ,CAAK,CAAK,CAAC;KAC1E;IACD,IAAI,OAAO,EAAE;QACT,OAAO,CACH,+BAAQ,OAAO;YACX,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,KAAM,SAAS,IAAG,QAAQ,CAAU,CAC3F,CACR,CAAC;KACL;IACD,OAAO,+BAAQ,OAAO;QAAE,gCAAS,SAAS,IAAG,QAAQ,CAAO,CAAK,CAAC;AACtE,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAgBhC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpF,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG;QACZ,SAAS,EAAE,GAAG;KACjB,CAAC;IAEF,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAExC,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC5D,IAAI,IAAI,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE;YAC5F,OAAO,KAAK,CAAC;SAChB;QACD,IAAI,KAAK,IAAI,CAAC,EAAE;YACZ,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;SACnB;QACD,OAAO,6BAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAG,KAAK,CAAO,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,EAAE,EAAE;QACJ,IAAI,CAAC,IAAI,EAAE;YACP,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;SACnE;QAED,OAAO,+BAAQ,OAAO;YAAE,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,KAAM,SAAS;gBAAE,2BAAG,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,GAAG,CAAK,CAAO,CAAK,CAAC;KAC9G;IACD,IAAI,IAAI,EAAE;QACN,MAAM,MAAM,GAAqD,EAAE,GAAG,SAAS,EAAE,CAAC;QAClF,IAAI,OAAO,EAAE;YACT,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC;SAC5B;QACD,OAAO,+BAAQ,OAAO;YAAE,2BAAG,IAAI,EAAE,IAAI,KAAM,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,GAAG,CAAK,CAAK,CAAC;KAChG;IACD,IAAI,OAAO,EAAE;QACT,OAAO,CACH,+BAAQ,OAAO;YACX,gCAAQ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,KAAK,SAAS,IAC7F,GAAG,CACC,CACR,CACR,CAAC;KACL;IACD,OAAO,+BAAQ,OAAO;QAAE,gCAAS,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,GAAG,CAAO,CAAK,CAAC;AAC5F,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
package/esm/components/layout/list/Item.module.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  list-style-type: none;
3
3
  margin: 0;
4
4
  padding: 0;
5
- font-size: 15px;
5
+ font-size: calc(34px / var(--ratio-font));
6
6
 
7
7
  &:not(:first-child) > * {
8
8
  border-top: 0.37px solid var(--header-border);
@@ -10,7 +10,7 @@
10
10
 
11
11
  > * {
12
12
  display: block;
13
- padding: 20px 0;
13
+ padding: 0;
14
14
  text-decoration: none;
15
15
  }
16
16
  }
@@ -20,4 +20,12 @@
20
20
  background: none;
21
21
  width: 100%;
22
22
  text-align: left;
23
+ font-family: inherit;
24
+ font-size: inherit;
25
+ }
26
+
27
+ .content {
28
+ display: flex;
29
+ min-height: calc(174px / var(--ratio-dimensions));
30
+ align-items: center;
23
31
  }
package/esm/components/layout/list/Label.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ import type { ReactNode } from "react";
3
+ interface Props {
4
+ sub?: ReactNode;
5
+ }
6
+ declare const Label: React.FC<Props>;
7
+ export { Label };
8
+ //# sourceMappingURL=Label.d.ts.map
package/esm/components/layout/list/Label.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAK;IACX,GAAG,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAS1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
package/esm/components/layout/list/Label.js ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import styles from "./Label.module.scss";
3
+ const Label = (props) => {
4
+ const sub = props.sub ? React.createElement("div", { className: styles.sub }, props.sub) : null;
5
+ return (React.createElement("div", { className: styles.root },
6
+ React.createElement("div", null, props.children),
7
+ sub));
8
+ };
9
+ export { Label };
10
+ //# sourceMappingURL=Label.js.map
package/esm/components/layout/list/Label.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAMzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,IAAG,KAAK,CAAC,GAAG,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7E,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACvB,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC1B,GAAG,CACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
package/esm/components/layout/list/Label.module.scss ADDED
@@ -0,0 +1,9 @@
1
+ .sub {
2
+ font-size: calc(27px / var(--ratio-font));
3
+ color: var(--sub);
4
+ margin-top: calc(27px / var(--ratio-font) / 3);
5
+ }
6
+
7
+ .root {
8
+ padding: calc(54px / var(--ratio-dimensions)) 0;
9
+ }
package/esm/components/layout/list/Value.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ declare const Value: React.FC;
3
+ export { Value };
4
+ //# sourceMappingURL=Value.d.ts.map
package/esm/components/layout/list/Value.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAIlB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
package/esm/components/layout/list/Value.js ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ import styles from "./Value.module.scss";
3
+ const Value = (props) => {
4
+ return (React.createElement("div", { className: styles.value }, props.children));
5
+ };
6
+ export { Value };
7
+ //# sourceMappingURL=Value.js.map
package/esm/components/layout/list/Value.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,KAAK,GAAa,CAAC,KAAK,EAAE,EAAE;IAC9B,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAO,CACvD,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
package/esm/components/layout/list/Value.module.scss ADDED
@@ -0,0 +1,7 @@
1
+ .value {
2
+ color: var(--icon);
3
+ font-size: calc(26px / var(--ratio-font));
4
+ display: flex;
5
+ justify-content: flex-end;
6
+ flex: 1;
7
+ }
package/esm/global.scss CHANGED
@@ -20,6 +20,8 @@
20
20
  --header-border: #c8c8c9;
21
21
  --header-bg: #efeff0;
22
22
  --header-text: #484848;
23
+ --text: #323232;
24
+ --sub: #959595;
23
25
 
24
26
  --toolbar-border: #ababab;
25
27
  --toolbar-bg: #f8f8f8;
@@ -52,4 +54,5 @@
52
54
 
53
55
  body {
54
56
  font-size: 15px;
57
+ color: var(--text);
55
58
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-miui",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "author": "Jacek Nowacki",
5
5
  "license": "MIT",
6
6
  "scripts": {
package/src/components/icons/Back.tsx CHANGED
@@ -6,7 +6,13 @@ interface Props {
6
6
 
7
7
  const Back: React.VFC<Props> = (props) => {
8
8
  return (
9
- <svg width={"9"} height={"16"} viewBox={"0 0 9 16"} xmlns={"http://www.w3.org/2000/svg"} className={props.className}>
9
+ <svg
10
+ width={"9"}
11
+ height={"16"}
12
+ viewBox={"0 0 9 16"}
13
+ xmlns={"http://www.w3.org/2000/svg"}
14
+ className={props.className}
15
+ >
10
16
  <path fill={"currentColor"} d={"M8.05.1L0 7.95l8.05 7.85v.05q.15.15.4.15t.4-.15q.15-.2.15-.4 0-.25-.15-.4V15H8.8L1.65 7.95l7.2-7Q9 .75 9 .55q0-.25-.2-.4Q8.65 0 8.4 0q-.2 0-.35.1"} />
11
17
  </svg>
12
18
  );
package/src/components/icons/Forward.tsx ADDED
@@ -0,0 +1,21 @@
1
+ import React from "react";
2
+
3
+ interface Props {
4
+ className?: string;
5
+ }
6
+
7
+ const Forward: React.VFC<Props> = (props) => {
8
+ return (
9
+ <svg
10
+ width={"9"}
11
+ height={"16"}
12
+ viewBox={"0 0 9 16"}
13
+ xmlns={"http://www.w3.org/2000/svg"}
14
+ className={props.className}
15
+ >
16
+ <path fill={"currentColor"} d={"M.95.15Q.8 0 .55 0t-.4.15Q0 .3 0 .55t.15.4L7.35 8l-7.2 7.05Q0 15.2 0 15.4q0 .25.2.4.15.2.4.2.2 0 .35-.15L9 8 1 .2Q1 .15.95.15"} />
17
+ </svg>
18
+ );
19
+ };
20
+
21
+ export { Forward };
package/src/components/icons/Icon.tsx CHANGED
@@ -1,12 +1,14 @@
1
- import type { AnyComponent } from "../../types";
2
-
3
1
  import React from "react";
2
+
3
+ import type { AnyComponent } from "../../types";
4
4
  import { Checkmark } from "./Checkmark";
5
5
  import { Back } from "./Back";
6
+ import { Forward } from "./Forward";
6
7
 
7
8
  enum ICON {
8
9
  checkmark = "checkmark",
9
10
  back = "back",
11
+ forward = "forward",
10
12
  }
11
13
 
12
14
  interface Props {
@@ -17,6 +19,7 @@ interface Props {
17
19
  const iconsMap = new Map<ICON, AnyComponent>([
18
20
  [ICON.checkmark, Checkmark],
19
21
  [ICON.back, Back],
22
+ [ICON.forward, Forward],
20
23
  ]);
21
24
 
22
25
  const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {
package/src/components/layout/list/Header.module.scss ADDED
@@ -0,0 +1,8 @@
1
+ .header > * {
2
+ padding-top: calc(80px / var(--ratio-dimensions));
3
+ padding-bottom: calc(40px / var(--ratio-dimensions));
4
+
5
+ font-size: calc(26px / var(--ratio-font));
6
+ color: var(--sub);
7
+ text-transform: uppercase;
8
+ }
package/src/components/layout/list/Header.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+
4
+ import styles from "./Item.module.scss";
5
+ import headerStyles from "./Header.module.scss";
6
+
7
+ const Header: React.FC = (props) => {
8
+ // @TODO way to use h1, h2, h3 instead of div
9
+ return (
10
+ <li className={classnames(styles.item, headerStyles.header)}>
11
+ <div>{props.children}</div>
12
+ </li>
13
+ );
14
+ };
15
+
16
+ export { Header };
package/src/components/layout/list/Item.module.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  list-style-type: none;
3
3
  margin: 0;
4
4
  padding: 0;
5
- font-size: 15px;
5
+ font-size: calc(34px / var(--ratio-font));
6
6
 
7
7
  &:not(:first-child) > * {
8
8
  border-top: 0.37px solid var(--header-border);
@@ -10,7 +10,7 @@
10
10
 
11
11
  > * {
12
12
  display: block;
13
- padding: 20px 0;
13
+ padding: 0;
14
14
  text-decoration: none;
15
15
  }
16
16
  }
@@ -20,4 +20,12 @@
20
20
  background: none;
21
21
  width: 100%;
22
22
  text-align: left;
23
+ font-family: inherit;
24
+ font-size: inherit;
25
+ }
26
+
27
+ .content {
28
+ display: flex;
29
+ min-height: calc(174px / var(--ratio-dimensions));
30
+ align-items: center;
23
31
  }