react-miui 0.9.2 → 0.9.3

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 (40) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/components/form/Checkbox.d.ts +2 -0
  3. package/dist/components/form/Checkbox.d.ts.map +1 -1
  4. package/dist/components/form/Checkbox.js +14 -4
  5. package/dist/components/form/Checkbox.js.map +1 -1
  6. package/dist/components/form/Checkbox.module.scss +54 -30
  7. package/dist/components/form/Input.d.ts.map +1 -1
  8. package/dist/components/form/Input.js +2 -0
  9. package/dist/components/form/Input.js.map +1 -1
  10. package/dist/components/form/Input.module.scss +21 -0
  11. package/dist/global.scss +7 -3
  12. package/docs/classes/ToasterProvider.html +8 -8
  13. package/docs/enums/ICON.html +8 -8
  14. package/docs/index.html +4 -4
  15. package/docs/modules/Item.html +3 -3
  16. package/docs/modules/List.html +3 -3
  17. package/docs/modules/Modal.html +3 -3
  18. package/docs/modules/ModalButtons.html +3 -3
  19. package/docs/modules/Section.html +3 -3
  20. package/docs/modules/StickyHeader.html +4 -4
  21. package/docs/modules.html +27 -27
  22. package/docs/pages/Tutorials/Test.html +3 -3
  23. package/esm/components/form/Checkbox.d.ts +2 -0
  24. package/esm/components/form/Checkbox.d.ts.map +1 -1
  25. package/esm/components/form/Checkbox.js +14 -4
  26. package/esm/components/form/Checkbox.js.map +1 -1
  27. package/esm/components/form/Checkbox.module.scss +54 -30
  28. package/esm/components/form/Input.d.ts.map +1 -1
  29. package/esm/components/form/Input.js +2 -0
  30. package/esm/components/form/Input.js.map +1 -1
  31. package/esm/components/form/Input.module.scss +21 -0
  32. package/esm/global.scss +7 -3
  33. package/package.json +1 -1
  34. package/src/components/form/Checkbox.module.scss +54 -30
  35. package/src/components/form/Checkbox.tsx +25 -4
  36. package/src/components/form/Input.module.scss +21 -0
  37. package/src/components/form/Input.tsx +2 -0
  38. package/src/demo/components/form/Checkbox.tsx +19 -1
  39. package/src/demo/components/form/Input.tsx +4 -0
  40. package/src/global.scss +7 -3
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.9.2</title>
7
- <meta name="description" content="Documentation for react-miui - v0.9.2">
6
+ <title>react-miui - v0.9.3</title>
7
+ <meta name="description" content="Documentation for react-miui - v0.9.3">
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.9.2</a>
26
+ <a href="index.html" class="title">react-miui - v0.9.3</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.9.2</h1>
60
+ <h1>Project react-miui - v0.9.3</h1>
61
61
  </div>
62
62
  </div>
63
63
  </header>
@@ -135,7 +135,7 @@
135
135
  <div class="tsd-signature tsd-kind-icon">Action<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>
136
136
  <aside class="tsd-sources">
137
137
  <ul>
138
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/action/Action.tsx#L22">src/components/ui/action/Action.tsx:22</a></li>
138
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/action/Action.tsx#L22">src/components/ui/action/Action.tsx:22</a></li>
139
139
  </ul>
140
140
  </aside>
141
141
  </section>
@@ -145,7 +145,7 @@
145
145
  <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">React.ButtonHTMLAttributes</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLButtonElement</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
146
146
  <aside class="tsd-sources">
147
147
  <ul>
148
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/button/Button.tsx#L11">src/components/ui/button/Button.tsx:11</a></li>
148
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/button/Button.tsx#L11">src/components/ui/button/Button.tsx:11</a></li>
149
149
  </ul>
150
150
  </aside>
151
151
  </section>
@@ -155,7 +155,7 @@
155
155
  <div class="tsd-signature tsd-kind-icon">Card<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>
156
156
  <aside class="tsd-sources">
157
157
  <ul>
158
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/card/Card.tsx#L13">src/components/layout/card/Card.tsx:13</a></li>
158
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/card/Card.tsx#L13">src/components/layout/card/Card.tsx:13</a></li>
159
159
  </ul>
160
160
  </aside>
161
161
  </section>
