@nectary/components 4.6.4 → 4.6.6

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 (67) hide show
  1. package/accordion-item/types.d.ts +23 -0
  2. package/action-menu-option/types.d.ts +17 -0
  3. package/alert/types.d.ts +16 -0
  4. package/avatar/types.d.ts +18 -0
  5. package/badge/types.d.ts +9 -0
  6. package/button/types.d.ts +127 -0
  7. package/button-group-item/types.d.ts +26 -0
  8. package/checkbox/types.d.ts +32 -0
  9. package/chip/types.d.ts +17 -0
  10. package/code-tag/types.d.ts +9 -0
  11. package/color-menu-option/types.d.ts +8 -0
  12. package/color-swatch/types.d.ts +8 -0
  13. package/date-picker/types.d.ts +31 -0
  14. package/dialog/types.d.ts +17 -0
  15. package/emoji/types.d.ts +5 -0
  16. package/emoji-picker/types.d.ts +9 -0
  17. package/field/types.d.ts +14 -0
  18. package/file-drop/types.d.ts +21 -0
  19. package/file-status/types.d.ts +21 -0
  20. package/flag/types.d.ts +4 -0
  21. package/grid/types.d.ts +16 -1
  22. package/help-tooltip/types.d.ts +5 -1
  23. package/horizontal-stepper/types.d.ts +30 -0
  24. package/horizontal-stepper-item/types.d.ts +23 -0
  25. package/icon/types.d.ts +7 -0
  26. package/inline-alert/types.d.ts +22 -0
  27. package/input/types.d.ts +27 -0
  28. package/link/types.d.ts +18 -0
  29. package/list-item/types.d.ts +7 -1
  30. package/package.json +4 -1
  31. package/pagination/types.d.ts +16 -0
  32. package/persistent-overlay/types.d.ts +4 -0
  33. package/popover/index.js +16 -1
  34. package/popover/types.d.ts +7 -0
  35. package/progress/types.d.ts +6 -0
  36. package/progress-stepper-item/types.d.ts +28 -0
  37. package/radio-option/types.d.ts +28 -0
  38. package/rich-text/types.d.ts +20 -0
  39. package/rich-textarea/types.d.ts +20 -0
  40. package/segment/types.d.ts +10 -0
  41. package/segment-collapse/types.d.ts +4 -0
  42. package/segmented-control-option/types.d.ts +20 -0
  43. package/segmented-icon-control-option/types.d.ts +16 -0
  44. package/select-button/types.d.ts +25 -0
  45. package/select-menu/types.d.ts +6 -0
  46. package/select-menu-option/types.d.ts +16 -0
  47. package/skeleton/types.d.ts +7 -0
  48. package/skeleton-item/types.d.ts +13 -0
  49. package/spinner/types.d.ts +5 -0
  50. package/table-cell/types.d.ts +4 -0
  51. package/table-head-cell/types.d.ts +8 -0
  52. package/table-row/types.d.ts +7 -0
  53. package/tabs/types.d.ts +4 -0
  54. package/tabs-icon-option/types.d.ts +14 -0
  55. package/tabs-option/types.d.ts +19 -0
  56. package/tag/types.d.ts +15 -0
  57. package/text/types.d.ts +14 -0
  58. package/textarea/types.d.ts +14 -0
  59. package/tile-control/types.d.ts +4 -0
  60. package/tile-control-option/types.d.ts +29 -0
  61. package/time-picker/types.d.ts +23 -0
  62. package/title/types.d.ts +11 -0
  63. package/toast/types.d.ts +20 -0
  64. package/toggle/types.d.ts +18 -0
  65. package/tooltip/types.d.ts +11 -0
  66. package/vertical-stepper/types.d.ts +22 -0
  67. package/vertical-stepper-item/types.d.ts +27 -0
@@ -22,4 +22,23 @@ export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement>
22
22
  'aria-label': string;
23
23
  /** Disabled */
24
24
  disabled?: boolean;
