react-miui 0.8.0 → 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 (160) hide show
  1. package/CHANGELOG.md +26 -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/components/form/choice/Choice.d.ts +11 -0
  12. package/dist/components/form/choice/Choice.d.ts.map +1 -0
  13. package/dist/components/form/choice/Choice.js +19 -0
  14. package/dist/components/form/choice/Choice.js.map +1 -0
  15. package/dist/components/form/choice/Choice.module.scss +43 -0
  16. package/dist/components/form/choice/ChoiceItem.d.ts +11 -0
  17. package/dist/components/form/choice/ChoiceItem.d.ts.map +1 -0
  18. package/dist/components/form/choice/ChoiceItem.js +33 -0
  19. package/dist/components/form/choice/ChoiceItem.js.map +1 -0
  20. package/dist/components/layout/list/Header.d.ts +1 -0
  21. package/dist/components/layout/list/Header.d.ts.map +1 -1
  22. package/dist/components/layout/list/Header.js +2 -2
  23. package/dist/components/layout/list/Header.js.map +1 -1
  24. package/dist/components/layout/list/Label.d.ts +1 -0
  25. package/dist/components/layout/list/Label.d.ts.map +1 -1
  26. package/dist/components/layout/list/Label.js +2 -1
  27. package/dist/components/layout/list/Label.js.map +1 -1
  28. package/dist/components/layout/list/List.d.ts.map +1 -1
  29. package/dist/components/layout/list/List.js +4 -3
  30. package/dist/components/layout/list/List.js.map +1 -1
  31. package/dist/components/layout/list/Value.d.ts +4 -1
  32. package/dist/components/layout/list/Value.d.ts.map +1 -1
  33. package/dist/components/layout/list/Value.js +2 -1
  34. package/dist/components/layout/list/Value.js.map +1 -1
  35. package/dist/components/ui/tabs/Item.d.ts +10 -0
  36. package/dist/components/ui/tabs/Item.d.ts.map +1 -0
  37. package/dist/components/ui/tabs/Item.js +39 -0
  38. package/dist/components/ui/tabs/Item.js.map +1 -0
  39. package/dist/components/ui/tabs/Item.module.scss +11 -0
  40. package/dist/components/ui/tabs/Selector.d.ts +10 -0
  41. package/dist/components/ui/tabs/Selector.d.ts.map +1 -0
  42. package/dist/components/ui/tabs/Selector.js +46 -0
  43. package/dist/components/ui/tabs/Selector.js.map +1 -0
  44. package/dist/components/ui/tabs/Selector.module.scss +6 -0
  45. package/dist/global.scss +16 -3
  46. package/dist/index.d.ts +2 -0
  47. package/dist/index.d.ts.map +1 -1
  48. package/dist/index.js +2 -0
  49. package/dist/index.js.map +1 -1
  50. package/dist/types/form.d.ts +7 -0
  51. package/dist/types/form.d.ts.map +1 -0
  52. package/dist/types/form.js +3 -0
  53. package/dist/types/form.js.map +1 -0
  54. package/dist/utils/index.d.ts +3 -0
  55. package/dist/utils/index.d.ts.map +1 -0
  56. package/dist/utils/index.js +15 -0
  57. package/dist/utils/index.js.map +1 -0
  58. package/dist/utils/toObjectValue.d.ts +4 -0
  59. package/dist/utils/toObjectValue.d.ts.map +1 -0
  60. package/dist/utils/toObjectValue.js +8 -0
  61. package/dist/utils/toObjectValue.js.map +1 -0
  62. package/docs/assets/js/search.js +1 -1
  63. package/docs/assets/js/search.json +1 -1
  64. package/docs/classes/ToasterProvider.html +14 -8
  65. package/docs/enums/ICON.html +14 -8
  66. package/docs/index.html +10 -4
  67. package/docs/modules/Item.html +4 -4
  68. package/docs/modules/List.html +3 -3
  69. package/docs/modules/Modal.html +3 -3
  70. package/docs/modules/ModalButtons.html +3 -3
  71. package/docs/modules/Section.html +3 -3
  72. package/docs/modules/StickyHeader.html +4 -4
  73. package/docs/modules.html +53 -25
  74. package/docs/pages/Tutorials/Test.html +3 -3
  75. package/esm/components/form/Checkbox.d.ts +2 -0
  76. package/esm/components/form/Checkbox.d.ts.map +1 -1
  77. package/esm/components/form/Checkbox.js +14 -4
  78. package/esm/components/form/Checkbox.js.map +1 -1
  79. package/esm/components/form/Checkbox.module.scss +54 -30
  80. package/esm/components/form/Input.d.ts.map +1 -1
  81. package/esm/components/form/Input.js +2 -0
  82. package/esm/components/form/Input.js.map +1 -1
  83. package/esm/components/form/Input.module.scss +21 -0
  84. package/esm/components/form/choice/Choice.d.ts +11 -0
  85. package/esm/components/form/choice/Choice.d.ts.map +1 -0
  86. package/esm/components/form/choice/Choice.js +13 -0
  87. package/esm/components/form/choice/Choice.js.map +1 -0
  88. package/esm/components/form/choice/Choice.module.scss +43 -0
  89. package/esm/components/form/choice/ChoiceItem.d.ts +11 -0
  90. package/esm/components/form/choice/ChoiceItem.d.ts.map +1 -0
  91. package/esm/components/form/choice/ChoiceItem.js +11 -0
  92. package/esm/components/form/choice/ChoiceItem.js.map +1 -0
  93. package/esm/components/layout/list/Header.d.ts +1 -0
  94. package/esm/components/layout/list/Header.d.ts.map +1 -1
  95. package/esm/components/layout/list/Header.js +2 -2
  96. package/esm/components/layout/list/Header.js.map +1 -1
  97. package/esm/components/layout/list/Label.d.ts +1 -0
  98. package/esm/components/layout/list/Label.d.ts.map +1 -1
  99. package/esm/components/layout/list/Label.js +2 -1
  100. package/esm/components/layout/list/Label.js.map +1 -1
  101. package/esm/components/layout/list/List.d.ts.map +1 -1
  102. package/esm/components/layout/list/List.js +4 -3
  103. package/esm/components/layout/list/List.js.map +1 -1
  104. package/esm/components/layout/list/Value.d.ts +4 -1
  105. package/esm/components/layout/list/Value.d.ts.map +1 -1
  106. package/esm/components/layout/list/Value.js +2 -1
  107. package/esm/components/layout/list/Value.js.map +1 -1
  108. package/esm/components/ui/tabs/Item.d.ts +10 -0
  109. package/esm/components/ui/tabs/Item.d.ts.map +1 -0
  110. package/esm/components/ui/tabs/Item.js +14 -0
  111. package/esm/components/ui/tabs/Item.js.map +1 -0
  112. package/esm/components/ui/tabs/Item.module.scss +11 -0
  113. package/esm/components/ui/tabs/Selector.d.ts +10 -0
  114. package/esm/components/ui/tabs/Selector.d.ts.map +1 -0
  115. package/esm/components/ui/tabs/Selector.js +21 -0
  116. package/esm/components/ui/tabs/Selector.js.map +1 -0
  117. package/esm/components/ui/tabs/Selector.module.scss +6 -0
  118. package/esm/global.scss +16 -3
  119. package/esm/index.d.ts +2 -0
  120. package/esm/index.d.ts.map +1 -1
  121. package/esm/index.js +2 -0
  122. package/esm/index.js.map +1 -1
  123. package/esm/types/form.d.ts +7 -0
  124. package/esm/types/form.d.ts.map +1 -0
  125. package/esm/types/form.js +2 -0
  126. package/esm/types/form.js.map +1 -0
  127. package/esm/utils/index.d.ts +3 -0
  128. package/esm/utils/index.d.ts.map +1 -0
  129. package/esm/utils/index.js +3 -0
  130. package/esm/utils/index.js.map +1 -0
  131. package/esm/utils/toObjectValue.d.ts +4 -0
  132. package/esm/utils/toObjectValue.d.ts.map +1 -0
  133. package/esm/utils/toObjectValue.js +5 -0
  134. package/esm/utils/toObjectValue.js.map +1 -0
  135. package/package.json +7 -7
  136. package/src/components/form/Checkbox.module.scss +54 -30
  137. package/src/components/form/Checkbox.tsx +25 -4
  138. package/src/components/form/Input.module.scss +21 -0
  139. package/src/components/form/Input.tsx +2 -0
  140. package/src/components/form/choice/Choice.module.scss +43 -0
  141. package/src/components/form/choice/Choice.tsx +32 -0
  142. package/src/components/form/choice/ChoiceItem.tsx +30 -0
  143. package/src/components/layout/list/Header.tsx +3 -2
  144. package/src/components/layout/list/Label.tsx +3 -1
  145. package/src/components/layout/list/List.tsx +5 -6
  146. package/src/components/layout/list/Value.tsx +7 -2
  147. package/src/components/ui/tabs/Item.module.scss +11 -0
  148. package/src/components/ui/tabs/Item.tsx +26 -0
  149. package/src/components/ui/tabs/Selector.module.scss +6 -0
  150. package/src/components/ui/tabs/Selector.tsx +31 -0
  151. package/src/demo/components/form/Checkbox.tsx +19 -1
  152. package/src/demo/components/form/Choice.tsx +19 -0
  153. package/src/demo/components/form/Input.tsx +4 -0
  154. package/src/demo/components/ui/tabs/Tabs.tsx +15 -0
  155. package/src/demo/componentsMap.ts +10 -0
  156. package/src/global.scss +16 -3
  157. package/src/index.ts +2 -0
  158. package/src/types/form.ts +7 -0
  159. package/src/utils/index.ts +2 -0
  160. package/src/utils/toObjectValue.ts +9 -0