@@ -165,7 +165,7 @@
165
165
  <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>
166
166
  <aside class="tsd-sources">
167
167
  <ul>
168
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/form/Checkbox.tsx#L13">src/components/form/Checkbox.tsx:13</a></li>
168
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/form/Checkbox.tsx#L16">src/components/form/Checkbox.tsx:16</a></li>
169
169
  </ul>
170
170
  </aside>
171
171
  </section>
@@ -175,7 +175,7 @@
175
175
  <div class="tsd-signature tsd-kind-icon">Choice<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>
176
176
  <aside class="tsd-sources">
177
177
  <ul>
178
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/form/choice/Choice.tsx#L15">src/components/form/choice/Choice.tsx:15</a></li>
178
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/form/choice/Choice.tsx#L15">src/components/form/choice/Choice.tsx:15</a></li>
179
179
  </ul>
180
180
  </aside>
181
181
  </section>
@@ -185,7 +185,7 @@
185
185
  <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>
186
186
  <aside class="tsd-sources">
187
187
  <ul>
188
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
188
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
189
189
  </ul>
190
190
  </aside>
191
191
  </section>
@@ -195,7 +195,7 @@
195
195
  <div class="tsd-signature tsd-kind-icon">Equal<wbr>Actions<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>
196
196
  <aside class="tsd-sources">
197
197
  <ul>
198
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/action/EqualActions.tsx#L11">src/components/ui/action/EqualActions.tsx:11</a></li>
198
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/action/EqualActions.tsx#L11">src/components/ui/action/EqualActions.tsx:11</a></li>
199
199
  </ul>
200
200
  </aside>
201
201
  </section>
@@ -205,7 +205,7 @@
205
205
  <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>
206
206
  <aside class="tsd-sources">
207
207
  <ul>
208
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
208
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
209
209
  </ul>
210
210
  </aside>
211
211
  </section>
@@ -215,7 +215,7 @@
215
215
  <div class="tsd-signature tsd-kind-icon">Header<wbr>Icon<wbr>Action<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>
216
216
  <aside class="tsd-sources">
217
217
  <ul>
218
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/header/HeaderIconAction.tsx#L22">src/components/layout/header/HeaderIconAction.tsx:22</a></li>
218
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/header/HeaderIconAction.tsx#L22">src/components/layout/header/HeaderIconAction.tsx:22</a></li>
219
219
  </ul>
220
220
  </aside>
221
221
  </section>
@@ -225,7 +225,7 @@
225
225
  <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>
226
226
  <aside class="tsd-sources">
227
227
  <ul>
228
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/icons/Icon.tsx#L31">src/components/icons/Icon.tsx:31</a></li>
228
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/icons/Icon.tsx#L31">src/components/icons/Icon.tsx:31</a></li>
229
229
  </ul>
230
230
  </aside>
231
231
  </section>
@@ -235,7 +235,7 @@
235
235
  <div class="tsd-signature tsd-kind-icon">Input<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">Omit</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">React.InputHTMLAttributes</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLInputElement</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">&quot;prefix&quot;</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
236
236
  <aside class="tsd-sources">
237
237
  <ul>
238
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/form/Input.tsx#L12">src/components/form/Input.tsx:12</a></li>
238
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/form/Input.tsx#L12">src/components/form/Input.tsx:12</a></li>
239
239
  </ul>
240
240
  </aside>
241
241
  </section>
@@ -245,7 +245,7 @@
245
245
  <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"> &amp; </span><span class="tsd-signature-type">SubComponents</span><span class="tsd-signature-symbol"> = ...</span></div>
246
246
  <aside class="tsd-sources">
247
247
  <ul>
248
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/list/Item.tsx#L36">src/components/layout/list/Item.tsx:36</a></li>
248
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/list/Item.tsx#L36">src/components/layout/list/Item.tsx:36</a></li>
249
249
  </ul>
250
250
  </aside>
251
251
  </section>
@@ -255,7 +255,7 @@
255
255
  <div class="tsd-signature tsd-kind-icon">Label<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>
256
256
  <aside class="tsd-sources">
257
257
  <ul>
258
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/form/Label.tsx#L12">src/components/form/Label.tsx:12</a></li>
258
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/form/Label.tsx#L12">src/components/form/Label.tsx:12</a></li>
259
259
  </ul>