25
+ } & {
26
+ style?: {
27
+ '--sinch-comp-tab-font-label'?: string;
28
+ '--sinch-comp-tab-size-icon'?: string;
29
+ '--sinch-comp-tab-shape-radius'?: string;
30
+ '--sinch-comp-tab-color-default-background-initial'?: string;
31
+ '--sinch-comp-tab-color-default-background-hover'?: string;
32
+ '--sinch-comp-tab-color-default-text-initial'?: string;
33
+ '--sinch-comp-tab-color-default-icon-initial'?: string;
34
+ '--sinch-comp-tab-color-default-outline-focus'?: string;
35
+ '--sinch-comp-tab-color-checked-text-initial'?: string;
36
+ '--sinch-comp-tab-color-checked-icon-initial'?: string;
37
+ '--sinch-comp-tab-color-checked-border-initial'?: string;
38
+ '--sinch-comp-tab-color-disabled-text-initial'?: string;
39
+ '--sinch-comp-tab-color-disabled-icon-initial'?: string;
40
+ '--sinch-global-color-text'?: string;
41
+ '--sinch-global-color-icon'?: string;
42
+ '--sinch-global-size-icon'?: string;
43
+ };
25
44
  };
package/tag/types.d.ts CHANGED
@@ -20,4 +20,19 @@ export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
20
20
  color?: string;
21
21
  /** Small */
22
22
  small?: boolean;
23
+ } & {
24
+ style?: {
25
+ '--sinch-comp-tag-size-container-m'?: string;
26
+ '--sinch-comp-tag-size-container-s'?: string;
27
+ '--sinch-comp-tag-size-icon-m'?: string;
28
+ '--sinch-comp-tag-size-icon-s'?: string;
29
+ '--sinch-comp-tag-shape-radius'?: string;
30
+ '--sinch-comp-tag-font-size-m-label'?: string;
31
+ '--sinch-comp-tag-font-size-s-label'?: string;
32
+ '--sinch-comp-tag-color-default-background'?: string;
33
+ '--sinch-comp-tag-color-default-foreground'?: string;
34
+ '--sinch-global-color-text'?: string;
35
+ '--sinch-global-color-icon'?: string;
36
+ '--sinch-global-size-icon'?: string;
37
+ };
23
38
  };
package/text/types.d.ts CHANGED
@@ -27,4 +27,18 @@ export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
27
27
  emphasized?: boolean;
28
28
  /** Cuts the long text with “…” ellipsis */
29
29
  ellipsis?: boolean;
30
+ } & {
31
+ style?: {
32
+ '--sinch-comp-text-align'?: string;
33
+ '--sinch-comp-text-font'?: string;
34
+ '--sinch-sys-font-body-m'?: string;
35
+ '--sinch-sys-font-body-s'?: string;
36
+ '--sinch-sys-font-body-xs'?: string;
37
+ '--sinch-sys-font-body-xxs'?: string;
38
+ '--sinch-sys-font-body-emphasize'?: string;
39
+ '--sinch-sys-font-body-emphasize-s'?: string;
40
+ '--sinch-global-color-text'?: string;
41
+ '--sinch-sys-color-text-default'?: string;
42
+ '--sinch-global-text-white-space'?: string;
43
+ };
30
44
  };
@@ -57,4 +57,18 @@ export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
57
57
  'on-focus'?: (e: CustomEvent<void>) => void;
58
58
  /** Blur handler */
59
59
  'on-blur'?: (e: CustomEvent<void>) => void;
60
+ } & {
61
+ style?: {
62
+ '--sinch-comp-textarea-shape-radius'?: string;
63
+ '--sinch-comp-textarea-font-input'?: string;
64
+ '--sinch-comp-textarea-size-resize-handle'?: string;
65
+ '--sinch-comp-textarea-color-default-background-initial'?: string;
66
+ '--sinch-comp-textarea-color-default-text-initial'?: string;
67
+ '--sinch-comp-textarea-color-default-text-placeholder'?: string;
68
+ '--sinch-comp-textarea-color-default-border-initial'?: string;
69
+ '--sinch-comp-textarea-color-default-border-focus'?: string;
70
+ '--sinch-comp-textarea-color-invalid-border-initial'?: string;
71
+ '--sinch-comp-textarea-color-disabled-text-initial'?: string;
72
+ '--sinch-comp-textarea-color-disabled-border-initial'?: string;
73
+ };
60
74
  };
@@ -34,4 +34,8 @@ export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement
34
34
  'aria-label': string;
35
35
  /** Change value handler */
36
36
  'on-change'?: (e: CustomEvent<string>) => void;
37
+ } & {
38
+ style?: {
39
+ '--sinch-grid-num-columns'?: string;
40
+ };
37
41
  };