@@ -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
  }
@@ -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"}
@@ -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;
@@ -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"}
@@ -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 {
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import type { Value } from "../../../types/form";
3
+ interface Props {
4
+ values: Value[];
5
+ value: string;
6
+ name: string;
7
+ onChange: (value: string) => void;
8
+ }
9
+ declare const Choice: React.FC<Props>;
10
+ export { Choice };
11
+ //# sourceMappingURL=Choice.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAKjD,UAAU,KAAK;IACX,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAe3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+ import { toObjectValue } from "../../../utils";
3
+ import { ChoiceItem } from "./ChoiceItem";
4
+ import styles from "./Choice.module.scss";
5
+ const Choice = (props) => {
6
+ const opts = props.values.map(option => {
7
+ const opt = toObjectValue(option);
8
+ return (React.createElement(ChoiceItem, { key: opt.value, name: props.name, value: opt, onChange: props.onChange, active: props.value === opt.value }));
9
+ });
10
+ return React.createElement("div", { className: styles.choice }, opts);
11
+ };
12
+ export { Choice };
13
+ //# sourceMappingURL=Choice.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Choice.js","sourceRoot":"","sources":["../../../../src/components/form/choice/Choice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAS1C,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACnC,MAAM,GAAG,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;QAClC,OAAO,CACH,oBAAC,UAAU,IACP,GAAG,EAAE,GAAG,CAAC,KAAK,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,GACnC,CACL,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,IAAI,CAAO,CAAC;AACvD,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
@@ -0,0 +1,43 @@
1
+ .choice {
2
+ input {
3
+ width: 0;
4
+ height: 0;
5
+ overflow: hidden;
6
+ opacity: 0;
7
+ margin: 0;
8
+ position: absolute;
9
+
10
+ &:checked + span {
11
+ color: var(--choice-active-text);
12
+ background: var(--choice-active-bg);
13
+ }
14
+ }
15
+
16
+ span {
17
+ display: flex;
18
+ padding: 0;
19
+ flex: 1;
20
+ height: 100%;
21
+ align-items: center;
22
+ justify-content: center;
23
+ font-size: calc(24px / var(--ratio-font));
24
+ color: var(--choice-text);
25
+ background: var(--choice-bg);
26
+ }
27
+
28
+ display: flex;
29
+ border: 1px solid var(--choice-border); // @TODO width
30
+ position: relative;
31
+ border-radius: 8px;
32
+ overflow: hidden;
33
+
34
+ label {
35
+ flex: 1;
36
+ height: calc(89px / var(--ratio-dimensions));
37
+ display: flex;
38
+
39
+ + label {
40
+ border-left: 1px solid var(--choice-border);
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import type { ObjectValue } from "../../../types/form";
3
+ interface Props {
4
+ name: string;
5
+ value: ObjectValue;
6
+ onChange: (value: string) => void;
7
+ active: boolean;
8
+ }
9
+ declare const ChoiceItem: React.FC<Props>;
10
+ export { ChoiceItem };
11
+ //# sourceMappingURL=ChoiceItem.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ChoiceItem.d.ts","sourceRoot":"","sources":["../../../../src/components/form/choice/ChoiceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,UAAU,KAAK;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiB/B,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
@@ -0,0 +1,11 @@
1
+ import React, { useCallback } from "react";
2
+ const ChoiceItem = (props) => {
3
+ const handleChange = useCallback((e) => {
4
+ props.onChange(e.currentTarget.value);
5
+ }, [props.onChange]);
6
+ return (React.createElement("label", { key: props.value.value, tabIndex: 0 },
7
+ React.createElement("input", { type: "radio", name: props.name, value: props.value.value, checked: props.active, onChange: handleChange }),
8
+ React.createElement("span", null, props.value.label)));
9
+ };
10
+ export { ChoiceItem };
11
+ //# sourceMappingURL=ChoiceItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ChoiceItem.js","sourceRoot":"","sources":["../../../../src/components/form/choice/ChoiceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAU3C,MAAM,UAAU,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC1C,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QACxE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACH,+BAAO,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC;QACtC,+BACI,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EACxB,OAAO,EAAE,KAAK,CAAC,MAAM,EACrB,QAAQ,EAAE,YAAY,GACxB;QACF,kCAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAQ,CAC5B,CACX,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  declare type Variant = "inset";
3
3
  interface Props {
4
+ className?: string;
4
5
  variant?: Variant | Variant[];
5
6
  }
6
7
  declare const Header: React.FC<Props>;
@@ -1 +1 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAa3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAa3B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
@@ -1,11 +1,11 @@
1
1
  import React from "react";
2
2
  import classnames from "classnames";
3
+ import { makeVariants } from "../../../utils/makeVariants";
3
4
  import styles from "./Item.module.scss";
4
5
  import headerStyles from "./Header.module.scss";
5
- import { makeVariants } from "../../../utils/makeVariants";
6
6
  const Header = (props) => {
7
7
  const v = makeVariants(props.variant);
8
- const cls = classnames(styles.item, headerStyles.header, {
8
+ const cls = classnames(props.className, styles.item, headerStyles.header, {
9
9
  [styles.inset]: v.includes("inset"),
10
10
  });
11
11
  return (React.createElement("li", { className: cls },
@@ -1 +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;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAQ3D,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE;QACrD,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAGH,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG;QACd,iCAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
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,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAShD,MAAM,MAAM,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE;QACtE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAGH,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG;QACd,iCAAM,KAAK,CAAC,QAAQ,CAAO,CAC1B,CACR,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
@@ -2,6 +2,7 @@ import React from "react";
2
2
  import type { ReactNode } from "react";
3
3
  interface Props {
4
4
  sub?: ReactNode;
5
+ className?: string;
5
6
  }
6
7
  declare const Label: React.FC<Props>;
7
8
  export { Label };
@@ -1 +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"}
1
+ {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,KAAK;IACX,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAS1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
+ import classnames from "classnames";
2
3
  import styles from "./Label.module.scss";
3
4
  const Label = (props) => {
4
5
  const sub = props.sub ? React.createElement("div", { className: styles.sub }, props.sub) : null;
5
- return (React.createElement("div", { className: styles.root },
6
+ return (React.createElement("div", { className: classnames(styles.root, props.className) },
6
7
  React.createElement("div", null, props.children),
7
8
  sub));
8
9
  };
@@ -1 +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"}
1
+ {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAOzC,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,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;QACpD,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC1B,GAAG,CACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAqB7B,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,aAAK,OAAO,GAAG,OAAO,CAAC;AAEvB,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,MAAM,EAAE,OAAO,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAoB7B,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -14,9 +14,10 @@ const List = (props) => {
14
14
  }
15
15
  return child;
16
16
  });
17
- return (React.createElement("ul", { className: classnames(styles.list, {
18
- [styles.inset]: v.includes("inset"),
19
- }) }, chld));
17
+ const cls = classnames(props.className, styles.list, {
18
+ [styles.inset]: v.includes("inset"),
19
+ });
20
+ return (React.createElement("ul", { className: cls }, chld));
20
21
  };
21
22
  List.Header = Header;
22
23
  export { List };
@@ -1 +1 @@
1
- {"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAaxC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACtD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE;YACzG,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAE7B,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,CAAC,CAAC;SACN;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,4BACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;YAC/B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;SACtC,CAAC,IACJ,IAAI,CACD,CACR,CAAC;AACN,CAAC,CAAC;AAEF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,OAAO,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/components/layout/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAaxC,MAAM,IAAI,GAAoC,CAAC,KAAK,EAAE,EAAE;IACpD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACtD,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE;YACzG,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAE7B,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,CAAC,CAAC;SACN;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE;QACjD,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;KACtC,CAAC,CAAC;IAEH,OAAO,CACH,4BAAI,SAAS,EAAE,GAAG,IAAG,IAAI,CAAM,CAClC,CAAC;AACN,CAAC,CAAC;AAEF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -1,4 +1,7 @@
1
1
  import React from "react";
2
- declare const Value: React.FC;
2
+ interface Props {
3
+ className?: string;
4
+ }
5
+ declare const Value: React.FC<Props>;
3
6
  export { Value };
4
7
  //# sourceMappingURL=Value.d.ts.map
@@ -1 +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"}
1
+ {"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAI1B,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
+ import classnames from "classnames";
2
3
  import styles from "./Value.module.scss";
3
4
  const Value = (props) => {
4
- return (React.createElement("div", { className: styles.value }, props.children));
5
+ return (React.createElement("div", { className: classnames(styles.value, props.className) }, props.children));
5
6
  };
6
7
  export { Value };
7
8
  //# sourceMappingURL=Value.js.map
@@ -1 +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"}
1
+ {"version":3,"file":"Value.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAMzC,MAAM,KAAK,GAAoB,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO,CACH,6BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,CACpF,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import type { ObjectValue } from "../../../types/form";
3
+ interface Props {
4
+ value: ObjectValue;
5
+ onClick: (value: string) => void;
6
+ active: boolean;
7
+ }
8
+ declare const Item: React.FC<Props>;
9
+ export { Item };
10
+ //# sourceMappingURL=Item.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,UAAU,KAAK;IACX,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAUzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -0,0 +1,14 @@
1
+ import React, { useCallback } from "react";
2
+ import classnames from "classnames";
3
+ import styles from "./Item.module.scss";
4
+ const Item = (props) => {
5
+ const handleClick = useCallback(() => {
6
+ props.onClick(props.value.value);
7
+ }, [props.onClick, props.value.value, props.value.label]);
8
+ const cls = classnames(styles.button, {
9
+ [styles.active]: props.active,
10
+ });
11
+ return React.createElement("button", { onClick: handleClick, className: cls, type: "button" }, props.value.label);
12
+ };
13
+ export { Item };
14
+ //# sourceMappingURL=Item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAQxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAE1D,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;QAClC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM;KAChC,CAAC,CAAC;IAEH,OAAO,gCAAQ,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,IAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAU,CAAC;AACtG,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
@@ -0,0 +1,11 @@
1
+ .button {
2
+ border: none;
3
+ padding: 0;
4
+ font-size: calc(29px / var(--ratio-font));
5
+ color: var(--selector-text);
6
+ background: none;
7
+ }
8
+
9
+ .active {
10
+ color: var(--selector-active);
11
+ }
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import type { Value } from "../../../types/form";
3
+ interface Props {
4
+ values: Value[];
5
+ value?: string;
6
+ onChange?: (value: string) => void;
7
+ }
8
+ declare const Selector: React.FC<Props>;
9
+ export { Selector };
10
+ //# sourceMappingURL=Selector.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAKjD,UAAU,KAAK;IACX,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAe7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -0,0 +1,21 @@
1
+ import React, { useCallback, useState } from "react";
2
+ import { toObjectValue } from "../../../utils";
3
+ import { Item } from "./Item";
4
+ import styles from "./Selector.module.scss";
5
+ const Selector = (props) => {
6
+ var _a;
7
+ const [current, setCurrent] = useState(props.value);
8
+ const handleCurrent = useCallback((value) => {
9
+ var _a;
10
+ setCurrent(value);
11
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
12
+ }, [props.onChange]);
13
+ const crr = (_a = props.value) !== null && _a !== void 0 ? _a : current;
14
+ const vals = props.values.map(v => {
15
+ const ov = toObjectValue(v);
16
+ return React.createElement(Item, { key: ov.value, value: ov, onClick: handleCurrent, active: crr === ov.value });
17
+ });
18
+ return React.createElement("div", { className: styles.selector }, vals);
19
+ };
20
+ export { Selector };
21
+ //# sourceMappingURL=Selector.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Selector.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Selector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,MAAM,QAAQ,GAAoB,CAAC,KAAK,EAAE,EAAE;;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;;QAChD,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,MAAA,KAAK,CAAC,QAAQ,+CAAd,KAAK,EAAY,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,MAAM,GAAG,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,OAAO,CAAC;IAEnC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QAC9B,MAAM,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC5B,OAAO,oBAAC,IAAI,IAAC,GAAG,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,KAAK,GAAI,CAAC;IAChG,CAAC,CAAC,CAAC;IACH,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,IAAI,CAAO,CAAC;AACzD,CAAC,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -0,0 +1,6 @@
1
+ .selector {
2
+ display: flex;
3
+ flex: 1;
4
+ justify-content: center;
5
+ gap: calc(114px / var(--ratio-dimensions));
6
+ }
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,18 @@
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
+
39
+ --choice-bg: #ffffff;
40
+ --choice-text: #999999;
41
+ --choice-active-bg: #f3f3f3;
42
+ --choice-active-text: #313131;
43
+ --choice-border: #cfcfcf;
44
+
45
+ --selector-text: #606060;
46
+ --selector-active: var(--main-color);
47
+
35
48
  // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
36
49
  --blue1: #038bf4;
37
50
  --orange1: #ff7200;
package/esm/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export * from "./components/form/choice/Choice.js";
1
2
  export * from "./components/form/Checkbox.js";
2
3
  export * from "./components/form/Input.js";
3
4
  export * from "./components/form/Label.js";
@@ -18,5 +19,6 @@ export * from "./components/ui/button/Button.js";
18
19
  export * from "./components/ui/directionPad/Pad.js";
19
20
  export * from "./components/ui/modal/Modal.js";
20
21
  export * from "./components/ui/modal/ModalButtons.js";
22
+ export * from "./components/ui/tabs/Selector.js";
21
23
  export * from "./components/ui/toaster/Toaster.js";
22
24
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}
package/esm/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export * from "./components/form/choice/Choice.js";
1
2
  export * from "./components/form/Checkbox.js";
2
3
  export * from "./components/form/Input.js";
3
4
  export * from "./components/form/Label.js";
@@ -18,5 +19,6 @@ export * from "./components/ui/button/Button.js";
18
19
  export * from "./components/ui/directionPad/Pad.js";
19
20
  export * from "./components/ui/modal/Modal.js";
20
21
  export * from "./components/ui/modal/ModalButtons.js";
22
+ export * from "./components/ui/tabs/Selector.js";
21
23
  export * from "./components/ui/toaster/Toaster.js";
22
24
  //# sourceMappingURL=index.js.map
package/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC"}
@@ -0,0 +1,7 @@
1
+ interface ObjectValue {
2
+ value: string;
3
+ label: string;
4
+ }
5
+ declare type Value = string | ObjectValue;
6
+ export type { ObjectValue, Value, };
7
+ //# sourceMappingURL=form.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;AACtD,aAAK,KAAK,GAAG,MAAM,GAAG,WAAW,CAAC;AAElC,YAAY,EACR,WAAW,EACX,KAAK,GACR,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=form.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/types/form.ts"],"names":[],"mappings":""}
@@ -0,0 +1,3 @@
1
+ export * from "./makeVariants";
2
+ export * from "./toObjectValue";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export * from "./makeVariants";
2
+ export * from "./toObjectValue";
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type { ObjectValue, Value } from "../types/form";
2
+ declare const toObjectValue: (s: Value) => ObjectValue;
3
+ export { toObjectValue, };
4
+ //# sourceMappingURL=toObjectValue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"toObjectValue.d.ts","sourceRoot":"","sources":["../../src/utils/toObjectValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExD,QAAA,MAAM,aAAa,MAAO,KAAK,KAAG,WAEjC,CAAC;AAEF,OAAO,EACH,aAAa,GAChB,CAAC"}