260
260
  </aside>
261
261
  </section>
@@ -265,7 +265,7 @@
265
265
  <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">&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">SubComponents</span><span class="tsd-signature-symbol"> = ...</span></div>
266
266
  <aside class="tsd-sources">
267
267
  <ul>
268
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/list/List.tsx#L20">src/components/layout/list/List.tsx:20</a></li>
268
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/list/List.tsx#L20">src/components/layout/list/List.tsx:20</a></li>
269
269
  </ul>
270
270
  </aside>
271
271
  </section>
@@ -275,7 +275,7 @@
275
275
  <div class="tsd-signature tsd-kind-icon">Modal<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">SubComponents</span><span class="tsd-signature-symbol"> = ...</span></div>
276
276
  <aside class="tsd-sources">
277
277
  <ul>
278
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/modal/Modal.tsx#L25">src/components/ui/modal/Modal.tsx:25</a></li>
278
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/modal/Modal.tsx#L25">src/components/ui/modal/Modal.tsx:25</a></li>
279
279
  </ul>
280
280
  </aside>
281
281
  </section>
@@ -285,7 +285,7 @@
285
285
  <div class="tsd-signature tsd-kind-icon">Modal<wbr>Buttons<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">SubComponents</span><span class="tsd-signature-symbol"> = ...</span></div>
286
286
  <aside class="tsd-sources">
287
287
  <ul>
288
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/modal/ModalButtons.tsx#L12">src/components/ui/modal/ModalButtons.tsx:12</a></li>
288
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/modal/ModalButtons.tsx#L12">src/components/ui/modal/ModalButtons.tsx:12</a></li>
289
289
  </ul>
290
290
  </aside>
291
291
  </section>
@@ -295,7 +295,7 @@
295
295
  <div class="tsd-signature tsd-kind-icon">Search<wbr>Container<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol"> = ...</span></div>
296
296
  <aside class="tsd-sources">
297
297
  <ul>
298
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/section/SearchContainer.tsx#L5">src/components/layout/section/SearchContainer.tsx:5</a></li>
298
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/section/SearchContainer.tsx#L5">src/components/layout/section/SearchContainer.tsx:5</a></li>
299
299
  </ul>
300
300
  </aside>
301
301
  </section>
@@ -305,7 +305,7 @@
305
305
  <div class="tsd-signature tsd-kind-icon">Section<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">SubComponents</span><span class="tsd-signature-symbol"> = ...</span></div>
306
306
  <aside class="tsd-sources">
307
307
  <ul>
308
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/section/Section.tsx#L18">src/components/layout/section/Section.tsx:18</a></li>
308
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/section/Section.tsx#L18">src/components/layout/section/Section.tsx:18</a></li>
309
309
  </ul>
310
310
  </aside>
311
311
  </section>
@@ -315,7 +315,7 @@
315
315
  <div class="tsd-signature tsd-kind-icon">Selector<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>
316
316
  <aside class="tsd-sources">
317
317
  <ul>
318
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/tabs/Selector.tsx#L14">src/components/ui/tabs/Selector.tsx:14</a></li>
318
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/tabs/Selector.tsx#L14">src/components/ui/tabs/Selector.tsx:14</a></li>
319
319
  </ul>
320
320
  </aside>
321
321
  </section>
@@ -325,7 +325,7 @@
325
325
  <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>
326
326
  <aside class="tsd-sources">
327
327
  <ul>
328
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
328
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
329
329
  </ul>
330
330
  </aside>
331
331
  </section>
@@ -335,7 +335,7 @@
335
335
  <div class="tsd-signature tsd-kind-icon">Text<wbr>Area<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">React.TextareaHTMLAttributes</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">HTMLTextAreaElement</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
336
336
  <aside class="tsd-sources">
337
337
  <ul>
338
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/form/TextArea.tsx#L10">src/components/form/TextArea.tsx:10</a></li>
338
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/form/TextArea.tsx#L10">src/components/form/TextArea.tsx:10</a></li>
339
339
  </ul>
340
340
  </aside>
341
341
  </section>
@@ -345,7 +345,7 @@
345
345
  <div class="tsd-signature tsd-kind-icon">Toggle<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>
346
346
  <aside class="tsd-sources">
347
347
  <ul>
