@nectary/components 4.8.2 → 4.9.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 (177) hide show
  1. package/accordion/index.d.ts +8 -4
  2. package/accordion/types.d.ts +11 -16
  3. package/accordion-item/index.d.ts +8 -4
  4. package/accordion-item/types.d.ts +30 -47
  5. package/action-menu/index.d.ts +8 -4
  6. package/action-menu/types.d.ts +7 -8
  7. package/action-menu-option/index.d.ts +8 -4
  8. package/action-menu-option/types.d.ts +28 -32
  9. package/action-menu-option/utils.d.ts +1 -2
  10. package/alert/index.d.ts +8 -4
  11. package/alert/types.d.ts +22 -27
  12. package/avatar/index.d.ts +8 -4
  13. package/avatar/types.d.ts +25 -42
  14. package/badge/index.d.ts +8 -4
  15. package/badge/types.d.ts +18 -32
  16. package/button/index.d.ts +8 -4
  17. package/button/types.d.ts +140 -160
  18. package/button-group/index.d.ts +8 -4
  19. package/button-group/types.d.ts +10 -9
  20. package/button-group-item/index.d.ts +8 -4
  21. package/button-group-item/types.d.ts +42 -42
  22. package/card/index.d.ts +8 -4
  23. package/card/types.d.ts +8 -19
  24. package/card-container/index.d.ts +7 -4
  25. package/card-container/types.d.ts +2 -2
  26. package/card-v2/index.d.ts +8 -4
  27. package/card-v2/types.d.ts +41 -53
  28. package/card-v2-title/index.d.ts +8 -4
  29. package/card-v2-title/types.d.ts +21 -33
  30. package/checkbox/index.d.ts +8 -4
  31. package/checkbox/types.d.ts +45 -65
  32. package/chip/index.d.ts +8 -4
  33. package/chip/types.d.ts +30 -44
  34. package/code-tag/index.d.ts +8 -4
  35. package/code-tag/types.d.ts +15 -16
  36. package/color-menu/index.d.ts +8 -4
  37. package/color-menu/types.d.ts +15 -22
  38. package/color-menu-option/index.d.ts +8 -4
  39. package/color-menu-option/types.d.ts +14 -15
  40. package/color-swatch/index.d.ts +8 -4
  41. package/color-swatch/types.d.ts +15 -16
  42. package/date-picker/index.d.ts +8 -4
  43. package/date-picker/types.d.ts +50 -79
  44. package/dialog/index.d.ts +8 -4
  45. package/dialog/types.d.ts +30 -34
  46. package/emoji/index.d.ts +8 -4
  47. package/emoji/types.d.ts +11 -12
  48. package/emoji-picker/index.d.ts +8 -4
  49. package/emoji-picker/types.d.ts +25 -18
  50. package/field/index.d.ts +8 -4
  51. package/field/types.d.ts +21 -38
  52. package/file-drop/index.d.ts +8 -4
  53. package/file-drop/types.d.ts +33 -55
  54. package/file-picker/index.d.ts +8 -4
  55. package/file-picker/types.d.ts +12 -22
  56. package/file-status/index.d.ts +8 -4
  57. package/file-status/types.d.ts +27 -32
  58. package/flag/index.d.ts +8 -4
  59. package/flag/types.d.ts +10 -11
  60. package/grid/index.d.ts +8 -4
  61. package/grid/types.d.ts +19 -17
  62. package/grid-item/index.d.ts +8 -4
  63. package/grid-item/types.d.ts +7 -12
  64. package/help-tooltip/index.d.ts +8 -4
  65. package/help-tooltip/types.d.ts +11 -6
  66. package/horizontal-stepper/index.d.ts +8 -4
  67. package/horizontal-stepper/types.d.ts +37 -38
  68. package/horizontal-stepper-item/index.d.ts +8 -4
  69. package/horizontal-stepper-item/types.d.ts +30 -39
  70. package/icon/index.d.ts +8 -4
  71. package/icon/types.d.ts +18 -28
  72. package/inline-alert/index.d.ts +8 -4
  73. package/inline-alert/types.d.ts +30 -33
  74. package/input/index.d.ts +8 -4
  75. package/input/types.d.ts +54 -89
  76. package/link/index.d.ts +8 -4
  77. package/link/types.d.ts +31 -57
  78. package/list/index.d.ts +7 -4
  79. package/list/types.d.ts +2 -2
  80. package/list-item/index.d.ts +8 -4
  81. package/list-item/types.d.ts +10 -8
  82. package/package.json +2 -2
  83. package/pagination/index.d.ts +8 -4
  84. package/pagination/types.d.ts +31 -27
  85. package/persistent-overlay/index.d.ts +8 -4
  86. package/persistent-overlay/types.d.ts +19 -21
  87. package/pop/index.d.ts +8 -4
  88. package/pop/types.d.ts +13 -23
  89. package/popover/index.d.ts +8 -4
  90. package/popover/types.d.ts +20 -32
  91. package/progress/index.d.ts +8 -4
  92. package/progress/types.d.ts +13 -14
  93. package/progress-stepper/index.d.ts +8 -4
  94. package/progress-stepper/types.d.ts +10 -15
  95. package/progress-stepper-item/index.d.ts +8 -4
  96. package/progress-stepper-item/types.d.ts +35 -44
  97. package/radio/index.d.ts +8 -4
  98. package/radio/types.d.ts +16 -15
  99. package/radio-option/index.d.ts +8 -4
  100. package/radio-option/types.d.ts +35 -40
  101. package/rich-text/index.d.ts +8 -4
  102. package/rich-text/types.d.ts +31 -31
  103. package/rich-text/utils.js +1 -1
  104. package/rich-textarea/index.d.ts +8 -4
  105. package/rich-textarea/types.d.ts +37 -43
  106. package/segment/index.d.ts +8 -4
  107. package/segment/types.d.ts +18 -21
  108. package/segment-collapse/index.d.ts +8 -4
  109. package/segment-collapse/types.d.ts +15 -12
  110. package/segmented-control/index.d.ts +8 -4
  111. package/segmented-control/types.d.ts +11 -8
  112. package/segmented-control-option/index.d.ts +8 -4
  113. package/segmented-control-option/types.d.ts +32 -34
  114. package/segmented-icon-control/index.d.ts +8 -4
  115. package/segmented-icon-control/types.d.ts +11 -10
  116. package/segmented-icon-control-option/index.d.ts +8 -4
  117. package/segmented-icon-control-option/types.d.ts +28 -28
  118. package/select-button/index.d.ts +12 -4
  119. package/select-button/types.d.ts +38 -58
  120. package/select-menu/index.d.ts +8 -4
  121. package/select-menu/types.d.ts +18 -38
  122. package/select-menu-option/index.d.ts +8 -4
  123. package/select-menu-option/types.d.ts +27 -33
  124. package/select-menu-option/utils.d.ts +2 -2
  125. package/skeleton/index.d.ts +8 -4
  126. package/skeleton/types.d.ts +14 -13
  127. package/skeleton-item/index.d.ts +8 -4
  128. package/skeleton-item/types.d.ts +20 -19
  129. package/spinner/index.d.ts +8 -4
  130. package/spinner/types.d.ts +12 -13
  131. package/table/index.d.ts +7 -4
  132. package/table/types.d.ts +2 -2
  133. package/table-body/index.d.ts +7 -4
  134. package/table-body/types.d.ts +2 -2
  135. package/table-cell/index.d.ts +8 -4
  136. package/table-cell/types.d.ts +11 -10
  137. package/table-head/index.d.ts +7 -4
  138. package/table-head/types.d.ts +2 -2
  139. package/table-head-cell/index.d.ts +8 -4
  140. package/table-head-cell/types.d.ts +15 -18
  141. package/table-row/index.d.ts +8 -4
  142. package/table-row/types.d.ts +14 -15
  143. package/tabs/index.d.ts +8 -4
  144. package/tabs/types.d.ts +19 -16
  145. package/tabs-icon-option/index.d.ts +8 -4
  146. package/tabs-icon-option/types.d.ts +21 -26
  147. package/tabs-option/index.d.ts +8 -4
  148. package/tabs-option/types.d.ts +26 -35
  149. package/tag/index.d.ts +8 -4
  150. package/tag/types.d.ts +22 -35
  151. package/text/index.d.ts +8 -4
  152. package/text/types.d.ts +21 -34
  153. package/textarea/index.d.ts +8 -4
  154. package/textarea/types.d.ts +30 -56
  155. package/tile-control/index.d.ts +8 -4
  156. package/tile-control/types.d.ts +15 -27
  157. package/tile-control-option/index.d.ts +8 -4
  158. package/tile-control-option/types.d.ts +41 -55
  159. package/time-picker/index.d.ts +8 -4
  160. package/time-picker/types.d.ts +42 -47
  161. package/title/index.d.ts +8 -4
  162. package/title/types.d.ts +18 -31
  163. package/toast/index.d.ts +8 -4
  164. package/toast/types.d.ts +31 -39
  165. package/toast-manager/index.d.ts +8 -4
  166. package/toast-manager/types.d.ts +13 -10
  167. package/toggle/index.d.ts +8 -4
  168. package/toggle/types.d.ts +29 -34
  169. package/tooltip/index.d.ts +8 -4
  170. package/tooltip/types.d.ts +25 -39
  171. package/types.d.ts +20 -6
  172. package/utils/adapters.d.ts +30 -0
  173. package/utils/adapters.js +1 -0
  174. package/vertical-stepper/index.d.ts +8 -4
  175. package/vertical-stepper/types.d.ts +29 -30
  176. package/vertical-stepper-item/index.d.ts +8 -4
  177. package/vertical-stepper-item/types.d.ts +34 -43
