@entropix/react 0.3.0 → 1.0.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 (20) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +994 -1015
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/accordion.css +54 -56
  8. package/dist/styles/button.css +113 -115
  9. package/dist/styles/checkbox.css +99 -101
  10. package/dist/styles/dialog.css +86 -88
  11. package/dist/styles/index.css +0 -2
  12. package/dist/styles/input.css +142 -144
  13. package/dist/styles/layout.css +103 -105
  14. package/dist/styles/menu.css +49 -51
  15. package/dist/styles/radio.css +103 -105
  16. package/dist/styles/select.css +123 -125
  17. package/dist/styles/switch.css +45 -44
  18. package/dist/styles/tabs.css +68 -70
  19. package/dist/styles/toggle.css +38 -40
  20. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,1096 +1,1075 @@
1
1
  /* src/styles/button.css */
2
- @layer entropix {
2
+ .entropix-button {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ gap: var(--entropix-button-gap);
7
+ border: 1px solid transparent;
8
+ font-family: var(--entropix-font-family-sans);
9
+ font-size: var(--entropix-button-font-size);
10
+ font-weight: var(--entropix-button-font-weight);
11
+ line-height: var(--entropix-button-line-height);
12
+ border-radius: var(--entropix-button-border-radius);
13
+ padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
14
+ cursor: pointer;
15
+ text-decoration: none;
16
+ user-select: none;
17
+ transition:
18
+ background var(--entropix-duration-fast) var(--entropix-easing-default),
19
+ color var(--entropix-duration-fast) var(--entropix-easing-default),
20
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
21
+ box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
22
+ }
23
+ .entropix-button--primary {
24
+ background: var(--entropix-button-primary-bg);
25
+ color: var(--entropix-button-primary-text);
26
+ border-color: var(--entropix-button-primary-border);
27
+ }
28
+ .entropix-button--primary:hover:not(:disabled) {
29
+ background: var(--entropix-button-primary-bg-hover);
30
+ }
31
+ .entropix-button--primary:active:not(:disabled) {
32
+ background: var(--entropix-button-primary-bg-active);
33
+ }
34
+ .entropix-button--secondary {
35
+ background: var(--entropix-button-secondary-bg);
36
+ color: var(--entropix-button-secondary-text);
37
+ border-color: var(--entropix-button-secondary-border);
38
+ }
39
+ .entropix-button--secondary:hover:not(:disabled) {
40
+ background: var(--entropix-button-secondary-bg-hover);
41
+ }
42
+ .entropix-button--secondary:active:not(:disabled) {
43
+ background: var(--entropix-button-secondary-bg-active);
44
+ }
45
+ .entropix-button--outline {
46
+ background: transparent;
47
+ color: var(--entropix-color-text-primary);
48
+ border-color: var(--entropix-color-border-default);
49
+ }
50
+ .entropix-button--outline:hover:not(:disabled) {
51
+ background: var(--entropix-color-action-secondary-hover);
52
+ }
53
+ .entropix-button--outline:active:not(:disabled) {
54
+ background: var(--entropix-color-action-secondary-active);
55
+ }
56
+ .entropix-button--ghost {
57
+ background: transparent;
58
+ color: var(--entropix-color-text-primary);
59
+ border-color: transparent;
60
+ }
61
+ .entropix-button--ghost:hover:not(:disabled) {
62
+ background: var(--entropix-color-action-secondary-default);
63
+ }
64
+ .entropix-button--ghost:active:not(:disabled) {
65
+ background: var(--entropix-color-action-secondary-hover);
66
+ }
67
+ .entropix-button--danger {
68
+ background: var(--entropix-button-danger-bg);
69
+ color: var(--entropix-button-danger-text);
70
+ border-color: var(--entropix-button-danger-border);
71
+ }
72
+ .entropix-button--danger:hover:not(:disabled) {
73
+ background: var(--entropix-button-danger-bg-hover);
74
+ }
75
+ .entropix-button--danger:active:not(:disabled) {
76
+ background: var(--entropix-button-danger-bg-active);
77
+ }
78
+ .entropix-button--sm {
79
+ padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
80
+ font-size: var(--entropix-font-size-xs);
81
+ border-radius: var(--entropix-radius-sm);
82
+ }
83
+ .entropix-button--md {
84
+ padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
85
+ font-size: var(--entropix-button-font-size);
86
+ }
87
+ .entropix-button--lg {
88
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
89
+ font-size: var(--entropix-font-size-base);
90
+ border-radius: var(--entropix-radius-lg);
91
+ }
92
+ .entropix-button:disabled,
93
+ .entropix-button[data-state=disabled],
94
+ .entropix-button[data-state=loading] {
95
+ opacity: 0.5;
96
+ cursor: not-allowed;
97
+ pointer-events: none;
98
+ }
99
+ .entropix-button:focus-visible {
100
+ outline: 2px solid var(--entropix-color-border-focus);
101
+ outline-offset: 2px;
102
+ }
103
+ @media (max-width: 767px) {
3
104
  .entropix-button {
4
- display: inline-flex;
5
- align-items: center;
6
- justify-content: center;
7
- gap: var(--entropix-button-gap);
8
- border: 1px solid transparent;
9
- font-family: var(--entropix-font-family-sans);
10
- font-size: var(--entropix-button-font-size);
11
- font-weight: var(--entropix-button-font-weight);
12
- line-height: var(--entropix-button-line-height);
13
- border-radius: var(--entropix-button-border-radius);
14
- padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
15
- cursor: pointer;
16
- text-decoration: none;
17
- user-select: none;
18
- transition:
19
- background var(--entropix-duration-fast) var(--entropix-easing-default),
20
- color var(--entropix-duration-fast) var(--entropix-easing-default),
21
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
22
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
23
- }
24
- .entropix-button--primary {
25
- background: var(--entropix-button-primary-bg);
26
- color: var(--entropix-button-primary-text);
27
- border-color: var(--entropix-button-primary-border);
28
- }
29
- .entropix-button--primary:hover:not(:disabled) {
30
- background: var(--entropix-button-primary-bg-hover);
31
- }
32
- .entropix-button--primary:active:not(:disabled) {
33
- background: var(--entropix-button-primary-bg-active);
34
- }
35
- .entropix-button--secondary {
36
- background: var(--entropix-button-secondary-bg);
37
- color: var(--entropix-button-secondary-text);
38
- border-color: var(--entropix-button-secondary-border);
39
- }
40
- .entropix-button--secondary:hover:not(:disabled) {
41
- background: var(--entropix-button-secondary-bg-hover);
42
- }
43
- .entropix-button--secondary:active:not(:disabled) {
44
- background: var(--entropix-button-secondary-bg-active);
45
- }
46
- .entropix-button--outline {
47
- background: transparent;
48
- color: var(--entropix-color-text-primary);
49
- border-color: var(--entropix-color-border-default);
50
- }
51
- .entropix-button--outline:hover:not(:disabled) {
52
- background: var(--entropix-color-action-secondary-hover);
53
- }
54
- .entropix-button--outline:active:not(:disabled) {
55
- background: var(--entropix-color-action-secondary-active);
56
- }
57
- .entropix-button--ghost {
58
- background: transparent;
59
- color: var(--entropix-color-text-primary);
60
- border-color: transparent;
61
- }
62
- .entropix-button--ghost:hover:not(:disabled) {
63
- background: var(--entropix-color-action-secondary-default);
64
- }
65
- .entropix-button--ghost:active:not(:disabled) {
66
- background: var(--entropix-color-action-secondary-hover);
67
- }
68
- .entropix-button--danger {
69
- background: var(--entropix-button-danger-bg);
70
- color: var(--entropix-button-danger-text);
71
- border-color: var(--entropix-button-danger-border);
72
- }
73
- .entropix-button--danger:hover:not(:disabled) {
74
- background: var(--entropix-button-danger-bg-hover);
75
- }
76
- .entropix-button--danger:active:not(:disabled) {
77
- background: var(--entropix-button-danger-bg-active);
105
+ min-height: 44px;
78
106
  }
79
107
  .entropix-button--sm {
80
- padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
81
- font-size: var(--entropix-font-size-xs);
82
- border-radius: var(--entropix-radius-sm);
83
- }
84
- .entropix-button--md {
85
- padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
86
- font-size: var(--entropix-button-font-size);
87
- }
88
- .entropix-button--lg {
89
- padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
90
- font-size: var(--entropix-font-size-base);
91
- border-radius: var(--entropix-radius-lg);
92
- }
93
- .entropix-button:disabled,
94
- .entropix-button[data-state=disabled],
95
- .entropix-button[data-state=loading] {
96
- opacity: 0.5;
97
- cursor: not-allowed;
98
- pointer-events: none;
99
- }
100
- .entropix-button:focus-visible {
101
- outline: 2px solid var(--entropix-color-border-focus);
102
- outline-offset: 2px;
103
- }
104
- @media (max-width: 767px) {
105
- .entropix-button {
106
- min-height: 44px;
107
- }
108
- .entropix-button--sm {
109
- min-height: 36px;
110
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
111
- font-size: var(--entropix-font-size-sm);
112
- }
108
+ min-height: 36px;
109
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
110
+ font-size: var(--entropix-font-size-sm);
113
111
  }
114
112
  }
115
113
 
116
114
  /* src/styles/toggle.css */
117
- @layer entropix {
118
- .entropix-toggle {
119
- display: inline-flex;
120
- align-items: center;
121
- justify-content: center;
122
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
123
- border: 1px solid var(--entropix-color-border-default);
124
- border-radius: var(--entropix-radius-md);
125
- background: var(--entropix-color-bg-primary);
126
- color: var(--entropix-color-text-primary);
127
- font-family: var(--entropix-font-family-sans);
128
- font-size: var(--entropix-font-size-sm);
129
- font-weight: var(--entropix-font-weight-medium);
130
- cursor: pointer;
131
- user-select: none;
132
- transition:
133
- background var(--entropix-duration-fast) var(--entropix-easing-default),
134
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
135
- color var(--entropix-duration-fast) var(--entropix-easing-default);
136
- }
137
- .entropix-toggle:hover:not(:disabled) {
138
- background: var(--entropix-color-action-secondary-hover);
139
- }
140
- .entropix-toggle[data-state=checked] {
141
- background: var(--entropix-color-action-primary-default);
142
- color: var(--entropix-color-text-inverse);
143
- border-color: transparent;
144
- }
145
- .entropix-toggle[data-state=checked]:hover:not(:disabled) {
146
- background: var(--entropix-color-action-primary-hover);
147
- }
148
- .entropix-toggle:disabled {
149
- opacity: 0.5;
150
- cursor: not-allowed;
151
- pointer-events: none;
152
- }
153
- .entropix-toggle:focus-visible {
154
- outline: 2px solid var(--entropix-color-border-focus);
155
- outline-offset: 2px;
156
- }
115
+ .entropix-toggle {
116
+ display: inline-flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
120
+ border: 1px solid var(--entropix-color-border-default);
121
+ border-radius: var(--entropix-radius-md);
122
+ background: var(--entropix-color-bg-primary);
123
+ color: var(--entropix-color-text-primary);
124
+ font-family: var(--entropix-font-family-sans);
125
+ font-size: var(--entropix-font-size-sm);
126
+ font-weight: var(--entropix-font-weight-medium);
127
+ cursor: pointer;
128
+ user-select: none;
129
+ transition:
130
+ background var(--entropix-duration-fast) var(--entropix-easing-default),
131
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
132
+ color var(--entropix-duration-fast) var(--entropix-easing-default);
133
+ }
134
+ .entropix-toggle:hover:not(:disabled) {
135
+ background: var(--entropix-color-action-secondary-hover);
136
+ }
137
+ .entropix-toggle[data-state=checked] {
138
+ background: var(--entropix-color-action-primary-default);
139
+ color: var(--entropix-color-text-inverse);
140
+ border-color: transparent;
141
+ }
142
+ .entropix-toggle[data-state=checked]:hover:not(:disabled) {
143
+ background: var(--entropix-color-action-primary-hover);
144
+ }
145
+ .entropix-toggle:disabled {
146
+ opacity: 0.5;
147
+ cursor: not-allowed;
148
+ pointer-events: none;
149
+ }
150
+ .entropix-toggle:focus-visible {
151
+ outline: 2px solid var(--entropix-color-border-focus);
152
+ outline-offset: 2px;
157
153
  }
158
154
 
159
155
  /* src/styles/switch.css */
160
- @layer entropix {
161
- .entropix-switch {
162
- position: relative;
163
- display: inline-flex;
164
- align-items: center;
165
- width: 44px;
166
- height: 24px;
167
- padding: 2px;
168
- border: none;
169
- border-radius: var(--entropix-radius-full);
170
- background: var(--entropix-color-gray-300);
171
- cursor: pointer;
172
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
173
- }
174
- .entropix-switch::after {
175
- content: "";
176
- display: block;
177
- width: 20px;
178
- height: 20px;
179
- border-radius: var(--entropix-radius-full);
180
- background: var(--entropix-color-white);
181
- box-shadow: var(--entropix-shadow-sm);
182
- transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
183
- }
184
- .entropix-switch[data-state=checked] {
185
- background: var(--entropix-color-action-primary-default);
186
- }
187
- .entropix-switch[data-state=checked]::after {
188
- transform: translateX(20px);
189
- }
190
- .entropix-switch:hover:not(:disabled) {
191
- background: var(--entropix-color-gray-400);
192
- }
193
- .entropix-switch[data-state=checked]:hover:not(:disabled) {
194
- background: var(--entropix-color-action-primary-hover);
195
- }
196
- .entropix-switch:disabled {
197
- opacity: 0.5;
198
- cursor: not-allowed;
199
- }
200
- .entropix-switch:focus-visible {
201
- outline: 2px solid var(--entropix-color-border-focus);
202
- outline-offset: 2px;
203
- }
156
+ .entropix-switch {
157
+ position: relative;
158
+ display: inline-flex;
159
+ align-items: center;
160
+ width: 44px;
161
+ height: 24px;
162
+ padding: 2px;
163
+ border: none;
164
+ border-radius: var(--entropix-radius-full);
165
+ background: var(--entropix-color-gray-300);
166
+ cursor: pointer;
167
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
168
+ font-size: 0;
169
+ color: transparent;
170
+ overflow: hidden;
171
+ }
172
+ .entropix-switch::after {
173
+ content: "";
174
+ display: block;
175
+ width: 20px;
176
+ height: 20px;
177
+ border-radius: var(--entropix-radius-full);
178
+ background: var(--entropix-color-white);
179
+ box-shadow: var(--entropix-shadow-sm);
180
+ transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
181
+ }
182
+ .entropix-switch[data-state=checked] {
183
+ background: var(--entropix-color-action-primary-default);
184
+ }
185
+ .entropix-switch[data-state=checked]::after {
186
+ transform: translateX(20px);
187
+ }
188
+ .entropix-switch:hover:not(:disabled) {
189
+ background: var(--entropix-color-gray-400);
190
+ }
191
+ .entropix-switch[data-state=checked]:hover:not(:disabled) {
192
+ background: var(--entropix-color-action-primary-hover);
193
+ }
194
+ .entropix-switch:disabled {
195
+ opacity: 0.5;
196
+ cursor: not-allowed;
197
+ }
198
+ .entropix-switch:focus-visible {
199
+ outline: 2px solid var(--entropix-color-border-focus);
200
+ outline-offset: 2px;
204
201
  }
205
202
 
206
203
  /* src/styles/dialog.css */
207
- @layer entropix {
208
- .entropix-dialog-overlay {
209
- position: fixed;
210
- inset: 0;
211
- background: rgba(0, 0, 0, 0.5);
212
- z-index: 50;
213
- }
204
+ .entropix-dialog-overlay {
205
+ position: fixed;
206
+ inset: 0;
207
+ background: rgba(0, 0, 0, 0.5);
208
+ z-index: 50;
209
+ }
210
+ .entropix-dialog-content {
211
+ position: fixed;
212
+ top: 50%;
213
+ left: 50%;
214
+ transform: translate(-50%, -50%);
215
+ background: var(--entropix-color-bg-primary);
216
+ border-radius: var(--entropix-radius-lg);
217
+ box-shadow: var(--entropix-shadow-xl);
218
+ padding: var(--entropix-spacing-6);
219
+ z-index: 51;
220
+ max-width: 480px;
221
+ width: 90vw;
222
+ max-height: 85vh;
223
+ overflow-y: auto;
224
+ }
225
+ .entropix-dialog-content:focus {
226
+ outline: none;
227
+ }
228
+ .entropix-dialog-title {
229
+ margin: 0;
230
+ margin-bottom: var(--entropix-spacing-2);
231
+ font-family: var(--entropix-text-heading-md-font-family);
232
+ font-size: var(--entropix-text-heading-md-font-size);
233
+ font-weight: var(--entropix-text-heading-md-font-weight);
234
+ line-height: var(--entropix-text-heading-md-line-height);
235
+ color: var(--entropix-color-text-primary);
236
+ }
237
+ .entropix-dialog-description {
238
+ margin: 0;
239
+ margin-bottom: var(--entropix-spacing-4);
240
+ font-family: var(--entropix-text-body-md-font-family);
241
+ font-size: var(--entropix-text-body-md-font-size);
242
+ font-weight: var(--entropix-text-body-md-font-weight);
243
+ line-height: var(--entropix-text-body-md-line-height);
244
+ color: var(--entropix-color-text-secondary);
245
+ }
246
+ .entropix-dialog-close {
247
+ position: absolute;
248
+ top: var(--entropix-spacing-3);
249
+ right: var(--entropix-spacing-3);
250
+ display: inline-flex;
251
+ align-items: center;
252
+ justify-content: center;
253
+ width: 32px;
254
+ height: 32px;
255
+ padding: 0;
256
+ border: none;
257
+ border-radius: var(--entropix-radius-sm);
258
+ background: transparent;
259
+ color: var(--entropix-color-text-secondary);
260
+ cursor: pointer;
261
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
262
+ }
263
+ .entropix-dialog-close:hover {
264
+ background: var(--entropix-color-action-secondary-default);
265
+ }
266
+ .entropix-dialog-close:focus-visible {
267
+ outline: 2px solid var(--entropix-color-border-focus);
268
+ outline-offset: 2px;
269
+ }
270
+ .entropix-dialog-trigger {
271
+ }
272
+ @media (max-width: 767px) {
214
273
  .entropix-dialog-content {
215
- position: fixed;
216
- top: 50%;
217
- left: 50%;
218
- transform: translate(-50%, -50%);
219
- background: var(--entropix-color-bg-primary);
220
- border-radius: var(--entropix-radius-lg);
221
- box-shadow: var(--entropix-shadow-xl);
222
- padding: var(--entropix-spacing-6);
223
- z-index: 51;
224
- max-width: 480px;
225
- width: 90vw;
226
- max-height: 85vh;
227
- overflow-y: auto;
228
- }
229
- .entropix-dialog-content:focus {
230
- outline: none;
231
- }
232
- .entropix-dialog-title {
233
- margin: 0;
234
- margin-bottom: var(--entropix-spacing-2);
235
- font-family: var(--entropix-text-heading-md-font-family);
236
- font-size: var(--entropix-text-heading-md-font-size);
237
- font-weight: var(--entropix-text-heading-md-font-weight);
238
- line-height: var(--entropix-text-heading-md-line-height);
239
- color: var(--entropix-color-text-primary);
240
- }
241
- .entropix-dialog-description {
242
- margin: 0;
243
- margin-bottom: var(--entropix-spacing-4);
244
- font-family: var(--entropix-text-body-md-font-family);
245
- font-size: var(--entropix-text-body-md-font-size);
246
- font-weight: var(--entropix-text-body-md-font-weight);
247
- line-height: var(--entropix-text-body-md-line-height);
248
- color: var(--entropix-color-text-secondary);
249
- }
250
- .entropix-dialog-close {
251
- position: absolute;
252
- top: var(--entropix-spacing-3);
253
- right: var(--entropix-spacing-3);
254
- display: inline-flex;
255
- align-items: center;
256
- justify-content: center;
257
- width: 32px;
258
- height: 32px;
259
- padding: 0;
260
- border: none;
261
- border-radius: var(--entropix-radius-sm);
262
- background: transparent;
263
- color: var(--entropix-color-text-secondary);
264
- cursor: pointer;
265
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
266
- }
267
- .entropix-dialog-close:hover {
268
- background: var(--entropix-color-action-secondary-default);
269
- }
270
- .entropix-dialog-close:focus-visible {
271
- outline: 2px solid var(--entropix-color-border-focus);
272
- outline-offset: 2px;
273
- }
274
- .entropix-dialog-trigger {
275
- }
276
- @media (max-width: 767px) {
277
- .entropix-dialog-content {
278
- top: auto;
279
- bottom: 0;
280
- left: 0;
281
- right: 0;
282
- transform: none;
283
- width: 100%;
284
- max-width: 100%;
285
- border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
286
- max-height: 90vh;
287
- padding: var(--entropix-spacing-5);
288
- }
274
+ top: auto;
275
+ bottom: 0;
276
+ left: 0;
277
+ right: 0;
278
+ transform: none;
279
+ width: 100%;
280
+ max-width: 100%;
281
+ border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
282
+ max-height: 90vh;
283
+ padding: var(--entropix-spacing-5);
289
284
  }
290
- @media (min-width: 768px) {
291
- .entropix-dialog-content {
292
- max-width: 560px;
293
- }
285
+ }
286
+ @media (min-width: 768px) {
287
+ .entropix-dialog-content {
288
+ max-width: 560px;
294
289
  }
295
290
  }
296
291
 
297
292
  /* src/styles/tabs.css */
298
- @layer entropix {
299
- .entropix-tabs {
300
- display: flex;
301
- flex-direction: column;
302
- }
293
+ .entropix-tabs {
294
+ display: flex;
295
+ flex-direction: column;
296
+ }
297
+ .entropix-tablist {
298
+ display: flex;
299
+ gap: var(--entropix-spacing-1);
300
+ border-bottom: 1px solid var(--entropix-color-border-default);
301
+ }
302
+ .entropix-tablist[data-orientation=vertical] {
303
+ flex-direction: column;
304
+ border-bottom: none;
305
+ border-right: 1px solid var(--entropix-color-border-default);
306
+ }
307
+ .entropix-tab {
308
+ display: inline-flex;
309
+ align-items: center;
310
+ justify-content: center;
311
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-4);
312
+ border: none;
313
+ border-bottom: 2px solid transparent;
314
+ background: transparent;
315
+ font-family: var(--entropix-font-family-sans);
316
+ font-size: var(--entropix-font-size-sm);
317
+ font-weight: var(--entropix-font-weight-medium);
318
+ color: var(--entropix-color-text-secondary);
319
+ cursor: pointer;
320
+ transition: color var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
321
+ }
322
+ .entropix-tab:hover:not(:disabled) {
323
+ color: var(--entropix-color-text-primary);
324
+ }
325
+ .entropix-tab[data-state=active] {
326
+ color: var(--entropix-color-action-primary-default);
327
+ border-bottom-color: var(--entropix-color-action-primary-default);
328
+ }
329
+ .entropix-tab:disabled,
330
+ .entropix-tab[aria-disabled=true] {
331
+ opacity: 0.5;
332
+ cursor: not-allowed;
333
+ }
334
+ .entropix-tab:focus-visible {
335
+ outline: 2px solid var(--entropix-color-border-focus);
336
+ outline-offset: -2px;
337
+ border-radius: var(--entropix-radius-sm);
338
+ }
339
+ .entropix-tabpanel {
340
+ padding: var(--entropix-spacing-4);
341
+ }
342
+ @media (max-width: 767px) {
303
343
  .entropix-tablist {
304
- display: flex;
305
- gap: var(--entropix-spacing-1);
306
- border-bottom: 1px solid var(--entropix-color-border-default);
344
+ overflow-x: auto;
345
+ -webkit-overflow-scrolling: touch;
346
+ scrollbar-width: none;
347
+ -ms-overflow-style: none;
307
348
  }
308
- .entropix-tablist[data-orientation=vertical] {
309
- flex-direction: column;
310
- border-bottom: none;
311
- border-right: 1px solid var(--entropix-color-border-default);
349
+ .entropix-tablist::-webkit-scrollbar {
350
+ display: none;
312
351
  }
313
352
  .entropix-tab {
314
- display: inline-flex;
315
- align-items: center;
316
- justify-content: center;
317
- padding: var(--entropix-spacing-2) var(--entropix-spacing-4);
318
- border: none;
319
- border-bottom: 2px solid transparent;
320
- background: transparent;
321
- font-family: var(--entropix-font-family-sans);
322
- font-size: var(--entropix-font-size-sm);
323
- font-weight: var(--entropix-font-weight-medium);
324
- color: var(--entropix-color-text-secondary);
325
- cursor: pointer;
326
- transition: color var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
327
- }
328
- .entropix-tab:hover:not(:disabled) {
329
- color: var(--entropix-color-text-primary);
330
- }
331
- .entropix-tab[data-state=active] {
332
- color: var(--entropix-color-action-primary-default);
333
- border-bottom-color: var(--entropix-color-action-primary-default);
334
- }
335
- .entropix-tab:disabled,
336
- .entropix-tab[aria-disabled=true] {
337
- opacity: 0.5;
338
- cursor: not-allowed;
339
- }
340
- .entropix-tab:focus-visible {
341
- outline: 2px solid var(--entropix-color-border-focus);
342
- outline-offset: -2px;
343
- border-radius: var(--entropix-radius-sm);
353
+ white-space: nowrap;
354
+ flex-shrink: 0;
344
355
  }
345
356
  .entropix-tabpanel {
346
- padding: var(--entropix-spacing-4);
347
- }
348
- @media (max-width: 767px) {
349
- .entropix-tablist {
350
- overflow-x: auto;
351
- -webkit-overflow-scrolling: touch;
352
- scrollbar-width: none;
353
- -ms-overflow-style: none;
354
- }
355
- .entropix-tablist::-webkit-scrollbar {
356
- display: none;
357
- }
358
- .entropix-tab {
359
- white-space: nowrap;
360
- flex-shrink: 0;
361
- }
362
- .entropix-tabpanel {
363
- padding: var(--entropix-spacing-3);
364
- }
357
+ padding: var(--entropix-spacing-3);
365
358
  }
366
359
  }
367
360
 
368
361
  /* src/styles/accordion.css */
369
- @layer entropix {
370
- .entropix-accordion {
371
- border: 1px solid var(--entropix-color-border-default);
372
- border-radius: var(--entropix-radius-lg);
373
- overflow: hidden;
374
- }
375
- .entropix-accordion-item {
376
- border-bottom: 1px solid var(--entropix-color-border-default);
377
- }
378
- .entropix-accordion-item:last-child {
379
- border-bottom: none;
380
- }
362
+ .entropix-accordion {
363
+ border: 1px solid var(--entropix-color-border-default);
364
+ border-radius: var(--entropix-radius-lg);
365
+ overflow: hidden;
366
+ }
367
+ .entropix-accordion-item {
368
+ border-bottom: 1px solid var(--entropix-color-border-default);
369
+ }
370
+ .entropix-accordion-item:last-child {
371
+ border-bottom: none;
372
+ }
373
+ .entropix-accordion-trigger {
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: space-between;
377
+ width: 100%;
378
+ padding: var(--entropix-spacing-4);
379
+ border: none;
380
+ background: transparent;
381
+ font-family: var(--entropix-font-family-sans);
382
+ font-size: var(--entropix-font-size-sm);
383
+ font-weight: var(--entropix-font-weight-medium);
384
+ color: var(--entropix-color-text-primary);
385
+ text-align: left;
386
+ cursor: pointer;
387
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
388
+ }
389
+ .entropix-accordion-trigger:hover:not(:disabled) {
390
+ background: var(--entropix-color-bg-secondary);
391
+ }
392
+ .entropix-accordion-trigger:disabled {
393
+ opacity: 0.5;
394
+ cursor: not-allowed;
395
+ }
396
+ .entropix-accordion-trigger:focus-visible {
397
+ outline: 2px solid var(--entropix-color-border-focus);
398
+ outline-offset: -2px;
399
+ }
400
+ .entropix-accordion-panel {
401
+ padding: 0 var(--entropix-spacing-4) var(--entropix-spacing-4);
402
+ font-family: var(--entropix-font-family-sans);
403
+ font-size: var(--entropix-font-size-sm);
404
+ color: var(--entropix-color-text-secondary);
405
+ line-height: var(--entropix-line-height-normal);
406
+ }
407
+ @media (max-width: 767px) {
381
408
  .entropix-accordion-trigger {
382
- display: flex;
383
- align-items: center;
384
- justify-content: space-between;
385
- width: 100%;
386
- padding: var(--entropix-spacing-4);
387
- border: none;
388
- background: transparent;
389
- font-family: var(--entropix-font-family-sans);
390
- font-size: var(--entropix-font-size-sm);
391
- font-weight: var(--entropix-font-weight-medium);
392
- color: var(--entropix-color-text-primary);
393
- text-align: left;
394
- cursor: pointer;
395
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
396
- }
397
- .entropix-accordion-trigger:hover:not(:disabled) {
398
- background: var(--entropix-color-bg-secondary);
399
- }
400
- .entropix-accordion-trigger:disabled {
401
- opacity: 0.5;
402
- cursor: not-allowed;
403
- }
404
- .entropix-accordion-trigger:focus-visible {
405
- outline: 2px solid var(--entropix-color-border-focus);
406
- outline-offset: -2px;
409
+ padding: var(--entropix-spacing-4) var(--entropix-spacing-3);
410
+ min-height: 48px;
411
+ font-size: var(--entropix-font-size-base);
407
412
  }
408
413
  .entropix-accordion-panel {
409
- padding: 0 var(--entropix-spacing-4) var(--entropix-spacing-4);
410
- font-family: var(--entropix-font-family-sans);
411
- font-size: var(--entropix-font-size-sm);
412
- color: var(--entropix-color-text-secondary);
413
- line-height: var(--entropix-line-height-normal);
414
- }
415
- @media (max-width: 767px) {
416
- .entropix-accordion-trigger {
417
- padding: var(--entropix-spacing-4) var(--entropix-spacing-3);
418
- min-height: 48px;
419
- font-size: var(--entropix-font-size-base);
420
- }
421
- .entropix-accordion-panel {
422
- padding: 0 var(--entropix-spacing-3) var(--entropix-spacing-3);
423
- }
414
+ padding: 0 var(--entropix-spacing-3) var(--entropix-spacing-3);
424
415
  }
425
416
  }
426
417
 
427
418
  /* src/styles/menu.css */
428
- @layer entropix {
429
- .entropix-menu-trigger {
430
- }
419
+ .entropix-menu-trigger {
420
+ }
421
+ .entropix-menu-content {
422
+ min-width: 160px;
423
+ padding: var(--entropix-spacing-1);
424
+ background: var(--entropix-color-bg-primary);
425
+ border: 1px solid var(--entropix-color-border-default);
426
+ border-radius: var(--entropix-radius-md);
427
+ box-shadow: var(--entropix-shadow-lg);
428
+ z-index: 50;
429
+ }
430
+ .entropix-menu-item {
431
+ display: flex;
432
+ align-items: center;
433
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
434
+ border-radius: var(--entropix-radius-sm);
435
+ font-family: var(--entropix-font-family-sans);
436
+ font-size: var(--entropix-font-size-sm);
437
+ color: var(--entropix-color-text-primary);
438
+ cursor: pointer;
439
+ user-select: none;
440
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
441
+ }
442
+ .entropix-menu-item:hover {
443
+ background: var(--entropix-color-action-secondary-default);
444
+ }
445
+ .entropix-menu-item[data-state=active] {
446
+ background: var(--entropix-color-action-secondary-default);
447
+ }
448
+ .entropix-menu-item[data-disabled=true],
449
+ .entropix-menu-item[aria-disabled=true] {
450
+ opacity: 0.5;
451
+ cursor: not-allowed;
452
+ pointer-events: none;
453
+ }
454
+ .entropix-menu-item:focus-visible {
455
+ outline: 2px solid var(--entropix-color-border-focus);
456
+ outline-offset: -2px;
457
+ }
458
+ @media (max-width: 767px) {
431
459
  .entropix-menu-content {
432
- min-width: 160px;
433
- padding: var(--entropix-spacing-1);
434
- background: var(--entropix-color-bg-primary);
435
- border: 1px solid var(--entropix-color-border-default);
436
- border-radius: var(--entropix-radius-md);
437
- box-shadow: var(--entropix-shadow-lg);
438
- z-index: 50;
460
+ min-width: 200px;
439
461
  }
440
462
  .entropix-menu-item {
441
- display: flex;
442
- align-items: center;
443
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
444
- border-radius: var(--entropix-radius-sm);
445
- font-family: var(--entropix-font-family-sans);
446
- font-size: var(--entropix-font-size-sm);
447
- color: var(--entropix-color-text-primary);
448
- cursor: pointer;
449
- user-select: none;
450
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
451
- }
452
- .entropix-menu-item:hover {
453
- background: var(--entropix-color-action-secondary-default);
454
- }
455
- .entropix-menu-item[data-state=active] {
456
- background: var(--entropix-color-action-secondary-default);
457
- }
458
- .entropix-menu-item[data-disabled=true],
459
- .entropix-menu-item[aria-disabled=true] {
460
- opacity: 0.5;
461
- cursor: not-allowed;
462
- pointer-events: none;
463
- }
464
- .entropix-menu-item:focus-visible {
465
- outline: 2px solid var(--entropix-color-border-focus);
466
- outline-offset: -2px;
467
- }
468
- @media (max-width: 767px) {
469
- .entropix-menu-content {
470
- min-width: 200px;
471
- }
472
- .entropix-menu-item {
473
- padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
474
- font-size: var(--entropix-font-size-base);
475
- min-height: 44px;
476
- }
463
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
464
+ font-size: var(--entropix-font-size-base);
465
+ min-height: 44px;
477
466
  }
478
467
  }
479
468
 
480
469
  /* src/styles/input.css */
481
- @layer entropix {
482
- .entropix-input-wrapper {
483
- --input-border-color: var(--entropix-color-border-default);
484
- --input-border-radius: var(--entropix-radius-md);
485
- --input-bg: var(--entropix-color-bg-primary);
486
- --input-font-size: var(--entropix-font-size-sm);
487
- --input-padding-y: var(--entropix-spacing-2);
488
- --input-padding-x: var(--entropix-spacing-3);
489
- --input-focus-color: var(--entropix-color-border-focus);
490
- --input-error-color: var(--entropix-color-border-danger);
491
- display: flex;
492
- flex-direction: column;
493
- gap: var(--entropix-spacing-1);
494
- width: 100%;
495
- }
496
- .entropix-input-label {
497
- display: block;
498
- font-family: var(--entropix-font-family-sans);
499
- font-size: var(--entropix-font-size-sm);
500
- font-weight: var(--entropix-font-weight-medium);
501
- color: var(--entropix-color-text-primary);
502
- line-height: var(--entropix-line-height-normal);
503
- }
504
- .entropix-input-required {
505
- color: var(--entropix-color-text-danger);
506
- margin-left: var(--entropix-spacing-1);
507
- }
470
+ .entropix-input-wrapper {
471
+ --input-border-color: var(--entropix-color-border-default);
472
+ --input-border-radius: var(--entropix-radius-md);
473
+ --input-bg: var(--entropix-color-bg-primary);
474
+ --input-font-size: var(--entropix-font-size-sm);
475
+ --input-padding-y: var(--entropix-spacing-2);
476
+ --input-padding-x: var(--entropix-spacing-3);
477
+ --input-focus-color: var(--entropix-color-border-focus);
478
+ --input-error-color: var(--entropix-color-border-danger);
479
+ display: flex;
480
+ flex-direction: column;
481
+ gap: var(--entropix-spacing-1);
482
+ width: 100%;
483
+ }
484
+ .entropix-input-label {
485
+ display: block;
486
+ font-family: var(--entropix-font-family-sans);
487
+ font-size: var(--entropix-font-size-sm);
488
+ font-weight: var(--entropix-font-weight-medium);
489
+ color: var(--entropix-color-text-primary);
490
+ line-height: var(--entropix-line-height-normal);
491
+ }
492
+ .entropix-input-required {
493
+ color: var(--entropix-color-text-danger);
494
+ margin-left: var(--entropix-spacing-1);
495
+ }
496
+ .entropix-input,
497
+ .entropix-textarea {
498
+ display: block;
499
+ width: 100%;
500
+ border: 1px solid var(--input-border-color);
501
+ border-radius: var(--input-border-radius);
502
+ background: var(--input-bg);
503
+ color: var(--entropix-color-text-primary);
504
+ font-family: var(--entropix-font-family-sans);
505
+ font-size: var(--input-font-size);
506
+ line-height: var(--entropix-line-height-normal);
507
+ padding: var(--input-padding-y) var(--input-padding-x);
508
+ transition:
509
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
510
+ box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
511
+ background var(--entropix-duration-fast) var(--entropix-easing-default);
512
+ }
513
+ .entropix-input::placeholder,
514
+ .entropix-textarea::placeholder {
515
+ color: var(--entropix-color-text-tertiary);
516
+ }
517
+ .entropix-input:focus,
518
+ .entropix-textarea:focus {
519
+ outline: none;
520
+ border-color: var(--input-focus-color);
521
+ box-shadow: 0 0 0 1px var(--input-focus-color);
522
+ }
523
+ .entropix-input:focus-visible,
524
+ .entropix-textarea:focus-visible {
525
+ outline: 2px solid var(--input-focus-color);
526
+ outline-offset: 2px;
527
+ }
528
+ .entropix-input:hover:not(:disabled):not(:focus),
529
+ .entropix-textarea:hover:not(:disabled):not(:focus) {
530
+ border-color: var(--entropix-color-border-hover);
531
+ }
532
+ .entropix-input[data-variant=filled],
533
+ .entropix-textarea[data-variant=filled] {
534
+ background: var(--entropix-color-bg-secondary);
535
+ border-color: transparent;
536
+ }
537
+ .entropix-input[data-variant=filled]:focus,
538
+ .entropix-textarea[data-variant=filled]:focus {
539
+ background: var(--input-bg);
540
+ border-color: var(--input-focus-color);
541
+ }
542
+ .entropix-input[data-size=sm],
543
+ .entropix-textarea[data-size=sm] {
544
+ padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
545
+ font-size: var(--entropix-font-size-xs);
546
+ border-radius: var(--entropix-radius-sm);
547
+ }
548
+ .entropix-input[data-size=md],
549
+ .entropix-textarea[data-size=md] {
550
+ padding: var(--input-padding-y) var(--input-padding-x);
551
+ font-size: var(--input-font-size);
552
+ }
553
+ .entropix-input[data-size=lg],
554
+ .entropix-textarea[data-size=lg] {
555
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
556
+ font-size: var(--entropix-font-size-base);
557
+ border-radius: var(--entropix-radius-lg);
558
+ }
559
+ .entropix-input[data-state=invalid],
560
+ .entropix-textarea[data-state=invalid] {
561
+ border-color: var(--input-error-color);
562
+ }
563
+ .entropix-input[data-state=invalid]:focus,
564
+ .entropix-textarea[data-state=invalid]:focus {
565
+ border-color: var(--input-error-color);
566
+ box-shadow: 0 0 0 1px var(--input-error-color);
567
+ }
568
+ .entropix-input:disabled,
569
+ .entropix-textarea:disabled,
570
+ .entropix-input[data-state=disabled],
571
+ .entropix-textarea[data-state=disabled] {
572
+ opacity: 0.5;
573
+ cursor: not-allowed;
574
+ pointer-events: none;
575
+ }
576
+ .entropix-input-helper {
577
+ font-family: var(--entropix-font-family-sans);
578
+ font-size: var(--entropix-font-size-xs);
579
+ color: var(--entropix-color-text-secondary);
580
+ line-height: var(--entropix-line-height-normal);
581
+ }
582
+ .entropix-input-error {
583
+ font-family: var(--entropix-font-family-sans);
584
+ font-size: var(--entropix-font-size-xs);
585
+ color: var(--entropix-color-text-danger);
586
+ line-height: var(--entropix-line-height-normal);
587
+ }
588
+ .entropix-textarea {
589
+ min-height: 80px;
590
+ }
591
+ @media (max-width: 767px) {
508
592
  .entropix-input,
509
593
  .entropix-textarea {
510
- display: block;
511
- width: 100%;
512
- border: 1px solid var(--input-border-color);
513
- border-radius: var(--input-border-radius);
514
- background: var(--input-bg);
515
- color: var(--entropix-color-text-primary);
516
- font-family: var(--entropix-font-family-sans);
517
- font-size: var(--input-font-size);
518
- line-height: var(--entropix-line-height-normal);
519
- padding: var(--input-padding-y) var(--input-padding-x);
520
- transition:
521
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
522
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
523
- background var(--entropix-duration-fast) var(--entropix-easing-default);
524
- }
525
- .entropix-input::placeholder,
526
- .entropix-textarea::placeholder {
527
- color: var(--entropix-color-text-tertiary);
528
- }
529
- .entropix-input:focus,
530
- .entropix-textarea:focus {
531
- outline: none;
532
- border-color: var(--input-focus-color);
533
- box-shadow: 0 0 0 1px var(--input-focus-color);
534
- }
535
- .entropix-input:focus-visible,
536
- .entropix-textarea:focus-visible {
537
- outline: 2px solid var(--input-focus-color);
538
- outline-offset: 2px;
539
- }
540
- .entropix-input:hover:not(:disabled):not(:focus),
541
- .entropix-textarea:hover:not(:disabled):not(:focus) {
542
- border-color: var(--entropix-color-border-hover);
543
- }
544
- .entropix-input[data-variant=filled],
545
- .entropix-textarea[data-variant=filled] {
546
- background: var(--entropix-color-bg-secondary);
547
- border-color: transparent;
548
- }
549
- .entropix-input[data-variant=filled]:focus,
550
- .entropix-textarea[data-variant=filled]:focus {
551
- background: var(--input-bg);
552
- border-color: var(--input-focus-color);
594
+ min-height: 44px;
595
+ font-size: var(--entropix-font-size-base);
553
596
  }
554
597
  .entropix-input[data-size=sm],
555
598
  .entropix-textarea[data-size=sm] {
556
- padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
557
- font-size: var(--entropix-font-size-xs);
558
- border-radius: var(--entropix-radius-sm);
559
- }
560
- .entropix-input[data-size=md],
561
- .entropix-textarea[data-size=md] {
562
- padding: var(--input-padding-y) var(--input-padding-x);
563
- font-size: var(--input-font-size);
564
- }
565
- .entropix-input[data-size=lg],
566
- .entropix-textarea[data-size=lg] {
567
- padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
568
- font-size: var(--entropix-font-size-base);
569
- border-radius: var(--entropix-radius-lg);
570
- }
571
- .entropix-input[data-state=invalid],
572
- .entropix-textarea[data-state=invalid] {
573
- border-color: var(--input-error-color);
574
- }
575
- .entropix-input[data-state=invalid]:focus,
576
- .entropix-textarea[data-state=invalid]:focus {
577
- border-color: var(--input-error-color);
578
- box-shadow: 0 0 0 1px var(--input-error-color);
579
- }
580
- .entropix-input:disabled,
581
- .entropix-textarea:disabled,
582
- .entropix-input[data-state=disabled],
583
- .entropix-textarea[data-state=disabled] {
584
- opacity: 0.5;
585
- cursor: not-allowed;
586
- pointer-events: none;
587
- }
588
- .entropix-input-helper {
589
- font-family: var(--entropix-font-family-sans);
590
- font-size: var(--entropix-font-size-xs);
591
- color: var(--entropix-color-text-secondary);
592
- line-height: var(--entropix-line-height-normal);
593
- }
594
- .entropix-input-error {
595
- font-family: var(--entropix-font-family-sans);
596
- font-size: var(--entropix-font-size-xs);
597
- color: var(--entropix-color-text-danger);
598
- line-height: var(--entropix-line-height-normal);
599
- }
600
- .entropix-textarea {
601
- min-height: 80px;
602
- }
603
- @media (max-width: 767px) {
604
- .entropix-input,
605
- .entropix-textarea {
606
- min-height: 44px;
607
- font-size: var(--entropix-font-size-base);
608
- }
609
- .entropix-input[data-size=sm],
610
- .entropix-textarea[data-size=sm] {
611
- min-height: 36px;
612
- font-size: var(--entropix-font-size-sm);
613
- }
599
+ min-height: 36px;
600
+ font-size: var(--entropix-font-size-sm);
614
601
  }
615
602
  }
616
603
 
617
604
  /* src/styles/checkbox.css */
618
- @layer entropix {
605
+ .entropix-checkbox {
606
+ --checkbox-size: 18px;
607
+ --checkbox-border-color: var(--entropix-color-border-default);
608
+ --checkbox-checked-bg: var(--entropix-color-action-primary-default);
609
+ --checkbox-checked-border: var(--entropix-color-action-primary-default);
610
+ --checkbox-border-radius: var(--entropix-radius-sm);
611
+ display: inline-flex;
612
+ align-items: center;
613
+ gap: var(--entropix-spacing-2);
614
+ padding: var(--entropix-spacing-1) 0;
615
+ border: none;
616
+ background: transparent;
617
+ cursor: pointer;
618
+ user-select: none;
619
+ font-family: var(--entropix-font-family-sans);
620
+ font-size: var(--entropix-font-size-sm);
621
+ color: var(--entropix-color-text-primary);
622
+ line-height: var(--entropix-line-height-normal);
623
+ }
624
+ .entropix-checkbox__indicator {
625
+ display: inline-flex;
626
+ align-items: center;
627
+ justify-content: center;
628
+ width: var(--checkbox-size);
629
+ height: var(--checkbox-size);
630
+ border: 2px solid var(--checkbox-border-color);
631
+ border-radius: var(--checkbox-border-radius);
632
+ background: var(--entropix-color-bg-primary);
633
+ flex-shrink: 0;
634
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
635
+ }
636
+ .entropix-checkbox__indicator[data-state=checked],
637
+ .entropix-checkbox__indicator[data-state=indeterminate] {
638
+ background: var(--checkbox-checked-bg);
639
+ border-color: var(--checkbox-checked-border);
640
+ }
641
+ .entropix-checkbox__indicator[data-state=checked]::after {
642
+ content: "";
643
+ display: block;
644
+ width: 5px;
645
+ height: 9px;
646
+ border: solid var(--entropix-color-text-inverse);
647
+ border-width: 0 2px 2px 0;
648
+ transform: rotate(45deg);
649
+ margin-top: -1px;
650
+ }
651
+ .entropix-checkbox__indicator[data-state=indeterminate]::after {
652
+ content: "";
653
+ display: block;
654
+ width: 8px;
655
+ height: 2px;
656
+ background: var(--entropix-color-text-inverse);
657
+ border-radius: 1px;
658
+ }
659
+ .entropix-checkbox__label {
660
+ font-family: var(--entropix-font-family-sans);
661
+ font-size: var(--entropix-font-size-sm);
662
+ color: var(--entropix-color-text-primary);
663
+ line-height: var(--entropix-line-height-normal);
664
+ }
665
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
666
+ border-color: var(--entropix-color-border-hover);
667
+ }
668
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=checked],
669
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=indeterminate] {
670
+ background: var(--entropix-color-action-primary-hover);
671
+ border-color: var(--entropix-color-action-primary-hover);
672
+ }
673
+ .entropix-checkbox:focus-visible {
674
+ outline: 2px solid var(--entropix-color-border-focus);
675
+ outline-offset: 2px;
676
+ border-radius: var(--checkbox-border-radius);
677
+ }
678
+ .entropix-checkbox:disabled {
679
+ opacity: 0.5;
680
+ cursor: not-allowed;
681
+ pointer-events: none;
682
+ }
683
+ @media (max-width: 767px) {
619
684
  .entropix-checkbox {
620
- --checkbox-size: 18px;
621
- --checkbox-border-color: var(--entropix-color-border-default);
622
- --checkbox-checked-bg: var(--entropix-color-action-primary-default);
623
- --checkbox-checked-border: var(--entropix-color-action-primary-default);
624
- --checkbox-border-radius: var(--entropix-radius-sm);
625
- display: inline-flex;
626
- align-items: center;
627
- gap: var(--entropix-spacing-2);
628
- padding: var(--entropix-spacing-1) 0;
629
- border: none;
630
- background: transparent;
631
- cursor: pointer;
632
- user-select: none;
633
- font-family: var(--entropix-font-family-sans);
634
- font-size: var(--entropix-font-size-sm);
635
- color: var(--entropix-color-text-primary);
636
- line-height: var(--entropix-line-height-normal);
685
+ min-height: 44px;
637
686
  }
638
687
  .entropix-checkbox__indicator {
639
- display: inline-flex;
640
- align-items: center;
641
- justify-content: center;
642
- width: var(--checkbox-size);
643
- height: var(--checkbox-size);
644
- border: 2px solid var(--checkbox-border-color);
645
- border-radius: var(--checkbox-border-radius);
646
- background: var(--entropix-color-bg-primary);
647
- flex-shrink: 0;
648
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
649
- }
650
- .entropix-checkbox__indicator[data-state=checked],
651
- .entropix-checkbox__indicator[data-state=indeterminate] {
652
- background: var(--checkbox-checked-bg);
653
- border-color: var(--checkbox-checked-border);
654
- }
655
- .entropix-checkbox__indicator[data-state=checked]::after {
656
- content: "";
657
- display: block;
658
- width: 5px;
659
- height: 9px;
660
- border: solid var(--entropix-color-text-inverse);
661
- border-width: 0 2px 2px 0;
662
- transform: rotate(45deg);
663
- margin-top: -1px;
664
- }
665
- .entropix-checkbox__indicator[data-state=indeterminate]::after {
666
- content: "";
667
- display: block;
668
- width: 8px;
669
- height: 2px;
670
- background: var(--entropix-color-text-inverse);
671
- border-radius: 1px;
672
- }
673
- .entropix-checkbox__label {
674
- font-family: var(--entropix-font-family-sans);
675
- font-size: var(--entropix-font-size-sm);
676
- color: var(--entropix-color-text-primary);
677
- line-height: var(--entropix-line-height-normal);
678
- }
679
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
680
- border-color: var(--entropix-color-border-hover);
681
- }
682
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=checked],
683
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=indeterminate] {
684
- background: var(--entropix-color-action-primary-hover);
685
- border-color: var(--entropix-color-action-primary-hover);
686
- }
687
- .entropix-checkbox:focus-visible {
688
- outline: 2px solid var(--entropix-color-border-focus);
689
- outline-offset: 2px;
690
- border-radius: var(--checkbox-border-radius);
691
- }
692
- .entropix-checkbox:disabled {
693
- opacity: 0.5;
694
- cursor: not-allowed;
695
- pointer-events: none;
696
- }
697
- @media (max-width: 767px) {
698
- .entropix-checkbox {
699
- min-height: 44px;
700
- }
701
- .entropix-checkbox__indicator {
702
- width: 22px;
703
- height: 22px;
704
- }
688
+ width: 22px;
689
+ height: 22px;
705
690
  }
706
691
  }
707
692
 
708
693
  /* src/styles/radio.css */
709
- @layer entropix {
710
- .entropix-radio-group {
711
- display: flex;
712
- gap: var(--entropix-spacing-2);
713
- }
714
- .entropix-radio-group[data-orientation=vertical] {
715
- flex-direction: column;
716
- }
717
- .entropix-radio-group[data-orientation=horizontal] {
718
- flex-direction: row;
719
- flex-wrap: wrap;
720
- }
694
+ .entropix-radio-group {
695
+ display: flex;
696
+ gap: var(--entropix-spacing-2);
697
+ }
698
+ .entropix-radio-group[data-orientation=vertical] {
699
+ flex-direction: column;
700
+ }
701
+ .entropix-radio-group[data-orientation=horizontal] {
702
+ flex-direction: row;
703
+ flex-wrap: wrap;
704
+ }
705
+ .entropix-radio-item {
706
+ --radio-size: 20px;
707
+ --radio-border-color: var(--entropix-color-border-default);
708
+ --radio-checked-color: var(--entropix-color-action-primary-default);
709
+ --radio-dot-size: 10px;
710
+ display: inline-flex;
711
+ align-items: center;
712
+ gap: var(--entropix-spacing-2);
713
+ padding: var(--entropix-spacing-1) 0;
714
+ border: none;
715
+ background: transparent;
716
+ cursor: pointer;
717
+ user-select: none;
718
+ font-family: var(--entropix-font-family-sans);
719
+ font-size: var(--entropix-font-size-sm);
720
+ color: var(--entropix-color-text-primary);
721
+ line-height: var(--entropix-line-height-normal);
722
+ }
723
+ .entropix-radio-item__indicator {
724
+ display: inline-flex;
725
+ align-items: center;
726
+ justify-content: center;
727
+ width: var(--radio-size);
728
+ height: var(--radio-size);
729
+ border: 2px solid var(--radio-border-color);
730
+ border-radius: 50%;
731
+ background: var(--entropix-color-bg-primary);
732
+ flex-shrink: 0;
733
+ transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), background var(--entropix-duration-fast) var(--entropix-easing-default);
734
+ }
735
+ .entropix-radio-item__indicator[data-state=checked] {
736
+ border-color: var(--radio-checked-color);
737
+ }
738
+ .entropix-radio-item__indicator[data-state=checked]::after {
739
+ content: "";
740
+ display: block;
741
+ width: var(--radio-dot-size);
742
+ height: var(--radio-dot-size);
743
+ border-radius: 50%;
744
+ background: var(--radio-checked-color);
745
+ }
746
+ .entropix-radio-item__label {
747
+ font-family: var(--entropix-font-family-sans);
748
+ font-size: var(--entropix-font-size-sm);
749
+ color: var(--entropix-color-text-primary);
750
+ line-height: var(--entropix-line-height-normal);
751
+ }
752
+ .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator {
753
+ border-color: var(--entropix-color-border-hover);
754
+ }
755
+ .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked] {
756
+ border-color: var(--entropix-color-action-primary-hover);
757
+ }
758
+ .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked]::after {
759
+ background: var(--entropix-color-action-primary-hover);
760
+ }
761
+ .entropix-radio-item:focus-visible {
762
+ outline: 2px solid var(--entropix-color-border-focus);
763
+ outline-offset: 2px;
764
+ border-radius: var(--entropix-radius-sm);
765
+ }
766
+ .entropix-radio-item:disabled,
767
+ .entropix-radio-item[data-disabled] {
768
+ opacity: 0.5;
769
+ cursor: not-allowed;
770
+ pointer-events: none;
771
+ }
772
+ @media (max-width: 767px) {
721
773
  .entropix-radio-item {
722
- --radio-size: 20px;
723
- --radio-border-color: var(--entropix-color-border-default);
724
- --radio-checked-color: var(--entropix-color-action-primary-default);
725
- --radio-dot-size: 10px;
726
- display: inline-flex;
727
- align-items: center;
728
- gap: var(--entropix-spacing-2);
729
- padding: var(--entropix-spacing-1) 0;
730
- border: none;
731
- background: transparent;
732
- cursor: pointer;
733
- user-select: none;
734
- font-family: var(--entropix-font-family-sans);
735
- font-size: var(--entropix-font-size-sm);
736
- color: var(--entropix-color-text-primary);
737
- line-height: var(--entropix-line-height-normal);
774
+ min-height: 44px;
738
775
  }
739
776
  .entropix-radio-item__indicator {
740
- display: inline-flex;
741
- align-items: center;
742
- justify-content: center;
743
- width: var(--radio-size);
744
- height: var(--radio-size);
745
- border: 2px solid var(--radio-border-color);
746
- border-radius: 50%;
747
- background: var(--entropix-color-bg-primary);
748
- flex-shrink: 0;
749
- transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), background var(--entropix-duration-fast) var(--entropix-easing-default);
750
- }
751
- .entropix-radio-item__indicator[data-state=checked] {
752
- border-color: var(--radio-checked-color);
777
+ width: 22px;
778
+ height: 22px;
753
779
  }
754
780
  .entropix-radio-item__indicator[data-state=checked]::after {
755
- content: "";
756
- display: block;
757
- width: var(--radio-dot-size);
758
- height: var(--radio-dot-size);
759
- border-radius: 50%;
760
- background: var(--radio-checked-color);
761
- }
762
- .entropix-radio-item__label {
763
- font-family: var(--entropix-font-family-sans);
764
- font-size: var(--entropix-font-size-sm);
765
- color: var(--entropix-color-text-primary);
766
- line-height: var(--entropix-line-height-normal);
767
- }
768
- .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator {
769
- border-color: var(--entropix-color-border-hover);
770
- }
771
- .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked] {
772
- border-color: var(--entropix-color-action-primary-hover);
773
- }
774
- .entropix-radio-item:hover:not(:disabled) .entropix-radio-item__indicator[data-state=checked]::after {
775
- background: var(--entropix-color-action-primary-hover);
776
- }
777
- .entropix-radio-item:focus-visible {
778
- outline: 2px solid var(--entropix-color-border-focus);
779
- outline-offset: 2px;
780
- border-radius: var(--entropix-radius-sm);
781
- }
782
- .entropix-radio-item:disabled,
783
- .entropix-radio-item[data-disabled] {
784
- opacity: 0.5;
785
- cursor: not-allowed;
786
- pointer-events: none;
787
- }
788
- @media (max-width: 767px) {
789
- .entropix-radio-item {
790
- min-height: 44px;
791
- }
792
- .entropix-radio-item__indicator {
793
- width: 22px;
794
- height: 22px;
795
- }
796
- .entropix-radio-item__indicator[data-state=checked]::after {
797
- width: 10px;
798
- height: 10px;
799
- }
781
+ width: 10px;
782
+ height: 10px;
800
783
  }
801
784
  }