348
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/form/Toggle.tsx#L11">src/components/form/Toggle.tsx:11</a></li>
348
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/form/Toggle.tsx#L11">src/components/form/Toggle.tsx:11</a></li>
349
349
  </ul>
350
350
  </aside>
351
351
  </section>
@@ -362,7 +362,7 @@
362
362
  <li class="tsd-description">
363
363
  <aside class="tsd-sources">
364
364
  <ul>
365
- <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c0df333/src/components/ui/toaster/Toaster.tsx#L99">src/components/ui/toaster/Toaster.tsx:99</a></li>
365
+ <li>Defined in <a href="https://github.com/dzek69/react-miui/blob/05d2b3c/src/components/ui/toaster/Toaster.tsx#L99">src/components/ui/toaster/Toaster.tsx:99</a></li>
366
366
  </ul>
367
367
  </aside>
368
368
  <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ToasterFn</span></h4>
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.9.2</title>
7
- <meta name="description" content="Documentation for react-miui - v0.9.2">
6
+ <title>Test | react-miui - v0.9.3</title>
7
+ <meta name="description" content="Documentation for react-miui - v0.9.3">
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.9.2</a>
26
+ <a href="../../index.html" class="title">react-miui - v0.9.3</a>
27
27
  </div>
28
28
  <div class="table-cell" id="tsd-widgets">
29
29
  <div id="tsd-filter">
package/esm/components/form/Checkbox.d.ts CHANGED
@@ -4,6 +4,8 @@ interface Props {
4
4
  name: string;
5
5
  onChange: () => void;
6
6
  checked: boolean;
7
+ disabled?: boolean;
8
+ readOnly?: boolean;
7
9
  }
8
10
  declare const Checkbox: React.FC<Props>;
9
11
  export { Checkbox };
package/esm/components/form/Checkbox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAW7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6B7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
package/esm/components/form/Checkbox.js CHANGED
@@ -1,14 +1,24 @@
1
1
  import React from "react";
2
+ import classnames from "classnames";
2
3
  import styles from "./Checkbox.module.scss";
3
4
  import { Checkmark } from "../icons/Checkmark.js";
