@chekinapp/ui 0.0.36 → 0.0.37

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.
@@ -1,64 +0,0 @@
1
- .styledButton {
2
- box-sizing: border-box;
3
- display: flex;
4
- align-items: center;
5
- min-width: 117px;
6
- height: 48px;
7
- padding: 0 16px;
8
- border: 1px solid #cecede;
9
- border-radius: 6px;
10
- background-color: #f2f2fa;
11
- color: #9696b9;
12
- cursor: pointer;
13
- font-size: 15px;
14
- font-weight: 600;
15
- outline: none;
16
- text-align: left;
17
- user-select: none;
18
- transition: all 75ms ease-in-out;
19
- }
20
-
21
- .styledButton input {
22
- position: absolute;
23
- width: 0;
24
- height: 0;
25
- opacity: 0;
26
- cursor: pointer;
27
- }
28
-
29
- .styledButton.disabled {
30
- cursor: not-allowed;
31
- opacity: 0.3;
32
- }
33
-
34
- .styledButton.loading {
35
- cursor: progress;
36
- }
37
-
38
- .styledButton:not(.disabled):hover {
39
- border-color: #385bf8;
40
- }
41
-
42
- .styledButton:not(.disabled):active {
43
- opacity: 1;
44
- }
45
-
46
- .styledButton.readOnly {
47
- cursor: default;
48
- }
49
-
50
- .styledButton.readOnly:not(.active):hover {
51
- border-color: transparent;
52
- }
53
-
54
- .styledButton.active {
55
- border-color: #385bf8;
56
- background: white;
57
- color: #385bf8;
58
- }
59
-
60
- .content {
61
- display: flex;
62
- align-items: center;
63
- height: 100%;
64
- }
@@ -1,30 +0,0 @@
1
- .RatingRadioGroup__input {
2
- position: absolute;
3
- width: 0;
4
- height: 0;
5
- opacity: 0;
6
- }
7
-
8
- .RatingRadioGroup__star {
9
- cursor: pointer;
10
- }
11
-
12
- .RatingRadioGroup .RatingRadioGroup__legend {
13
- margin-bottom: 8px;
14
- }
15
-
16
- .RatingRadioGroup {
17
- all: unset;
18
- position: relative;
19
- }
20
-
21
- .RatingRadioGroup__list {
22
- display: flex;
23
- gap: 8px;
24
- }
25
-
26
- .RatingRadioGroup__label input[type='radio']:focus-visible + .RatingRadioGroup__star {
27
- outline: 2px solid #385bf8;
28
- outline-offset: 2px;
29
- border-radius: 4px;
30
- }
@@ -1,20 +0,0 @@
1
- .bar {
2
- animation: loading-bar 0.9s linear infinite;
3
- }
4
-
5
- @keyframes loading-bar {
6
- 0% {
7
- left: -43%;
8
- width: 43%;
9
- }
10
-
11
- 70% {
12
- left: 42%;
13
- width: 58%;
14
- }
15
-
16
- 100% {
17
- left: 100%;
18
- width: 58%;
19
- }
20
- }
@@ -1,7 +0,0 @@
1
- .radio__wrapper {
2
- @apply flex cursor-pointer items-center gap-2;
3
- }
4
-
5
- .radio__wrapper_disabled {
6
- @apply cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
7
- }
@@ -1,151 +0,0 @@
1
- .container {
2
- position: relative;
3
- display: flex;
4
- flex-direction: column;
5
- gap: 4px;
6
- width: 300px;
7
- font-family: var(--chekin-font-family-primary);
8
- }
9
-
10
- .labelRow {
11
- display: flex;
12
- gap: 4px;
13
- align-items: center;
14
- }
15
-
16
- .labelText,
17
- .optionalText {
18
- font-size: 16px;
19
- line-height: 16px;
20
- color: var(--chekin-color-brand-navy);
21
- }
22
-
23
- .labelText {
24
- font-weight: 500;
25
- }
26
-
27
- .optionalText em {
28
- color: var(--chekin-color-gray-2);
29
- }
30
-
31
- .tooltip {
32
- width: 16px;
33
- height: 16px;
34
- flex-shrink: 0;
35
- }
36
-
37
- .fieldBox {
38
- position: relative;
39
- display: flex;
40
- align-items: center;
41
- gap: 10px;
42
- height: 44px;
43
- padding: 10px 14px;
44
- border: 1px solid;
45
- border-radius: 8px;
46
- transition:
47
- border-color 0.15s ease,
48
- background-color 0.15s ease;
49
- }
50
-
51
- .fieldBoxEmpty {
52
- background-color: var(--chekin-color-surface-input-empty);
53
- border-color: rgba(22, 22, 67, 0.2);
54
- }
55
-
56
- .fieldBoxFilled {
57
- background-color: white;
58
- border-color: var(--chekin-color-brand-navy);
59
- }
60
-
61
- .fieldBoxErrorWrong {
62
- background-color: white;
63
- border-color: var(--error-message-color);
64
- }
65
-
66
- .fieldBoxAutocompleted {
67
- background-color: var(--chekin-color-surface-autocomplete);
68
- border-color: var(--chekin-color-brand-navy);
69
- }
70
-
71
- .fieldBoxFocused {
72
- border-color: var(--chekin-color-brand-blue);
73
- }
74
-
75
- .input {
76
- flex: 1 0 0;
77
- min-width: 0;
78
- min-height: 1px;
79
- padding: 0;
80
- border: none;
81
- background: transparent;
82
- color: var(--chekin-color-brand-navy);
83
- font: inherit;
84
- font-size: 16px;
85
- font-weight: 500;
86
- line-height: 20px;
87
- outline: none;
88
- }
89
-
90
- .input::placeholder {
91
- color: var(--chekin-color-gray-1);
92
- font-weight: 500;
93
- }
94
-
95
- .icon {
96
- display: flex;
97
- flex-shrink: 0;
98
- align-items: center;
99
- justify-content: center;
100
- width: 24px;
101
- height: 24px;
102
- }
103
-
104
- .supportingText {
105
- margin: 0;
106
- color: var(--chekin-color-gray-2);
107
- font-size: 12px;
108
- font-style: italic;
109
- line-height: normal;
110
- }
111
-
112
- .errorText {
113
- margin: 0;
114
- color: var(--error-message-color);
115
- font-size: 12px;
116
- font-weight: 500;
117
- line-height: 16px;
118
- text-align: right;
119
- }
120
-
121
- .floatingLabel {
122
- position: absolute;
123
- top: -8px;
124
- left: 13px;
125
- display: flex;
126
- align-items: center;
127
- height: 16px;
128
- padding: 0 3px;
129
- background: linear-gradient(to bottom, transparent 50%, white 50%);
130
- pointer-events: none;
131
- }
132
-
133
- .floatingLabelAutocompleted {
134
- background: linear-gradient(
135
- to bottom,
136
- rgb(239 246 255 / 0%) 50%,
137
- var(--chekin-color-surface-autocomplete) 50%
138
- );
139
- }
140
-
141
- .floatingLabelText {
142
- color: var(--chekin-color-gray-1);
143
- font-size: 14px;
144
- font-weight: 500;
145
- line-height: 24px;
146
- white-space: nowrap;
147
- }
148
-
149
- .floatingLabelTextError {
150
- color: var(--error-message-color);
151
- }
@@ -1,8 +0,0 @@
1
- .ErrorMessage {
2
- @apply mt-0.5 text-left text-sm font-medium;
3
- color: var(--error-message-color);
4
- }
5
-
6
- .ErrorMessage__disabled {
7
- opacity: 0.3;
8
- }
@@ -1,48 +0,0 @@
1
- .Loader {
2
- display: flex;
3
- align-items: center;
4
- justify-content: center;
5
- column-gap: 13px;
6
- }
7
-
8
- .Loader > div {
9
- color: #9696b9;
10
- font-size: 14px;
11
- font-weight: 700;
12
- opacity: 0.5;
13
- text-transform: uppercase;
14
- }
15
-
16
- .dots {
17
- display: inline-flex;
18
- align-items: center;
19
- justify-content: center;
20
- gap: 15%;
21
- }
22
-
23
- .dot {
24
- width: 22%;
25
- height: 22%;
26
- border-radius: 9999px;
27
- animation: three-dots 1.1s infinite ease-in-out both;
28
- }
29
-
30
- .dot:nth-child(1) {
31
- animation-delay: -0.32s;
32
- }
33
-
34
- .dot:nth-child(2) {
35
- animation-delay: -0.16s;
36
- }
37
-
38
- @keyframes three-dots {
39
- 0%,
40
- 80%,
41
- 100% {
42
- transform: scale(0);
43
- }
44
-
45
- 40% {
46
- transform: scale(1);
47
- }
48
- }
@@ -1,17 +0,0 @@
1
- .root {
2
- --text-field-height: 2.75rem;
3
- --text-field-radius: 8px;
4
- --text-field-padding-x: 0.875rem;
5
- --text-field-padding-y: 0.625rem;
6
- --text-field-bg-empty: #f4f6f8;
7
- --text-field-bg-filled: #ffffff;
8
- --text-field-border-empty: rgba(22, 22, 67, 0.2);
9
- --text-field-border-filled: #161643;
10
- --text-field-border-error: #ff2467;
11
- --text-field-text: #161643;
12
- --text-field-placeholder: #6b6b95;
13
- --text-field-label: #161643;
14
- --text-field-supporting: #9696b9;
15
- --text-field-error: #ff2467;
16
- --text-field-focus-ring: rgba(56, 91, 248, 0.2);
17
- }