package/button/types.d.ts CHANGED
@@ -1,37 +1,9 @@
1
- import type { TSinchElementReact } from '../types';
1
+ import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
2
2
  import type { TSinchSizeEx } from '../utils/size';
3
3
  export type TSinchButtonType = 'primary' | 'secondary'
4
4
  /** @deprecated */
5
5
  | 'tertiary' | 'subtle-primary' | 'subtle-secondary' | 'cta-primary' | 'cta-secondary' | 'destructive';
6
- export type TSinchButtonElement = HTMLElement & {
7
- /** Button Type */
8
- type: TSinchButtonType;
9
- /** Size, `m` by default */
10
- size: TSinchSizeEx;
11
- /** Text content */
12
- text: string;
13
- /** Disabled */
14
- disabled: boolean;
15
- /** Toggled (pressed) */
16
- toggled: boolean;
17
- /** Click event */
18
- addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
19
- /** Focus event */
20
- addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
21
- /** Blur event */
22
- addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
23
- /** Type, `primary` by default */
24
- setAttribute(attr: 'type', value: TSinchButtonType): void;
25
- /** Size, `m` by default */
26
- setAttribute(attr: 'size', value: TSinchSizeEx): void;
27
- /** Text content */
28
- setAttribute(attr: 'text', value: string): void;
29
- /** Disabled */
30
- setAttribute(attr: 'disabled', value: ''): void;
31
- /** Toggled (pressed) */
32
- setAttribute(attr: 'toggled', value: ''): void;
33
- };
34
- export type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
6
+ export type TSinchButtonProps = {
35
7
  /** Button Type */
36
8
  type?: TSinchButtonType;
37
9
  /** Size, `m` by default */
@@ -44,137 +16,145 @@ export type TSinchButtonReact = TSinchElementReact<TSinchButtonElement> & {
44
16
  disabled?: boolean;
45
17
  /** Toggled (pressed) */
46
18
  toggled?: boolean;
19
+ };
20
+ export type TSinchButtonEvents = {
47
21
  /** Click event handler */
48
- 'on-click'?: (e: CustomEvent<void>) => void;
22
+ '-click'?: (e: CustomEvent<void>) => void;
49
23
  /** Focus event handler */
50
- 'on-focus'?: (e: CustomEvent<void>) => void;
24
+ '-focus'?: (e: CustomEvent<void>) => void;
51
25
  /** Blur event handler */
52
- 'on-blur'?: (e: CustomEvent<void>) => void;
53
- } & {
54
- style?: {
55
- '--sinch-comp-button-shape-radius-size-xs'?: string;
56
- '--sinch-comp-button-shape-radius-size-s'?: string;
57
- '--sinch-comp-button-shape-radius-size-m'?: string;
58
- '--sinch-comp-button-shape-radius-size-l'?: string;
59
- '--sinch-comp-button-size-container-xs'?: string;
60
- '--sinch-comp-button-size-container-s'?: string;
61
- '--sinch-comp-button-size-container-m'?: string;
62
- '--sinch-comp-button-size-container-l'?: string;
63
- '--sinch-comp-button-size-icon-xs'?: string;
64
- '--sinch-comp-button-size-icon-s'?: string;
65
- '--sinch-comp-button-size-icon-m'?: string;
66
- '--sinch-comp-button-size-icon-l'?: string;
67
- '--sinch-comp-button-font-size-s-text'?: string;
68
- '--sinch-comp-button-font-size-m-text'?: string;
69
- '--sinch-comp-button-font-size-l-text'?: string;
70
- '--sinch-comp-button-color-primary-default-background-initial'?: string;
71
- '--sinch-comp-button-color-primary-default-background-hover'?: string;
72
- '--sinch-comp-button-color-primary-default-background-active'?: string;
73
- '--sinch-comp-button-color-primary-default-border-initial'?: string;
74
- '--sinch-comp-button-color-primary-default-text-initial'?: string;
75
- '--sinch-comp-button-color-primary-default-icon-initial'?: string;
76
- '--sinch-comp-button-color-primary-default-outline-focus'?: string;
77
- '--sinch-comp-button-color-primary-disabled-background-initial'?: string;
78
- '--sinch-comp-button-color-primary-disabled-border-initial'?: string;
79
- '--sinch-comp-button-color-primary-disabled-text-initial'?: string;
80
- '--sinch-comp-button-color-primary-disabled-icon-initial'?: string;
81
- '--sinch-comp-button-color-secondary-default-background-initial'?: string;
82
- '--sinch-comp-button-color-secondary-default-background-hover'?: string;
83
- '--sinch-comp-button-color-secondary-default-background-active'?: string;
84
- '--sinch-comp-button-color-secondary-default-border-initial'?: string;
85
- '--sinch-comp-button-color-secondary-default-text-initial'?: string;
86
- '--sinch-comp-button-color-secondary-default-icon-initial'?: string;
87
- '--sinch-comp-button-color-secondary-default-outline-focus'?: string;
88
- '--sinch-comp-button-color-secondary-disabled-background-initial'?: string;
89
- '--sinch-comp-button-color-secondary-disabled-border-initial'?: string;
90
- '--sinch-comp-button-color-secondary-disabled-text-initial'?: string;
91
- '--sinch-comp-button-color-secondary-disabled-icon-initial'?: string;
92
- '--sinch-comp-button-color-subtle-primary-default-background-initial'?: string;
93
- '--sinch-comp-button-color-subtle-primary-default-background-hover'?: string;
94
- '--sinch-comp-button-color-subtle-primary-default-background-active'?: string;
95
- '--sinch-comp-button-color-subtle-primary-default-border-initial'?: string;
96
- '--sinch-comp-button-color-subtle-primary-default-text-initial'?: string;
97
- '--sinch-comp-button-color-subtle-primary-default-icon-initial'?: string;
98
- '--sinch-comp-button-color-subtle-primary-default-outline-focus'?: string;
99
- '--sinch-comp-button-color-subtle-primary-disabled-background-initial'?: string;
100
- '--sinch-comp-button-color-subtle-primary-disabled-border-initial'?: string;
101
- '--sinch-comp-button-color-subtle-primary-disabled-text-initial'?: string;
102
- '--sinch-comp-button-color-subtle-primary-disabled-icon-initial'?: string;
103
- '--sinch-comp-button-color-subtle-primary-toggled-background-initial'?: string;
104
- '--sinch-comp-button-color-subtle-secondary-default-background-initial'?: string;
105
- '--sinch-comp-button-color-subtle-secondary-default-background-hover'?: string;
106
- '--sinch-comp-button-color-subtle-secondary-default-background-active'?: string;
107
- '--sinch-comp-button-color-subtle-secondary-default-border-initial'?: string;
108
- '--sinch-comp-button-color-subtle-secondary-default-text-initial'?: string;
109
- '--sinch-comp-button-color-subtle-secondary-default-icon-initial'?: string;
110
- '--sinch-comp-button-color-subtle-secondary-default-outline-focus'?: string;
111
- '--sinch-comp-button-color-subtle-secondary-disabled-background-initial'?: string;
112
- '--sinch-comp-button-color-subtle-secondary-disabled-border-initial'?: string;
113
- '--sinch-comp-button-color-subtle-secondary-disabled-text-initial'?: string;
114
- '--sinch-comp-button-color-subtle-secondary-disabled-icon-initial'?: string;
115
- '--sinch-comp-button-color-subtle-secondary-toggled-background-initial'?: string;
116
- '--sinch-comp-button-color-cta-primary-default-background-initial'?: string;
117
- '--sinch-comp-button-color-cta-primary-default-background-hover'?: string;
118
- '--sinch-comp-button-color-cta-primary-default-background-active'?: string;
119
- '--sinch-comp-button-color-cta-primary-default-border-initial'?: string;
120
- '--sinch-comp-button-color-cta-primary-default-text-initial'?: string;
121
- '--sinch-comp-button-color-cta-primary-default-icon-initial'?: string;
122
- '--sinch-comp-button-color-cta-primary-default-outline-focus'?: string;
123
- '--sinch-comp-button-color-cta-primary-disabled-background-initial'?: string;
124
- '--sinch-comp-button-color-cta-primary-disabled-border-initial'?: string;
125
- '--sinch-comp-button-color-cta-primary-disabled-text-initial'?: string;
126
- '--sinch-comp-button-color-cta-primary-disabled-icon-initial'?: string;
127
- '--sinch-comp-button-color-cta-secondary-default-background-initial'?: string;
128
- '--sinch-comp-button-color-cta-secondary-default-background-hover'?: string;
129
- '--sinch-comp-button-color-cta-secondary-default-background-active'?: string;
130
- '--sinch-comp-button-color-cta-secondary-default-border-initial'?: string;
131
- '--sinch-comp-button-color-cta-secondary-default-text-initial'?: string;
132
- '--sinch-comp-button-color-cta-secondary-default-icon-initial'?: string;
133
- '--sinch-comp-button-color-cta-secondary-default-outline-focus'?: string;
134
- '--sinch-comp-button-color-cta-secondary-disabled-background-initial'?: string;
135
- '--sinch-comp-button-color-cta-secondary-disabled-border-initial'?: string;
136
- '--sinch-comp-button-color-cta-secondary-disabled-text-initial'?: string;
137
- '--sinch-comp-button-color-cta-secondary-disabled-icon-initial'?: string;
138
- '--sinch-comp-button-color-danger-default-background-initial'?: string;
139
- '--sinch-comp-button-color-danger-default-background-hover'?: string;
140
- '--sinch-comp-button-color-danger-default-background-active'?: string;
141
- '--sinch-comp-button-color-danger-default-border-initial'?: string;
142
- '--sinch-comp-button-color-danger-default-text-initial'?: string;
143
- '--sinch-comp-button-color-danger-default-icon-initial'?: string;
144
- '--sinch-comp-button-color-danger-disabled-background-initial'?: string;
145
- '--sinch-comp-button-color-danger-disabled-border-initial'?: string;
146
- '--sinch-comp-button-color-danger-disabled-text-initial'?: string;
147
- '--sinch-comp-button-color-danger-disabled-icon-initial'?: string;
148
- '--sinch-comp-button-shadow-primary-initial'?: string;
149
- '--sinch-comp-button-shadow-primary-hover'?: string;
150
- '--sinch-comp-button-shadow-primary-active'?: string;
151
- '--sinch-comp-button-shadow-primary-focus'?: string;
152
- '--sinch-comp-button-shadow-primary-disabled'?: string;
153
- '--sinch-comp-button-shadow-secondary-initial'?: string;
154
- '--sinch-comp-button-shadow-secondary-hover'?: string;
155
- '--sinch-comp-button-shadow-secondary-focus'?: string;
156
- '--sinch-comp-button-shadow-secondary-disabled'?: string;
157
- '--sinch-comp-button-shadow-subtle-initial'?: string;
158
- '--sinch-comp-button-shadow-subtle-hover'?: string;
159
- '--sinch-comp-button-shadow-subtle-active'?: string;
160
- '--sinch-comp-button-shadow-subtle-focus'?: string;
161
- '--sinch-comp-button-shadow-subtle-disabled'?: string;
162
- '--sinch-comp-button-shadow-cta-primary-initial'?: string;
163
- '--sinch-comp-button-shadow-cta-primary-hover'?: string;
164
- '--sinch-comp-button-shadow-cta-primary-active'?: string;
165
- '--sinch-comp-button-shadow-cta-primary-focus'?: string;
166
- '--sinch-comp-button-shadow-cta-primary-disabled'?: string;
167
- '--sinch-comp-button-shadow-cta-secondary-initial'?: string;
168
- '--sinch-comp-button-shadow-cta-secondary-hover'?: string;
169
- '--sinch-comp-button-shadow-cta-secondary-active'?: string;
170
- '--sinch-comp-button-shadow-cta-secondary-focus'?: string;
171
- '--sinch-comp-button-shadow-cta-secondary-disabled'?: string;
172
- '--sinch-comp-button-shadow-danger-initial'?: string;
173
- '--sinch-comp-button-shadow-danger-hover'?: string;
174
- '--sinch-comp-button-shadow-danger-active'?: string;
175
- '--sinch-comp-button-shadow-danger-focus'?: string;
176
- '--sinch-global-color-text'?: string;
177
- '--sinch-global-color-icon'?: string;
178
- '--sinch-global-size-icon'?: string;
179
- };
26
+ '-blur'?: (e: CustomEvent<void>) => void;
27
+ };
28
+ export type TSinchButtonStyle = {
29
+ '--sinch-comp-button-shape-radius-size-xs'?: string;
30
+ '--sinch-comp-button-shape-radius-size-s'?: string;
31
+ '--sinch-comp-button-shape-radius-size-m'?: string;
32
+ '--sinch-comp-button-shape-radius-size-l'?: string;
33
+ '--sinch-comp-button-size-container-xs'?: string;
34
+ '--sinch-comp-button-size-container-s'?: string;
35
+ '--sinch-comp-button-size-container-m'?: string;
36
+ '--sinch-comp-button-size-container-l'?: string;
37
+ '--sinch-comp-button-size-icon-xs'?: string;
38
+ '--sinch-comp-button-size-icon-s'?: string;
39
+ '--sinch-comp-button-size-icon-m'?: string;
40
+ '--sinch-comp-button-size-icon-l'?: string;
41
+ '--sinch-comp-button-font-size-s-text'?: string;
42
+ '--sinch-comp-button-font-size-m-text'?: string;
43
+ '--sinch-comp-button-font-size-l-text'?: string;
44
+ '--sinch-comp-button-color-primary-default-background-initial'?: string;
45
+ '--sinch-comp-button-color-primary-default-background-hover'?: string;
46
+ '--sinch-comp-button-color-primary-default-background-active'?: string;
47
+ '--sinch-comp-button-color-primary-default-border-initial'?: string;
48
+ '--sinch-comp-button-color-primary-default-text-initial'?: string;
49
+ '--sinch-comp-button-color-primary-default-icon-initial'?: string;
50
+ '--sinch-comp-button-color-primary-default-outline-focus'?: string;
51
+ '--sinch-comp-button-color-primary-disabled-background-initial'?: string;
52
+ '--sinch-comp-button-color-primary-disabled-border-initial'?: string;
53
+ '--sinch-comp-button-color-primary-disabled-text-initial'?: string;
54
+ '--sinch-comp-button-color-primary-disabled-icon-initial'?: string;
55
+ '--sinch-comp-button-color-secondary-default-background-initial'?: string;
56
+ '--sinch-comp-button-color-secondary-default-background-hover'?: string;
57
+ '--sinch-comp-button-color-secondary-default-background-active'?: string;
58
+ '--sinch-comp-button-color-secondary-default-border-initial'?: string;
59
+ '--sinch-comp-button-color-secondary-default-text-initial'?: string;
60
+ '--sinch-comp-button-color-secondary-default-icon-initial'?: string;
61
+ '--sinch-comp-button-color-secondary-default-outline-focus'?: string;
62
+ '--sinch-comp-button-color-secondary-disabled-background-initial'?: string;
63
+ '--sinch-comp-button-color-secondary-disabled-border-initial'?: string;
64
+ '--sinch-comp-button-color-secondary-disabled-text-initial'?: string;
65
+ '--sinch-comp-button-color-secondary-disabled-icon-initial'?: string;
66
+ '--sinch-comp-button-color-subtle-primary-default-background-initial'?: string;
67
+ '--sinch-comp-button-color-subtle-primary-default-background-hover'?: string;
68
+ '--sinch-comp-button-color-subtle-primary-default-background-active'?: string;
69
+ '--sinch-comp-button-color-subtle-primary-default-border-initial'?: string;
70
+ '--sinch-comp-button-color-subtle-primary-default-text-initial'?: string;
71
+ '--sinch-comp-button-color-subtle-primary-default-icon-initial'?: string;
72
+ '--sinch-comp-button-color-subtle-primary-default-outline-focus'?: string;
73
+ '--sinch-comp-button-color-subtle-primary-disabled-background-initial'?: string;
74
+ '--sinch-comp-button-color-subtle-primary-disabled-border-initial'?: string;
75
+ '--sinch-comp-button-color-subtle-primary-disabled-text-initial'?: string;
76
+ '--sinch-comp-button-color-subtle-primary-disabled-icon-initial'?: string;
77
+ '--sinch-comp-button-color-subtle-primary-toggled-background-initial'?: string;
78
+ '--sinch-comp-button-color-subtle-secondary-default-background-initial'?: string;
79
+ '--sinch-comp-button-color-subtle-secondary-default-background-hover'?: string;
80
+ '--sinch-comp-button-color-subtle-secondary-default-background-active'?: string;
81
+ '--sinch-comp-button-color-subtle-secondary-default-border-initial'?: string;
82
+ '--sinch-comp-button-color-subtle-secondary-default-text-initial'?: string;
83
+ '--sinch-comp-button-color-subtle-secondary-default-icon-initial'?: string;
84
+ '--sinch-comp-button-color-subtle-secondary-default-outline-focus'?: string;
85
+ '--sinch-comp-button-color-subtle-secondary-disabled-background-initial'?: string;
86
+ '--sinch-comp-button-color-subtle-secondary-disabled-border-initial'?: string;
87
+ '--sinch-comp-button-color-subtle-secondary-disabled-text-initial'?: string;
88
+ '--sinch-comp-button-color-subtle-secondary-disabled-icon-initial'?: string;
89
+ '--sinch-comp-button-color-subtle-secondary-toggled-background-initial'?: string;
90
+ '--sinch-comp-button-color-cta-primary-default-background-initial'?: string;
91
+ '--sinch-comp-button-color-cta-primary-default-background-hover'?: string;
92
+ '--sinch-comp-button-color-cta-primary-default-background-active'?: string;
93
+ '--sinch-comp-button-color-cta-primary-default-border-initial'?: string;
94
+ '--sinch-comp-button-color-cta-primary-default-text-initial'?: string;
95
+ '--sinch-comp-button-color-cta-primary-default-icon-initial'?: string;
96
+ '--sinch-comp-button-color-cta-primary-default-outline-focus'?: string;
97
+ '--sinch-comp-button-color-cta-primary-disabled-background-initial'?: string;
98
+ '--sinch-comp-button-color-cta-primary-disabled-border-initial'?: string;
99
+ '--sinch-comp-button-color-cta-primary-disabled-text-initial'?: string;
100
+ '--sinch-comp-button-color-cta-primary-disabled-icon-initial'?: string;
101
+ '--sinch-comp-button-color-cta-secondary-default-background-initial'?: string;
102
+ '--sinch-comp-button-color-cta-secondary-default-background-hover'?: string;
103
+ '--sinch-comp-button-color-cta-secondary-default-background-active'?: string;
104
+ '--sinch-comp-button-color-cta-secondary-default-border-initial'?: string;
105
+ '--sinch-comp-button-color-cta-secondary-default-text-initial'?: string;
106
+ '--sinch-comp-button-color-cta-secondary-default-icon-initial'?: string;
107
+ '--sinch-comp-button-color-cta-secondary-default-outline-focus'?: string;
108
+ '--sinch-comp-button-color-cta-secondary-disabled-background-initial'?: string;
109
+ '--sinch-comp-button-color-cta-secondary-disabled-border-initial'?: string;
110
+ '--sinch-comp-button-color-cta-secondary-disabled-text-initial'?: string;
111
+ '--sinch-comp-button-color-cta-secondary-disabled-icon-initial'?: string;
112
+ '--sinch-comp-button-color-danger-default-background-initial'?: string;
113
+ '--sinch-comp-button-color-danger-default-background-hover'?: string;
114
+ '--sinch-comp-button-color-danger-default-background-active'?: string;
115
+ '--sinch-comp-button-color-danger-default-border-initial'?: string;
116
+ '--sinch-comp-button-color-danger-default-text-initial'?: string;
117
+ '--sinch-comp-button-color-danger-default-icon-initial'?: string;
118
+ '--sinch-comp-button-color-danger-disabled-background-initial'?: string;
119
+ '--sinch-comp-button-color-danger-disabled-border-initial'?: string;
120
+ '--sinch-comp-button-color-danger-disabled-text-initial'?: string;
121
+ '--sinch-comp-button-color-danger-disabled-icon-initial'?: string;
122
+ '--sinch-comp-button-shadow-primary-initial'?: string;
123
+ '--sinch-comp-button-shadow-primary-hover'?: string;
124
+ '--sinch-comp-button-shadow-primary-active'?: string;
125
+ '--sinch-comp-button-shadow-primary-focus'?: string;
126
+ '--sinch-comp-button-shadow-primary-disabled'?: string;
127
+ '--sinch-comp-button-shadow-secondary-initial'?: string;
128
+ '--sinch-comp-button-shadow-secondary-hover'?: string;
129
+ '--sinch-comp-button-shadow-secondary-focus'?: string;
130
+ '--sinch-comp-button-shadow-secondary-disabled'?: string;
131
+ '--sinch-comp-button-shadow-subtle-initial'?: string;
132
+ '--sinch-comp-button-shadow-subtle-hover'?: string;
133
+ '--sinch-comp-button-shadow-subtle-active'?: string;
134
+ '--sinch-comp-button-shadow-subtle-focus'?: string;
135
+ '--sinch-comp-button-shadow-subtle-disabled'?: string;
136
+ '--sinch-comp-button-shadow-cta-primary-initial'?: string;
137
+ '--sinch-comp-button-shadow-cta-primary-hover'?: string;
138
+ '--sinch-comp-button-shadow-cta-primary-active'?: string;
139
+ '--sinch-comp-button-shadow-cta-primary-focus'?: string;
140
+ '--sinch-comp-button-shadow-cta-primary-disabled'?: string;
141
+ '--sinch-comp-button-shadow-cta-secondary-initial'?: string;
142
+ '--sinch-comp-button-shadow-cta-secondary-hover'?: string;
143
+ '--sinch-comp-button-shadow-cta-secondary-active'?: string;
144
+ '--sinch-comp-button-shadow-cta-secondary-focus'?: string;
145
+ '--sinch-comp-button-shadow-cta-secondary-disabled'?: string;
146
+ '--sinch-comp-button-shadow-danger-initial'?: string;
147
+ '--sinch-comp-button-shadow-danger-hover'?: string;
148
+ '--sinch-comp-button-shadow-danger-active'?: string;
149
+ '--sinch-comp-button-shadow-danger-focus'?: string;
150
+ '--sinch-global-color-text'?: string;
151
+ '--sinch-global-color-icon'?: string;
152
+ '--sinch-global-size-icon'?: string;
153
+ };
154
+ export type TSinchButton = {
155
+ props: TSinchButtonProps;
156
+ events: TSinchButtonEvents;
157
+ style: TSinchButtonStyle;
180
158
  };
159
+ export type TSinchButtonElement = NectaryComponentVanillaByType<TSinchButton>;
160
+ export type TSinchButtonReact = NectaryComponentReactByType<TSinchButton>;
package/button-group/index.d.ts CHANGED
@@ -1,18 +1,22 @@
1
- import type { TSinchButtonGroupElement, TSinchButtonGroupReact } from './types';
1
+ import type { TSinchButtonGroup } from './types';
2
+ import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
3
  declare global {
4
+ interface NectaryComponentMap {
5
+ 'sinch-button-group': TSinchButtonGroup;
6
+ }
3
7
  interface HTMLElementTagNameMap {
4
- 'sinch-button-group': TSinchButtonGroupElement;
8
+ 'sinch-button-group': NectaryComponentVanilla<'sinch-button-group'>;
5
9
  }
6
10
  namespace JSX {
7
11
  interface IntrinsicElements {
8
- 'sinch-button-group': TSinchButtonGroupReact;
12
+ 'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
9
13
  }
10
14
  }
11
15
  }
12
16
  declare module 'react' {
13
17
  namespace JSX {
14
18
  interface IntrinsicElements {
15
- 'sinch-button-group': TSinchButtonGroupReact;
19
+ 'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
16
20
  }
17
21
  }
18
22
  }
package/button-group/types.d.ts CHANGED
@@ -1,12 +1,13 @@
1
- import type { TSinchButtonElement, TSinchButtonReact } from '../button/types';
2
- import type { TSinchElementReact } from '../types';
1
+ import type { TSinchButtonProps, TSinchButtonReact } from '../button/types';
2
+ import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
3
3
  export { TSinchButtonReact };
4
- export type TSinchButtonGroupElement = HTMLElement & {
5
- size: TSinchButtonElement['size'];
6
- type: TSinchButtonElement['type'];
4
+ export type TSinchButtonGroupProps = {
5
+ size?: TSinchButtonProps['size'];
6
+ type?: TSinchButtonProps['type'];
7
+ 'aria-label': TSinchButtonProps['aria-label'];
7
8
  };
8
- export type TSinchButtonGroupReact = TSinchElementReact<TSinchButtonGroupElement> & {
9
- size?: TSinchButtonReact['size'];
10
- type?: TSinchButtonReact['type'];
11
- 'aria-label': TSinchButtonReact['aria-label'];
9
+ export type TSinchButtonGroup = {
10
+ props: TSinchButtonGroupProps;
12
11
  };
12
+ export type TSinchButtonGroupElement = NectaryComponentVanillaByType<TSinchButtonGroup>;
13
+ export type TSinchButtonGroupReact = NectaryComponentReactByType<TSinchButtonGroup>;
package/button-group-item/index.d.ts CHANGED
@@ -1,18 +1,22 @@
1
- import type { TSinchButtonGroupItemElement, TSinchButtonGroupItemReact } from './types';
1
+ import type { TSinchButtonGroupItem } from './types';
2
+ import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
3
  declare global {
4
+ interface NectaryComponentMap {
5
+ 'sinch-button-group-item': TSinchButtonGroupItem;
6
+ }
3
7
  interface HTMLElementTagNameMap {
4
- 'sinch-button-group-item': TSinchButtonGroupItemElement;
8
+ 'sinch-button-group-item': NectaryComponentVanilla<'sinch-button-group-item'>;
5
9
  }
6
10
  namespace JSX {
7
11
  interface IntrinsicElements {
8
- 'sinch-button-group-item': TSinchButtonGroupItemReact;
12
+ 'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
9
13
  }
10
14
  }
11
15
  }
12
16
  declare module 'react' {
13
17
  namespace JSX {
14
18
  interface IntrinsicElements {
15
- 'sinch-button-group-item': TSinchButtonGroupItemReact;
19
+ 'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
16
20
  }
17
21
  }
18
22
  }
package/button-group-item/types.d.ts CHANGED
@@ -1,45 +1,45 @@
1
- import type { TSinchButtonElement, TSinchButtonReact } from '../button/types';
2
- import type { TSinchElementReact } from '../types';
1
+ import type { TSinchButtonEvents, TSinchButtonProps, TSinchButtonReact } from '../button/types';
2
+ import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
3
3
  export type { TSinchButtonReact };
4
- export type TSinchButtonGroupItemElement = HTMLElement & {
5
- text: TSinchButtonElement['text'];
6
- disabled: TSinchButtonElement['disabled'];
7
- toggled: TSinchButtonElement['toggled'];
8
- addEventListener: TSinchButtonElement['addEventListener'];
9
- setAttribute: TSinchButtonElement['setAttribute'];
4
+ export type TSinchButtonGroupItemProps = {
5
+ text?: TSinchButtonProps['text'];
6
+ disabled?: TSinchButtonProps['disabled'];
7
+ toggled?: TSinchButtonProps['toggled'];
10
8
  };
11
- export type TSinchButtonGroupItemReact = TSinchElementReact<TSinchButtonGroupItemElement> & {
12
- text?: TSinchButtonReact['text'];
13
- disabled?: TSinchButtonReact['disabled'];
14
- toggled?: TSinchButtonReact['toggled'];
15
- 'on-blur'?: TSinchButtonReact['on-blur'];
16
- 'on-click'?: TSinchButtonReact['on-click'];
17
- 'on-focus'?: TSinchButtonReact['on-focus'];
18
- 'aria-label': TSinchButtonReact['aria-label'];
19
- } & {
20
- style?: {
21
- '--sinch-comp-button-shape-radius-size-xs'?: string;
22
- '--sinch-comp-button-shape-radius-size-s'?: string;
23
- '--sinch-comp-button-shape-radius-size-m'?: string;
24
- '--sinch-comp-button-shape-radius-size-l'?: string;
25
- '--sinch-button-border'?: string;
26
- '--sinch-button-border-top'?: string;
27
- '--sinch-button-border-bottom'?: string;
28
- '--sinch-button-border-left'?: string;
29
- '--sinch-button-border-right'?: string;
30
- '--sinch-button-shape-radius-base'?: string;
31
- '--sinch-button-shape-radius-top-right'?: string;
32
- '--sinch-button-shape-radius-top-left'?: string;
33
- '--sinch-button-shape-radius-bottom-right'?: string;
34
- '--sinch-button-shape-radius-bottom-left'?: string;
35
- '--sinch-button-set-size-shape-radius'?: string;
36
- '--sinch-local-divider-color'?: string;
37
- '--sinch-comp-button-color-primary-default-text-initial'?: string;
38
- '--sinch-comp-button-color-secondary-default-text-initial'?: string;
39
- '--sinch-comp-button-color-subtle-primary-default-text-initial'?: string;
40
- '--sinch-comp-button-color-subtle-secondary-default-text-initial'?: string;
41
- '--sinch-comp-button-color-cta-primary-default-text-initial'?: string;
42
- '--sinch-comp-button-color-cta-secondary-default-text-initial'?: string;
43
- '--sinch-comp-button-color-danger-default-text-initial'?: string;
44
- };
9
+ export type TSinchButtonGroupItemEvents = {
10
+ '-blur'?: TSinchButtonEvents['-blur'];
11
+ '-click'?: TSinchButtonEvents['-click'];
12
+ '-focus'?: TSinchButtonEvents['-focus'];
45
13
  };
14
+ export type TSinchButtonGroupItemStyle = {
15
+ '--sinch-comp-button-shape-radius-size-xs'?: string;
16
+ '--sinch-comp-button-shape-radius-size-s'?: string;
17
+ '--sinch-comp-button-shape-radius-size-m'?: string;
18
+ '--sinch-comp-button-shape-radius-size-l'?: string;
19
+ '--sinch-button-border'?: string;
20
+ '--sinch-button-border-top'?: string;
21
+ '--sinch-button-border-bottom'?: string;
22
+ '--sinch-button-border-left'?: string;
23
+ '--sinch-button-border-right'?: string;
24
+ '--sinch-button-shape-radius-base'?: string;
25
+ '--sinch-button-shape-radius-top-right'?: string;
26
+ '--sinch-button-shape-radius-top-left'?: string;
27
+ '--sinch-button-shape-radius-bottom-right'?: string;
28
+ '--sinch-button-shape-radius-bottom-left'?: string;
29
+ '--sinch-button-set-size-shape-radius'?: string;
30
+ '--sinch-local-divider-color'?: string;
31
+ '--sinch-comp-button-color-primary-default-text-initial'?: string;
32
+ '--sinch-comp-button-color-secondary-default-text-initial'?: string;
33
+ '--sinch-comp-button-color-subtle-primary-default-text-initial'?: string;
34
+ '--sinch-comp-button-color-subtle-secondary-default-text-initial'?: string;
35
+ '--sinch-comp-button-color-cta-primary-default-text-initial'?: string;
36
+ '--sinch-comp-button-color-cta-secondary-default-text-initial'?: string;
37
+ '--sinch-comp-button-color-danger-default-text-initial'?: string;
38
+ };
39
+ export type TSinchButtonGroupItem = {
40
+ props: TSinchButtonGroupItemProps;
41
+ events: TSinchButtonGroupItemEvents;
42
+ style: TSinchButtonGroupItemStyle;
43
+ };
44
+ export type TSinchButtonGroupItemElement = NectaryComponentVanillaByType<TSinchButtonGroupItem>;
45
+ export type TSinchButtonGroupItemReact = NectaryComponentReactByType<TSinchButtonGroupItem>;
package/card/index.d.ts CHANGED
@@ -1,20 +1,24 @@
1
1
  import '../title';
2
2
  import '../text';
3
- import type { TSinchCardElement, TSinchCardReact } from './types';
3
+ import type { TSinchCard } from './types';
4
+ import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
4
5
  declare global {
6
+ interface NectaryComponentMap {
7
+ 'sinch-card': TSinchCard;
8
+ }
5
9
  interface HTMLElementTagNameMap {
6
- 'sinch-card': TSinchCardElement;
10
+ 'sinch-card': NectaryComponentVanilla<'sinch-card'>;
7
11
  }
8
12
  namespace JSX {
9
13
  interface IntrinsicElements {
10
- 'sinch-card': TSinchCardReact;
14
+ 'sinch-card': NectaryComponentReact<'sinch-card'>;
11
15
  }
12
16
  }
13
17
  }
14
18
  declare module 'react' {
15
19
  namespace JSX {
16
20
  interface IntrinsicElements {
17
- 'sinch-card': TSinchCardReact;
21
+ 'sinch-card': NectaryComponentReact<'sinch-card'>;
18
22
  }
19
23
  }
20
24
  }
package/card/types.d.ts CHANGED
@@ -1,22 +1,5 @@
1
- import type { TRect, TSinchElementReact } from '../types';
2
- export type TSinchCardElement = HTMLElement & {
3
- /** Text */
4
- text: string;
5
- /** Caption */
6
- caption: string;
7
- /** Label */
8
- label: string | null;
9
- readonly dragRect: TRect | null;
10
- /** Text */
11
- setAttribute(name: 'text', value: string): void;
12
- /** Caption */
13
- setAttribute(name: 'caption', value: string): void;
14
- /** Label */
15
- setAttribute(name: 'label', value: string): void;
16
- /** Draggable */
17
- setAttribute(name: 'draggable', value: ''): void;
18
- };
19
- export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
1
+ import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
2
+ export type TSinchCardProps = {
20
3
  /** Text */
21
4
  text: string;
22
5
  /** Caption */
@@ -25,4 +8,10 @@ export type TSinchCardReact = TSinchElementReact<TSinchCardElement> & {
25
8
  label?: string;
26
9
  /** Draggable */
27
10
  draggable?: boolean;
11
+ readonly dragRect?: TRect | null;
12
+ };
13
+ export type TSinchCard = {
14
+ props: TSinchCardProps;
28
15
  };
16
+ export type TSinchCardElement = NectaryComponentVanillaByType<TSinchCard>;
17
+ export type TSinchCardReact = NectaryComponentReactByType<TSinchCard>;
package/card-container/index.d.ts CHANGED
@@ -1,18 +1,21 @@
1
- import type { TSinchCardContainerElement, TSinchCardContainerReact } from './types';
1
+ import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
2
  declare global {
3
+ interface NectaryComponentMap {
4
+ 'sinch-card-container': {};
5
+ }
3
6
  interface HTMLElementTagNameMap {
4
- 'sinch-card-container': TSinchCardContainerElement;
7
+ 'sinch-card-container': NectaryComponentVanilla<'sinch-card-container'>;
5
8
  }
6
9
  namespace JSX {
7
10
  interface IntrinsicElements {
8
- 'sinch-card-container': TSinchCardContainerReact;
11
+ 'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
9
12
  }
10
13
  }
11
14
  }
12
15
  declare module 'react' {
13
16
  namespace JSX {
14
17
  interface IntrinsicElements {
15
- 'sinch-card-container': TSinchCardContainerReact;
18
+ 'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
16
19
  }
17
20
  }
18
21
  }
package/card-container/types.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import type { TSinchElementReact } from '../types';
1
+ import type { NectaryComponentReactByType } from '../types';
2
2
  export type TSinchCardContainerElement = HTMLElement;
3
- export type TSinchCardContainerReact = TSinchElementReact<TSinchCardContainerElement>;
3
+ export type TSinchCardContainerReact = NectaryComponentReactByType<TSinchCardContainerElement>;
package/card-v2/index.d.ts CHANGED
@@ -1,18 +1,22 @@
1
- import type { TSinchCardV2Element, TSinchCardV2React } from './types';
1
+ import type { TSinchCardV2 } from './types';
2
+ import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
3
  declare global {
4
+ interface NectaryComponentMap {
5
+ 'sinch-card-v2': TSinchCardV2;
6
+ }
3
7
  interface HTMLElementTagNameMap {
4
- 'sinch-card-v2': TSinchCardV2Element;
8
+ 'sinch-card-v2': NectaryComponentVanilla<'sinch-card-v2'>;
5
9
  }
6
10
  namespace JSX {
7
11
  interface IntrinsicElements {
8
- 'sinch-card-v2': TSinchCardV2React;
12
+ 'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
9
13
  }
10
14
  }
11
15
  }
12
16
  declare module 'react' {
13
17
  namespace JSX {
14
18
  interface IntrinsicElements {
15
- 'sinch-card-v2': TSinchCardV2React;
19
+ 'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
16
20
  }
17
21
  }
18
22
  }