4
5
  const Checkbox = (props) => {
5
6
  const style = {};
6
7
  props.color && (style.color = props.color);
7
- return (React.createElement("label", { className: styles.checkbox },
8
- React.createElement("input", { type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked }),
9
- React.createElement("span", { style: style },
8
+ const cls = classnames(styles.checkbox, {
9
+ [styles.disabled]: props.disabled,
10
+ [styles.readOnly]: props.readOnly,
11
+ });
12
+ const checkmarkCls = classnames(styles.checkmark, {
13
+ [styles.checkmarkDisabled]: props.disabled,
14
+ [styles.checkmarkChecked]: props.checked,
15
+ [styles.checkmarkReadOnly]: props.readOnly,
16
+ });
17
+ return (React.createElement("label", { className: cls },
18
+ React.createElement("input", { type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked, disabled: props.disabled, readOnly: props.readOnly }),
19
+ React.createElement("span", { style: style, className: checkmarkCls },
10
20
  React.createElement(Checkmark, null)),
11
- React.createElement("span", null, props.children)));
21
+ React.createElement("span", { className: styles.label }, props.children)));
12
22
  };
13
23
  export { Checkbox };
14
24
  //# sourceMappingURL=Checkbox.js.map
package/esm/components/form/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AASlD,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,KAAK,GAAwB,EAAE,CAAC;IACtC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,QAAQ;QAC7B,+BAAO,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI;QAC/F,8BAAM,KAAK,EAAE,KAAK;YAAE,oBAAC,SAAS,OAAG,CAAO;QACxC,kCAAO,KAAK,CAAC,QAAQ,CAAQ,CACzB,CACX,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAWlD,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;IACxC,MAAM,KAAK,GAAwB,EAAE,CAAC;IACtC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE;QACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;QACjC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;KACpC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9C,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,QAAQ;QAC1C,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,OAAO;QACxC,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,QAAQ;KAC7C,CAAC,CAAC;IAEH,OAAO,CACH,+BAAO,SAAS,EAAE,GAAG;QACjB,+BACI,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;QACF,8BAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY;YAAE,oBAAC,SAAS,OAAG,CAAO;QACjE,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAQ,CAClD,CACX,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
package/esm/components/form/Checkbox.module.scss CHANGED
@@ -6,42 +6,66 @@
6
6
  margin: 0;
7
7
  vertical-align: middle;
8
8
 
9
- + span {
10
- border-radius: 100px;
11
- background: var(--inactive-bg);
12
- width: 18px;
13
- height: 18px;
14
- display: inline-flex;
15
- justify-content: center;
16
- align-items: center;
17
- vertical-align: middle;
18
-
19
- svg {
20
- width: 9px;
21
- height: 9px;
22
- fill: white;
23
- }
24
-
25
- + span {
26
- vertical-align: middle;
27
- }
28
- }
29
-
30
9
  &:focus-visible {
31
- + span {
10
+ + .checkmark {
32
11
  box-shadow: 0 0 5px black;
33
12
  }
34
13
  }
35
14
 
36
- &:checked {
37
- + span {
38
- color: var(--main-color);
39
- background: currentColor;
40
- }
15
+ + .checkmark + .label:not(:empty) {
16
+ margin-left: 0.75em;
41
17
  }
18
+ }
19
+ }
42
20
 
43
- + span + span:not(:empty) {
44
- margin-left: 0.5em;
45
- }
21
+ .checkmark {
22
+ border-radius: 100px;
23
+ background: none;
24
+ border: 1px solid var(--inactive-bg);
25
+ width: 18px;
26
+ height: 18px;
27
+ display: inline-flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ vertical-align: middle;
31
+ box-sizing: border-box;
32
+
33
+ svg {
34
+ display: none;
35
+ width: 9px;
36
+ height: 9px;
37
+ fill: white;
38
+ }
39
+
40
+ + .label {
41
+ vertical-align: middle;
42
+ }
43
+ }
44
+
45
+ .checkmarkChecked {
46
+ border-width: 0;
47
+ color: var(--main-color);
48
+ background: currentColor;
49
+
50
+ svg {
51
+ display: inline-block;
52
+ }
53
+
54
+ &.checkmarkDisabled {
55
+ background: var(--inactive-dark-bg);
56
+ }
57
+ }
58
+
59
+ .checkmarkDisabled {
60
+ background: var(--active-bg);
61
+
62
+ + .label {
63
+ color: var(--input-disabled-text);
64
+ }
65
+ }
66
+
67
+ .checkmarkReadOnly {
68
+ + .label {
69
+ color: var(--input-disabled-text);
46
70
  }
47
71
  }
package/esm/components/form/Input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAgCxF,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAkCxF,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}
package/esm/components/form/Input.js CHANGED
@@ -13,6 +13,8 @@ const Input = ({ className, children, prefix, suffix, onFocus, onBlur, ...props
13
13
  }, [onBlur]);
14
14
  const wrapperCls = classnames(styles.wrapper, {
15
15
  [styles.wrapperFocused]: focused,
16
+ [styles.disabled]: props.disabled,
17
+ [styles.readOnly]: props.readOnly,
16
18
  }, className);
17
19
  const prefixElem = prefix ? React.createElement("div", { className: styles.prefix }, prefix) : null;
18
20
  const suffixElem = suffix ? React.createElement("div", { className: styles.suffix }, suffix) : null;
package/esm/components/form/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAQzC,MAAM,KAAK,GAAkF,CAAC,EAC1F,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACtE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACrE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE;QAC1C,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,OAAO;KACnC,EAAE,SAAS,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU;QACrB,UAAU;QACX,kCAAW,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI;QACtF,UAAU,CACT,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}
1
+ {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/form/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAQzC,MAAM,KAAK,GAAkF,CAAC,EAC1F,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACtE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACrE,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,CAAC,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE;QAC1C,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,OAAO;QAChC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;QACjC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,QAAQ;KACpC,EAAE,SAAS,CAAC,CAAC;IAEd,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACjF,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU;QACrB,UAAU;QACX,kCAAW,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI;QACtF,UAAU,CACT,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EACH,KAAK,GACR,CAAC"}
package/esm/components/form/Input.module.scss CHANGED
@@ -24,6 +24,27 @@
24
24
  padding: 0 calc(36px / var(--ratio-dimensions));
25
25
  border: calc(1px / var(--ratio-border)) solid var(--border);
26
26
  align-items: center;
27
+
28
+ .input {
29
+ flex: 1;
30
+ }
31
+
32
+ &.disabled {
33
+ background: var(--input-disabled-bg);
34
+ color: var(--input-disabled-text);
35
+
36
+ .input {
37
+ color: var(--input-disabled-text);
38
+ }
39
+ }
40
+
41
+ &.readOnly {
42
+ color: var(--input-disabled-text);
43
+
44
+ .input {
45
+ color: var(--input-disabled-text);
46
+ }
47
+ }
27
48
  }