@@ -34,4 +34,33 @@ export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlO
34
34
  'on-focus'?: (e: CustomEvent<void>) => void;
35
35
  /** Blur handler */
36
36
  'on-blur'?: (e: CustomEvent<void>) => void;
37
+ } & {
38
+ style?: {
39
+ '--sinch-comp-tile-control-shape-radius-l'?: string;
40
+ '--sinch-comp-tile-control-shape-radius-s'?: string;
41
+ '--sinch-comp-tile-control-font-label'?: string;
42
+ '--sinch-comp-tile-control-size-m-icon'?: string;
43
+ '--sinch-comp-tile-control-size-s-icon'?: string;
44
+ '--sinch-comp-tile-control-color-default-background-initial'?: string;
45
+ '--sinch-comp-tile-control-color-default-border-initial'?: string;
46
+ '--sinch-comp-tile-control-color-default-text-initial'?: string;
47
+ '--sinch-comp-tile-control-color-default-icon-initial'?: string;
48
+ '--sinch-comp-tile-control-color-default-background-hover'?: string;
49
+ '--sinch-comp-tile-control-color-default-border-hover'?: string;
50
+ '--sinch-comp-tile-control-color-default-outline-focus'?: string;
51
+ '--sinch-comp-tile-control-color-checked-background-initial'?: string;
52
+ '--sinch-comp-tile-control-color-checked-border-initial'?: string;
53
+ '--sinch-comp-tile-control-color-checked-text-initial'?: string;
54
+ '--sinch-comp-tile-control-color-checked-icon-initial'?: string;
55
+ '--sinch-comp-tile-control-color-disabled-background-initial'?: string;
56
+ '--sinch-comp-tile-control-color-disabled-border-initial'?: string;
57
+ '--sinch-comp-tile-control-color-disabled-text-initial'?: string;
58
+ '--sinch-comp-tile-control-color-disabled-icon-initial'?: string;
59
+ '--sinch-comp-tile-control-shadow-initial'?: string;
60
+ '--sinch-comp-tile-control-shadow-hover'?: string;
61
+ '--sinch-comp-tile-control-shadow-active'?: string;
62
+ '--sinch-comp-tile-control-shadow-disabled'?: string;
63
+ '--sinch-global-size-icon'?: string;
64
+ '--sinch-global-color-icon'?: string;
65
+ };
37
66
  };
@@ -31,4 +31,27 @@ export type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement>
31
31
  'submit-aria-label': string;
32
32
  /** Change value handler, return time in ISO 8601 format */
33
33
  'on-change'?: (e: CustomEvent<string>) => void;
34
+ } & {
35
+ style?: {
36
+ '--sinch-comp-time-picker-header-font'?: string;
37
+ '--sinch-comp-time-picker-digit-font-default-h12'?: string;
38
+ '--sinch-comp-time-picker-digit-font-checked-h12'?: string;
39
+ '--sinch-comp-time-picker-digit-font-default-h24'?: string;
40
+ '--sinch-comp-time-picker-digit-font-checked-h24'?: string;
41
+ '--sinch-comp-time-picker-digit-font-default-minutes'?: string;
42
+ '--sinch-comp-time-picker-digit-font-checked-minutes'?: string;
43
+ '--sinch-comp-time-picker-header-color-default-text-initial'?: string;
44
+ '--sinch-comp-time-picker-header-color-default-icon-initial'?: string;
45
+ '--sinch-comp-time-picker-watch-face-color-default-border-initial'?: string;
46
+ '--sinch-comp-time-picker-watch-face-color-default-background-initial'?: string;
47
+ '--sinch-comp-time-picker-digit-color-default-h12-initial'?: string;
48
+ '--sinch-comp-time-picker-digit-color-checked-h12-default'?: string;
49
+ '--sinch-comp-time-picker-digit-color-default-h24-initial'?: string;
50
+ '--sinch-comp-time-picker-digit-color-checked-h24-initial'?: string;
51
+ '--sinch-comp-time-picker-digit-color-default-minute-initial'?: string;
52
+ '--sinch-comp-time-picker-digit-color-checked-minute-initial'?: string;
53
+ '--sinch-comp-time-picker-needle-color-default-background-initial'?: string;
54
+ '--sinch-comp-time-picker-needle-color-default-background-focus'?: string;
55
+ '--sinch-global-color-icon'?: string;
56
+ };
34
57
  };