802
785
 
803
786
  /* src/styles/select.css */
804
- @layer entropix {
805
- .entropix-select {
806
- --select-border-color: var(--entropix-color-border-default);
807
- --select-border-radius: var(--entropix-radius-md);
808
- --select-bg: var(--entropix-color-bg-primary);
809
- --select-dropdown-shadow: var(--entropix-shadow-lg);
810
- display: flex;
811
- flex-direction: column;
812
- gap: var(--entropix-spacing-1);
813
- position: relative;
814
- width: 100%;
815
- }
816
- .entropix-select-label {
817
- display: block;
818
- font-family: var(--entropix-font-family-sans);
819
- font-size: var(--entropix-font-size-sm);
820
- font-weight: var(--entropix-font-weight-medium);
821
- color: var(--entropix-color-text-primary);
822
- line-height: var(--entropix-line-height-normal);
823
- }
787
+ .entropix-select {
788
+ --select-border-color: var(--entropix-color-border-default);
789
+ --select-border-radius: var(--entropix-radius-md);
790
+ --select-bg: var(--entropix-color-bg-primary);
791
+ --select-dropdown-shadow: var(--entropix-shadow-lg);
792
+ display: flex;
793
+ flex-direction: column;
794
+ gap: var(--entropix-spacing-1);
795
+ position: relative;
796
+ width: 100%;
797
+ }
798
+ .entropix-select-label {
799
+ display: block;
800
+ font-family: var(--entropix-font-family-sans);
801
+ font-size: var(--entropix-font-size-sm);
802
+ font-weight: var(--entropix-font-weight-medium);
803
+ color: var(--entropix-color-text-primary);
804
+ line-height: var(--entropix-line-height-normal);
805
+ }
806
+ .entropix-select-trigger {
807
+ display: inline-flex;
808
+ align-items: center;
809
+ justify-content: space-between;
810
+ gap: var(--entropix-spacing-2);
811
+ width: 100%;
812
+ border: 1px solid var(--select-border-color);
813
+ border-radius: var(--select-border-radius);
814
+ background: var(--select-bg);
815
+ color: var(--entropix-color-text-primary);
816
+ font-family: var(--entropix-font-family-sans);
817
+ font-size: var(--entropix-font-size-sm);
818
+ line-height: var(--entropix-line-height-normal);
819
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
820
+ cursor: pointer;
821
+ user-select: none;
822
+ text-align: left;
823
+ transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
824
+ }
825
+ .entropix-select-trigger__value {
826
+ flex: 1;
827
+ overflow: hidden;
828
+ text-overflow: ellipsis;
829
+ white-space: nowrap;
830
+ }
831
+ .entropix-select-trigger__chevron {
832
+ flex-shrink: 0;
833
+ font-size: var(--entropix-font-size-xs);
834
+ color: var(--entropix-color-text-secondary);
835
+ line-height: 1;
836
+ }
837
+ .entropix-select-trigger:hover:not(:disabled) {
838
+ border-color: var(--entropix-color-border-hover);
839
+ }
840
+ .entropix-select-trigger:focus-visible {
841
+ outline: 2px solid var(--entropix-color-border-focus);
842
+ outline-offset: 2px;
843
+ }
844
+ .entropix-select-trigger:disabled {
845
+ opacity: 0.5;
846
+ cursor: not-allowed;
847
+ pointer-events: none;
848
+ }
849
+ .entropix-select-content {
850
+ position: absolute;
851
+ top: 100%;
852
+ left: 0;
853
+ right: 0;
854
+ z-index: 50;
855
+ margin-top: var(--entropix-spacing-1);
856
+ border: 1px solid var(--select-border-color);
857
+ border-radius: var(--select-border-radius);
858
+ background: var(--select-bg);
859
+ box-shadow: var(--select-dropdown-shadow);
860
+ padding: var(--entropix-spacing-1) 0;
861
+ max-height: 240px;
862
+ overflow-y: auto;
863
+ }
864
+ .entropix-select-option {
865
+ display: flex;
866
+ align-items: center;
867
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
868
+ font-family: var(--entropix-font-family-sans);
869
+ font-size: var(--entropix-font-size-sm);
870
+ color: var(--entropix-color-text-primary);
871
+ line-height: var(--entropix-line-height-normal);
872
+ cursor: pointer;
873
+ user-select: none;
874
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
875
+ }
876
+ .entropix-select-option:hover:not([data-disabled]) {
877
+ background: var(--entropix-color-action-secondary-hover);
878
+ }
879
+ .entropix-select-option[data-state=selected] {
880
+ background: var(--entropix-color-action-secondary-default);
881
+ font-weight: var(--entropix-font-weight-medium);
882
+ }
883
+ .entropix-select-option[data-state=selected]:hover {
884
+ background: var(--entropix-color-action-secondary-hover);
885
+ }
886
+ .entropix-select-option[data-disabled] {
887
+ opacity: 0.5;
888
+ cursor: not-allowed;
889
+ pointer-events: none;
890
+ }
891
+ @media (max-width: 767px) {
824
892
  .entropix-select-trigger {
825
- display: inline-flex;
826
- align-items: center;
827
- justify-content: space-between;
828
- gap: var(--entropix-spacing-2);
829
- width: 100%;
830
- border: 1px solid var(--select-border-color);
831
- border-radius: var(--select-border-radius);
832
- background: var(--select-bg);
833
- color: var(--entropix-color-text-primary);
834
- font-family: var(--entropix-font-family-sans);
835
- font-size: var(--entropix-font-size-sm);
836
- line-height: var(--entropix-line-height-normal);
837
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
838
- cursor: pointer;
839
- user-select: none;
840
- text-align: left;
841
- transition: border-color var(--entropix-duration-fast) var(--entropix-easing-default), box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
842
- }
843
- .entropix-select-trigger__value {
844
- flex: 1;
845
- overflow: hidden;
846
- text-overflow: ellipsis;
847
- white-space: nowrap;
848
- }
849
- .entropix-select-trigger__chevron {
850
- flex-shrink: 0;
851
- font-size: var(--entropix-font-size-xs);
852
- color: var(--entropix-color-text-secondary);
853
- line-height: 1;
854
- }
855
- .entropix-select-trigger:hover:not(:disabled) {
856
- border-color: var(--entropix-color-border-hover);
857
- }
858
- .entropix-select-trigger:focus-visible {
859
- outline: 2px solid var(--entropix-color-border-focus);
860
- outline-offset: 2px;
861
- }
862
- .entropix-select-trigger:disabled {
863
- opacity: 0.5;
864
- cursor: not-allowed;
865
- pointer-events: none;
866
- }
867
- .entropix-select-content {
868
- position: absolute;
869
- top: 100%;
870
- left: 0;
871
- right: 0;
872
- z-index: 50;
873
- margin-top: var(--entropix-spacing-1);
874
- border: 1px solid var(--select-border-color);
875
- border-radius: var(--select-border-radius);
876
- background: var(--select-bg);
877
- box-shadow: var(--select-dropdown-shadow);
878
- padding: var(--entropix-spacing-1) 0;
879
- max-height: 240px;
880
- overflow-y: auto;
893
+ min-height: 44px;
881
894
  }
882
895
  .entropix-select-option {
883
- display: flex;
884
- align-items: center;
885
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
886
- font-family: var(--entropix-font-family-sans);
887
- font-size: var(--entropix-font-size-sm);
888
- color: var(--entropix-color-text-primary);
889
- line-height: var(--entropix-line-height-normal);
890
- cursor: pointer;
891
- user-select: none;
892
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
893
- }
894
- .entropix-select-option:hover:not([data-disabled]) {
895
- background: var(--entropix-color-action-secondary-hover);
896
- }
897
- .entropix-select-option[data-state=selected] {
898
- background: var(--entropix-color-action-secondary-default);
899
- font-weight: var(--entropix-font-weight-medium);
900
- }
901
- .entropix-select-option[data-state=selected]:hover {
902
- background: var(--entropix-color-action-secondary-hover);
903
- }
904
- .entropix-select-option[data-disabled] {
905
- opacity: 0.5;
906
- cursor: not-allowed;
907
- pointer-events: none;
908
- }
909
- @media (max-width: 767px) {
910
- .entropix-select-trigger {
911
- min-height: 44px;
912
- }
913
- .entropix-select-option {
914
- min-height: 44px;
915
- }
896
+ min-height: 44px;
916
897
  }
917
898
  }
918
899
 
919
900
  /* src/styles/layout.css */
920
- @layer entropix {
921
- .entropix-stack {
922
- display: flex;
923
- flex-direction: column;
924
- gap: var(--entropix-space-layout-stack);
925
- }
926
- .entropix-stack--gap-none {
927
- gap: 0;
928
- }
929
- .entropix-stack--gap-xs {
930
- gap: var(--entropix-spacing-1);
931
- }
932
- .entropix-stack--gap-sm {
933
- gap: var(--entropix-spacing-2);
934
- }
935
- .entropix-stack--gap-md {
936
- gap: var(--entropix-spacing-4);
937
- }
938
- .entropix-stack--gap-lg {
939
- gap: var(--entropix-spacing-6);
940
- }
941
- .entropix-stack--gap-xl {
942
- gap: var(--entropix-spacing-8);
943
- }
944
- .entropix-stack--gap-2xl {
945
- gap: var(--entropix-spacing-12);
946
- }
947
- .entropix-stack--align-start {
948
- align-items: flex-start;
949
- }
950
- .entropix-stack--align-center {
951
- align-items: center;
952
- }
953
- .entropix-stack--align-end {
954
- align-items: flex-end;
955
- }
956
- .entropix-stack--align-stretch {
957
- align-items: stretch;
958
- }
959
- .entropix-stack--full-width {
960
- width: 100%;
961
- }
962
- .entropix-inline {
963
- display: flex;
964
- flex-direction: row;
965
- align-items: center;
966
- gap: var(--entropix-space-layout-inline);
967
- }
968
- .entropix-inline--gap-none {
969
- gap: 0;
970
- }
971
- .entropix-inline--gap-xs {
972
- gap: var(--entropix-spacing-1);
973
- }
974
- .entropix-inline--gap-sm {
975
- gap: var(--entropix-spacing-2);
976
- }
977
- .entropix-inline--gap-md {
978
- gap: var(--entropix-spacing-4);
979
- }
980
- .entropix-inline--gap-lg {
981
- gap: var(--entropix-spacing-6);
982
- }
983
- .entropix-inline--gap-xl {
984
- gap: var(--entropix-spacing-8);
985
- }
986
- .entropix-inline--gap-2xl {
987
- gap: var(--entropix-spacing-12);
988
- }
989
- .entropix-inline--align-start {
990
- align-items: flex-start;
991
- }
992
- .entropix-inline--align-center {
993
- align-items: center;
994
- }
995
- .entropix-inline--align-end {
996
- align-items: flex-end;
997
- }
998
- .entropix-inline--align-stretch {
999
- align-items: stretch;
1000
- }
1001
- .entropix-inline--align-baseline {
1002
- align-items: baseline;
1003
- }
1004
- .entropix-inline--justify-start {
1005
- justify-content: flex-start;
1006
- }
1007
- .entropix-inline--justify-center {
1008
- justify-content: center;
1009
- }
1010
- .entropix-inline--justify-end {
1011
- justify-content: flex-end;
1012
- }
1013
- .entropix-inline--justify-between {
1014
- justify-content: space-between;
1015
- }
1016
- .entropix-inline--justify-around {
1017
- justify-content: space-around;
1018
- }
1019
- .entropix-inline--wrap {
1020
- flex-wrap: wrap;
1021
- }
901
+ .entropix-stack {
902
+ display: flex;
903
+ flex-direction: column;
904
+ gap: var(--entropix-space-layout-stack);
905
+ }
906
+ .entropix-stack--gap-none {
907
+ gap: 0;
908
+ }
909
+ .entropix-stack--gap-xs {
910
+ gap: var(--entropix-spacing-1);
911
+ }
912
+ .entropix-stack--gap-sm {
913
+ gap: var(--entropix-spacing-2);
914
+ }
915
+ .entropix-stack--gap-md {
916
+ gap: var(--entropix-spacing-4);
917
+ }
918
+ .entropix-stack--gap-lg {
919
+ gap: var(--entropix-spacing-6);
920
+ }
921
+ .entropix-stack--gap-xl {
922
+ gap: var(--entropix-spacing-8);
923
+ }
924
+ .entropix-stack--gap-2xl {
925
+ gap: var(--entropix-spacing-12);
926
+ }
927
+ .entropix-stack--align-start {
928
+ align-items: flex-start;
929
+ }
930
+ .entropix-stack--align-center {
931
+ align-items: center;
932
+ }
933
+ .entropix-stack--align-end {
934
+ align-items: flex-end;
935
+ }
936
+ .entropix-stack--align-stretch {
937
+ align-items: stretch;
938
+ }
939
+ .entropix-stack--full-width {
940
+ width: 100%;
941
+ }
942
+ .entropix-inline {
943
+ display: flex;
944
+ flex-direction: row;
945
+ align-items: center;
946
+ gap: var(--entropix-space-layout-inline);
947
+ }
948
+ .entropix-inline--gap-none {
949
+ gap: 0;
950
+ }
951
+ .entropix-inline--gap-xs {
952
+ gap: var(--entropix-spacing-1);
953
+ }
954
+ .entropix-inline--gap-sm {
955
+ gap: var(--entropix-spacing-2);
956
+ }
957
+ .entropix-inline--gap-md {
958
+ gap: var(--entropix-spacing-4);
959
+ }
960
+ .entropix-inline--gap-lg {
961
+ gap: var(--entropix-spacing-6);
962
+ }
963
+ .entropix-inline--gap-xl {
964
+ gap: var(--entropix-spacing-8);
965
+ }
966
+ .entropix-inline--gap-2xl {
967
+ gap: var(--entropix-spacing-12);
968
+ }
969
+ .entropix-inline--align-start {
970
+ align-items: flex-start;
971
+ }
972
+ .entropix-inline--align-center {
973
+ align-items: center;
974
+ }
975
+ .entropix-inline--align-end {
976
+ align-items: flex-end;
977
+ }
978
+ .entropix-inline--align-stretch {
979
+ align-items: stretch;
980
+ }
981
+ .entropix-inline--align-baseline {
982
+ align-items: baseline;
983
+ }
984
+ .entropix-inline--justify-start {
985
+ justify-content: flex-start;
986
+ }
987
+ .entropix-inline--justify-center {
988
+ justify-content: center;
989
+ }
990
+ .entropix-inline--justify-end {
991
+ justify-content: flex-end;
992
+ }
993
+ .entropix-inline--justify-between {
994
+ justify-content: space-between;
995
+ }
996
+ .entropix-inline--justify-around {
997
+ justify-content: space-around;
998
+ }
999
+ .entropix-inline--wrap {
1000
+ flex-wrap: wrap;
1001
+ }
1002
+ .entropix-container {
1003
+ width: 100%;
1004
+ margin-left: auto;
1005
+ margin-right: auto;
1006
+ padding-left: var(--entropix-space-layout-page-margin);
1007
+ padding-right: var(--entropix-space-layout-page-margin);
1008
+ }
1009
+ .entropix-container--xs {
1010
+ max-width: 480px;
1011
+ }
1012
+ .entropix-container--sm {
1013
+ max-width: 640px;
1014
+ }
1015
+ .entropix-container--md {
1016
+ max-width: 768px;
1017
+ }
1018
+ .entropix-container--lg {
1019
+ max-width: 1024px;
1020
+ }
1021
+ .entropix-container--xl {
1022
+ max-width: 1280px;
1023
+ }
1024
+ .entropix-container--full {
1025
+ max-width: 100%;
1026
+ }
1027
+ .entropix-container--center {
1028
+ display: flex;
1029
+ flex-direction: column;
1030
+ align-items: center;
1031
+ }
1032
+ .entropix-divider {
1033
+ border: 0;
1034
+ border-top: 1px solid var(--entropix-color-border-default);
1035
+ margin: 0;
1036
+ width: 100%;
1037
+ }
1038
+ .entropix-divider--vertical {
1039
+ border-top: 0;
1040
+ border-left: 1px solid var(--entropix-color-border-default);
1041
+ width: auto;
1042
+ height: auto;
1043
+ align-self: stretch;
1044
+ }
1045
+ .entropix-divider--spacing-sm {
1046
+ margin: var(--entropix-spacing-2) 0;
1047
+ }
1048
+ .entropix-divider--spacing-md {
1049
+ margin: var(--entropix-spacing-4) 0;
1050
+ }
1051
+ .entropix-divider--spacing-lg {
1052
+ margin: var(--entropix-spacing-6) 0;
1053
+ }
1054
+ .entropix-divider--vertical.entropix-divider--spacing-sm {
1055
+ margin: 0 var(--entropix-spacing-2);
1056
+ }
1057
+ .entropix-divider--vertical.entropix-divider--spacing-md {
1058
+ margin: 0 var(--entropix-spacing-4);
1059
+ }
1060
+ .entropix-divider--vertical.entropix-divider--spacing-lg {
1061
+ margin: 0 var(--entropix-spacing-6);
1062
+ }
1063
+ @media (min-width: 768px) {
1022
1064
  .entropix-container {
1023
- width: 100%;
1024
- margin-left: auto;
1025
- margin-right: auto;
1026
- padding-left: var(--entropix-space-layout-page-margin);
1027
- padding-right: var(--entropix-space-layout-page-margin);
1028
- }
1029
- .entropix-container--xs {
1030
- max-width: 480px;
1031
- }
1032
- .entropix-container--sm {
1033
- max-width: 640px;
1034
- }
1035
- .entropix-container--md {
1036
- max-width: 768px;
1037
- }
1038
- .entropix-container--lg {
1039
- max-width: 1024px;
1040
- }
1041
- .entropix-container--xl {
1042
- max-width: 1280px;
1043
- }
1044
- .entropix-container--full {
1045
- max-width: 100%;
1046
- }
1047
- .entropix-container--center {
1048
- display: flex;
1049
- flex-direction: column;
1050
- align-items: center;
1065
+ padding-left: var(--entropix-space-layout-page-margin-md);
1066
+ padding-right: var(--entropix-space-layout-page-margin-md);
1051
1067
  }
1052
- .entropix-divider {
1053
- border: 0;
1054
- border-top: 1px solid var(--entropix-color-border-default);
1055
- margin: 0;
1056
- width: 100%;
1057
- }
1058
- .entropix-divider--vertical {
1059
- border-top: 0;
1060
- border-left: 1px solid var(--entropix-color-border-default);
1061
- width: auto;
1062
- height: auto;
1063
- align-self: stretch;
1064
- }
1065
- .entropix-divider--spacing-sm {
1066
- margin: var(--entropix-spacing-2) 0;
1067
- }
1068
- .entropix-divider--spacing-md {
1069
- margin: var(--entropix-spacing-4) 0;
1070
- }
1071
- .entropix-divider--spacing-lg {
1072
- margin: var(--entropix-spacing-6) 0;
1073
- }
1074
- .entropix-divider--vertical.entropix-divider--spacing-sm {
1075
- margin: 0 var(--entropix-spacing-2);
1076
- }
1077
- .entropix-divider--vertical.entropix-divider--spacing-md {
1078
- margin: 0 var(--entropix-spacing-4);
1079
- }
1080
- .entropix-divider--vertical.entropix-divider--spacing-lg {
1081
- margin: 0 var(--entropix-spacing-6);
1082
- }
1083
- @media (min-width: 768px) {
1084
- .entropix-container {
1085
- padding-left: var(--entropix-space-layout-page-margin-md);
1086
- padding-right: var(--entropix-space-layout-page-margin-md);
1087
- }
1088
- }
1089
- @media (min-width: 1024px) {
1090
- .entropix-container {
1091
- padding-left: var(--entropix-space-layout-page-margin-lg);
1092
- padding-right: var(--entropix-space-layout-page-margin-lg);
1093
- }
1068
+ }
1069
+ @media (min-width: 1024px) {
1070
+ .entropix-container {
1071
+ padding-left: var(--entropix-space-layout-page-margin-lg);
1072
+ padding-right: var(--entropix-space-layout-page-margin-lg);
1094
1073
  }
1095
1074
  }
1096
1075
  /*# sourceMappingURL=index.css.map */