28
49
 
29
50
  .textarea {
package/esm/global.scss CHANGED
@@ -7,11 +7,12 @@
7
7
 
8
8
  --background: white;
9
9
 
10
- --main-color: #008ad2; // used
10
+ --main-color: #008ad2;
11
11
  --main-color-alt: #006AA9;
12
12
 
13
- --active-bg: #d3d3d3;
14
- --inactive-bg: #d3d3d3; // used
13
+ --active-bg: #e7e7e7;
14
+ --inactive-bg: #d3d3d3;
15
+ --inactive-dark-bg: #999;
15
16
 
16
17
  --toggle-handle-bg: #e0e0e0;
17
18
  --toggle-handle-border: #cdcdcd;
@@ -32,6 +33,9 @@
32
33
  --modal-button-bg: #f8f8f8;
33
34
  --modal-button-border: #c2c2c2;
34
35
 
36
+ --input-disabled-bg: #f3f3f3;
37
+ --input-disabled-text: #959595;
38
+
35
39
  --choice-bg: #ffffff;
36
40
  --choice-text: #999999;
37
41
  --choice-active-bg: #f3f3f3;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-miui",
3
- "version": "0.9.2",
3
+ "version": "0.9.3",
4
4
  "author": "Jacek Nowacki",
5
5
  "license": "MIT",
6
6
  "scripts": {
package/src/components/form/Checkbox.module.scss CHANGED
@@ -6,42 +6,66 @@
6
6
  margin: 0;
7
7
  vertical-align: middle;
8
8
 
9
- + span {
10
- border-radius: 100px;
11
- background: var(--inactive-bg);
12
- width: 18px;
13
- height: 18px;
14
- display: inline-flex;
15
- justify-content: center;
16
- align-items: center;
17
- vertical-align: middle;
18
-
19
- svg {
20
- width: 9px;
21
- height: 9px;
22
- fill: white;
23
- }
24
-
25
- + span {
26
- vertical-align: middle;
27
- }
28
- }
29
-
30
9
  &:focus-visible {
31
- + span {
10
+ + .checkmark {
32
11
  box-shadow: 0 0 5px black;
33
12
  }
34
13
  }
35
14
 
36
- &:checked {
37
- + span {
38
- color: var(--main-color);
39
- background: currentColor;
40
- }
15
+ + .checkmark + .label:not(:empty) {
16
+ margin-left: 0.75em;
41
17
  }
18
+ }
19
+ }
42
20
 
43
- + span + span:not(:empty) {
44
- margin-left: 0.5em;
45
- }
21
+ .checkmark {
22
+ border-radius: 100px;
23
+ background: none;
24
+ border: 1px solid var(--inactive-bg);
25
+ width: 18px;
26
+ height: 18px;
27
+ display: inline-flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ vertical-align: middle;
31
+ box-sizing: border-box;
32
+
33
+ svg {
34
+ display: none;
35
+ width: 9px;
36
+ height: 9px;
37
+ fill: white;
38
+ }
39
+
40
+ + .label {
41
+ vertical-align: middle;
42
+ }
43
+ }
44
+
45
+ .checkmarkChecked {
46
+ border-width: 0;
47
+ color: var(--main-color);
48
+ background: currentColor;
49
+
50
+ svg {
51
+ display: inline-block;
52
+ }
53
+
54
+ &.checkmarkDisabled {
55
+ background: var(--inactive-dark-bg);
56
+ }
57
+ }
58
+
59
+ .checkmarkDisabled {
60
+ background: var(--active-bg);
61
+
62
+ + .label {
63
+ color: var(--input-disabled-text);
64
+ }
65
+ }
66
+
67
+ .checkmarkReadOnly {
68
+ + .label {
69
+ color: var(--input-disabled-text);
46
70
  }
47
71
  }