package/title/types.d.ts CHANGED
@@ -28,4 +28,15 @@ export type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
28
28
  level: TSinchTitleLevel;
29
29
  /** Cuts the long title with “…” ellipsis */
30
30
  ellipsis?: boolean;
31
+ } & {
32
+ style?: {
33
+ '--sinch-comp-title-font'?: string;
34
+ '--sinch-sys-font-desktop-title-xl'?: string;
35
+ '--sinch-sys-font-desktop-title-l'?: string;
36
+ '--sinch-sys-font-desktop-title-m'?: string;
37
+ '--sinch-sys-font-desktop-title-s'?: string;
38
+ '--sinch-sys-font-desktop-title-xs'?: string;
39
+ '--sinch-global-color-text'?: string;
40
+ '--sinch-sys-color-text-default'?: string;
41
+ };
31
42
  };
package/toast/types.d.ts CHANGED
@@ -25,4 +25,24 @@ export type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
25
25
  persistent?: boolean;
26
26
  /** Timeout handler */
27
27
  'on-timeout'?: (e: CustomEvent<void>) => void;
28
+ } & {
29
+ style?: {
30
+ '--sinch-comp-toast-shape-radius'?: string;
31
+ '--sinch-comp-toast-font-body'?: string;
32
+ '--sinch-comp-toast-shadow'?: string;
33
+ '--sinch-comp-toast-color-success-default-background'?: string;
34
+ '--sinch-comp-toast-color-success-default-text'?: string;
35
+ '--sinch-comp-toast-color-success-default-icon'?: string;
36
+ '--sinch-comp-toast-color-warning-default-background'?: string;
37
+ '--sinch-comp-toast-color-warning-default-text'?: string;
38
+ '--sinch-comp-toast-color-warning-default-icon'?: string;
39
+ '--sinch-comp-toast-color-error-default-background'?: string;
40
+ '--sinch-comp-toast-color-error-default-text'?: string;
41
+ '--sinch-comp-toast-color-error-default-icon'?: string;
42
+ '--sinch-comp-toast-color-info-default-background'?: string;
43
+ '--sinch-comp-toast-color-info-default-text'?: string;
44
+ '--sinch-comp-toast-color-info-default-icon'?: string;
45
+ '--sinch-global-color-text'?: string;
46
+ '--sinch-global-color-icon'?: string;
47
+ };
28
48
  };
package/toggle/types.d.ts CHANGED
@@ -20,4 +20,22 @@ export type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
20
20
  text?: string;
21
21
  'aria-label': string;
22
22
  'on-change'?: (e: CustomEvent<boolean>) => void;
23
+ } & {
24
+ style?: {
25
+ '--sinch-local-size'?: string;
26
+ '--sinch-comp-toggle-color-default-background-initial'?: string;
27
+ '--sinch-comp-toggle-color-default-knob-background-initial'?: string;
28
+ '--sinch-comp-toggle-color-default-text-inside-initial'?: string;
29
+ '--sinch-comp-toggle-color-default-outline-focus'?: string;
30
+ '--sinch-comp-toggle-color-default-label-initial'?: string;
31
+ '--sinch-comp-toggle-color-checked-background-initial'?: string;
32
+ '--sinch-comp-toggle-color-disabled-background-initial'?: string;
33
+ '--sinch-comp-toggle-color-disabled-label-initial'?: string;
34
+ '--sinch-comp-toggle-color-checked-disabled-background-initial'?: string;
35
+ '--sinch-comp-toggle-shadow-knob-default'?: string;
36
+ '--sinch-comp-toggle-shadow-knob-disabled'?: string;
37
+ '--sinch-comp-toggle-font-size-m-inside-text'?: string;
38
+ '--sinch-comp-toggle-font-size-m-label'?: string;
39
+ '--sinch-comp-toggle-font-size-s-label'?: string;
40
+ };
23
41
  };
@@ -39,4 +39,15 @@ export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
39
39
  'on-show'?: (e: CustomEvent<void>) => void;
40
40
  /** Hide event handler */
41
41
  'on-hide'?: (e: CustomEvent<void>) => void;
42
+ } & {
43
+ style?: {
44
+ '--sinch-comp-tooltip-shadow'?: string;
45
+ '--sinch-comp-tooltip-shape-radius'?: string;
46
+ '--sinch-comp-tooltip-color-background'?: string;
47
+ '--sinch-comp-tooltip-color-text'?: string;
48
+ '--sinch-local-color-background'?: string;
49
+ '--sinch-comp-tooltip-font-body'?: string;
50
+ '--sinch-comp-text-align'?: string;
51
+ '--sinch-global-color-text'?: string;
52
+ };
42
53
  };
@@ -10,4 +10,26 @@ export type TSinchVerticalStepperReact = TSinchElementReact<TSinchVerticalSteppe
10
10
  index: string;
11
11
  /** Label that is used for a11y */
12
12
  'aria-label': string;
13
+ } & {
14
+ style?: {
15
+ '--sinch-comp-vertical-stepper-color-background-default'?: string;
16
+ '--sinch-comp-vertical-stepper-color-background-visited-skip'?: string;
17
+ '--sinch-comp-vertical-stepper-color-background-active'?: string;
18
+ '--sinch-comp-vertical-stepper-color-background-visited'?: string;
19
+ '--sinch-comp-vertical-stepper-color-background-visited-error'?: string;
20
+ '--sinch-comp-vertical-stepper-color-border-default'?: string;
21
+ '--sinch-comp-vertical-stepper-color-border-visited-skip'?: string;
22
+ '--sinch-comp-vertical-stepper-color-border-active'?: string;
23
+ '--sinch-comp-vertical-stepper-color-border-visited'?: string;
24
+ '--sinch-comp-vertical-stepper-color-border-visited-error'?: string;
25
+ '--sinch-comp-vertical-stepper-color-icon-default'?: string;
26
+ '--sinch-comp-vertical-stepper-color-icon-visited-skip'?: string;
27
+ '--sinch-comp-vertical-stepper-color-icon-active'?: string;
28
+ '--sinch-comp-vertical-stepper-color-icon-visited'?: string;
29
+ '--sinch-comp-vertical-stepper-color-icon-visited-error'?: string;
30
+ '--sinch-comp-vertical-stepper-color-label'?: string;
31
+ '--sinch-comp-vertical-stepper-color-description'?: string;
32
+ '--sinch-comp-vertical-stepper-color-progress'?: string;
33
+ '--sinch-comp-vertical-stepper-color-progress-visited'?: string;
34
+ };
13
35
  };
@@ -21,4 +21,31 @@ export type TSinchVerticalStepperItemReact = TSinchElementReact<TSinchVerticalSt
21
21
  description?: string;
22
22
  /** Status */
23
23
  status?: TSinchVerticalStepperStatusType;
24
+ } & {
25
+ style?: {
26
+ '--sinch-comp-vertical-stepper-color-background-default'?: string;
27
+ '--sinch-comp-vertical-stepper-color-background-active'?: string;
28
+ '--sinch-comp-vertical-stepper-color-background-visited'?: string;
29
+ '--sinch-comp-vertical-stepper-color-background-visited-error'?: string;
30
+ '--sinch-comp-vertical-stepper-color-background-visited-skip'?: string;
31
+ '--sinch-comp-vertical-stepper-color-border-default'?: string;
32
+ '--sinch-comp-vertical-stepper-color-border-active'?: string;
33
+ '--sinch-comp-vertical-stepper-color-border-visited'?: string;
34
+ '--sinch-comp-vertical-stepper-color-border-visited-error'?: string;
35
+ '--sinch-comp-vertical-stepper-color-border-visited-skip'?: string;
36
+ '--sinch-comp-vertical-stepper-color-icon-default'?: string;
37
+ '--sinch-comp-vertical-stepper-color-icon-active'?: string;
38
+ '--sinch-comp-vertical-stepper-color-icon-visited'?: string;
39
+ '--sinch-comp-vertical-stepper-color-icon-visited-error'?: string;
40
+ '--sinch-comp-vertical-stepper-color-icon-visited-skip'?: string;
41
+ '--sinch-comp-vertical-stepper-color-label'?: string;
42
+ '--sinch-comp-vertical-stepper-color-description'?: string;
43
+ '--sinch-comp-vertical-stepper-color-progress'?: string;
44
+ '--sinch-comp-vertical-stepper-color-progress-visited'?: string;
45
+ '--sinch-local-color-background'?: string;
46
+ '--sinch-local-color-border'?: string;
47
+ '--sinch-local-color-text'?: string;
48
+ '--sinch-local-color-icon'?: string;
49
+ '--sinch-global-size-icon'?: string;
50
+ };
24
51
  };