@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/styles/dialog.css CHANGED
@@ -1,104 +1,102 @@
1
1
  /* Dialog — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-dialog-overlay {
5
- position: fixed;
6
- inset: 0;
7
- background: rgba(0, 0, 0, 0.5);
8
- z-index: 50;
9
- }
3
+ .entropix-dialog-overlay {
4
+ position: fixed;
5
+ inset: 0;
6
+ background: rgba(0, 0, 0, 0.5);
7
+ z-index: 50;
8
+ }
10
9
 
11
- .entropix-dialog-content {
12
- position: fixed;
13
- top: 50%;
14
- left: 50%;
15
- transform: translate(-50%, -50%);
16
- background: var(--entropix-color-bg-primary);
17
- border-radius: var(--entropix-radius-lg);
18
- box-shadow: var(--entropix-shadow-xl);
19
- padding: var(--entropix-spacing-6);
20
- z-index: 51;
21
- max-width: 480px;
22
- width: 90vw;
23
- max-height: 85vh;
24
- overflow-y: auto;
25
- }
10
+ .entropix-dialog-content {
11
+ position: fixed;
12
+ top: 50%;
13
+ left: 50%;
14
+ transform: translate(-50%, -50%);
15
+ background: var(--entropix-color-bg-primary);
16
+ border-radius: var(--entropix-radius-lg);
17
+ box-shadow: var(--entropix-shadow-xl);
18
+ padding: var(--entropix-spacing-6);
19
+ z-index: 51;
20
+ max-width: 480px;
21
+ width: 90vw;
22
+ max-height: 85vh;
23
+ overflow-y: auto;
24
+ }
26
25
 
27
- .entropix-dialog-content:focus {
28
- outline: none;
29
- }
26
+ .entropix-dialog-content:focus {
27
+ outline: none;
28
+ }
30
29
 
31
- .entropix-dialog-title {
32
- margin: 0;
33
- margin-bottom: var(--entropix-spacing-2);
34
- font-family: var(--entropix-text-heading-md-font-family);
35
- font-size: var(--entropix-text-heading-md-font-size);
36
- font-weight: var(--entropix-text-heading-md-font-weight);
37
- line-height: var(--entropix-text-heading-md-line-height);
38
- color: var(--entropix-color-text-primary);
39
- }
30
+ .entropix-dialog-title {
31
+ margin: 0;
32
+ margin-bottom: var(--entropix-spacing-2);
33
+ font-family: var(--entropix-text-heading-md-font-family);
34
+ font-size: var(--entropix-text-heading-md-font-size);
35
+ font-weight: var(--entropix-text-heading-md-font-weight);
36
+ line-height: var(--entropix-text-heading-md-line-height);
37
+ color: var(--entropix-color-text-primary);
38
+ }
40
39
 
41
- .entropix-dialog-description {
42
- margin: 0;
43
- margin-bottom: var(--entropix-spacing-4);
44
- font-family: var(--entropix-text-body-md-font-family);
45
- font-size: var(--entropix-text-body-md-font-size);
46
- font-weight: var(--entropix-text-body-md-font-weight);
47
- line-height: var(--entropix-text-body-md-line-height);
48
- color: var(--entropix-color-text-secondary);
49
- }
40
+ .entropix-dialog-description {
41
+ margin: 0;
42
+ margin-bottom: var(--entropix-spacing-4);
43
+ font-family: var(--entropix-text-body-md-font-family);
44
+ font-size: var(--entropix-text-body-md-font-size);
45
+ font-weight: var(--entropix-text-body-md-font-weight);
46
+ line-height: var(--entropix-text-body-md-line-height);
47
+ color: var(--entropix-color-text-secondary);
48
+ }
50
49
 
51
- .entropix-dialog-close {
52
- position: absolute;
53
- top: var(--entropix-spacing-3);
54
- right: var(--entropix-spacing-3);
55
- display: inline-flex;
56
- align-items: center;
57
- justify-content: center;
58
- width: 32px;
59
- height: 32px;
60
- padding: 0;
61
- border: none;
62
- border-radius: var(--entropix-radius-sm);
63
- background: transparent;
64
- color: var(--entropix-color-text-secondary);
65
- cursor: pointer;
66
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
67
- }
50
+ .entropix-dialog-close {
51
+ position: absolute;
52
+ top: var(--entropix-spacing-3);
53
+ right: var(--entropix-spacing-3);
54
+ display: inline-flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ width: 32px;
58
+ height: 32px;
59
+ padding: 0;
60
+ border: none;
61
+ border-radius: var(--entropix-radius-sm);
62
+ background: transparent;
63
+ color: var(--entropix-color-text-secondary);
64
+ cursor: pointer;
65
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
66
+ }
68
67
 
69
- .entropix-dialog-close:hover {
70
- background: var(--entropix-color-action-secondary-default);
71
- }
68
+ .entropix-dialog-close:hover {
69
+ background: var(--entropix-color-action-secondary-default);
70
+ }
72
71
 
73
- .entropix-dialog-close:focus-visible {
74
- outline: 2px solid var(--entropix-color-border-focus);
75
- outline-offset: 2px;
76
- }
72
+ .entropix-dialog-close:focus-visible {
73
+ outline: 2px solid var(--entropix-color-border-focus);
74
+ outline-offset: 2px;
75
+ }
77
76
 
78
- .entropix-dialog-trigger {
79
- /* Inherits button styles if also .entropix-button */
80
- }
77
+ .entropix-dialog-trigger {
78
+ /* Inherits button styles if also .entropix-button */
79
+ }
81
80
 
82
- /* === Responsive — Full-width bottom sheet on mobile === */
81
+ /* === Responsive — Full-width bottom sheet on mobile === */
83
82
 
84
- @media (max-width: 767px) {
85
- .entropix-dialog-content {
86
- top: auto;
87
- bottom: 0;
88
- left: 0;
89
- right: 0;
90
- transform: none;
91
- width: 100%;
92
- max-width: 100%;
93
- border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
94
- max-height: 90vh;
95
- padding: var(--entropix-spacing-5);
96
- }
83
+ @media (max-width: 767px) {
84
+ .entropix-dialog-content {
85
+ top: auto;
86
+ bottom: 0;
87
+ left: 0;
88
+ right: 0;
89
+ transform: none;
90
+ width: 100%;
91
+ max-width: 100%;
92
+ border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
93
+ max-height: 90vh;
94
+ padding: var(--entropix-spacing-5);
97
95
  }
96
+ }
98
97
 
99
- @media (min-width: 768px) {
100
- .entropix-dialog-content {
101
- max-width: 560px;
102
- }
98
+ @media (min-width: 768px) {
99
+ .entropix-dialog-content {
100
+ max-width: 560px;
103
101
  }
104
102
  }
package/dist/styles/index.css CHANGED
@@ -1,7 +1,5 @@
1
1
  /* Entropix Design System — All Component Styles */
2
2
 
3
- @layer entropix;
4
-
5
3
  @import "./button.css";
6
4
  @import "./toggle.css";
7
5
  @import "./switch.css";
package/dist/styles/input.css CHANGED
@@ -1,178 +1,176 @@
1
1
  /* Input & Textarea — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-input-wrapper {
5
- --input-border-color: var(--entropix-color-border-default);
6
- --input-border-radius: var(--entropix-radius-md);
7
- --input-bg: var(--entropix-color-bg-primary);
8
- --input-font-size: var(--entropix-font-size-sm);
9
- --input-padding-y: var(--entropix-spacing-2);
10
- --input-padding-x: var(--entropix-spacing-3);
11
- --input-focus-color: var(--entropix-color-border-focus);
12
- --input-error-color: var(--entropix-color-border-danger);
13
-
14
- display: flex;
15
- flex-direction: column;
16
- gap: var(--entropix-spacing-1);
17
- width: 100%;
18
- }
3
+ .entropix-input-wrapper {
4
+ --input-border-color: var(--entropix-color-border-default);
5
+ --input-border-radius: var(--entropix-radius-md);
6
+ --input-bg: var(--entropix-color-bg-primary);
7
+ --input-font-size: var(--entropix-font-size-sm);
8
+ --input-padding-y: var(--entropix-spacing-2);
9
+ --input-padding-x: var(--entropix-spacing-3);
10
+ --input-focus-color: var(--entropix-color-border-focus);
11
+ --input-error-color: var(--entropix-color-border-danger);
12
+
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: var(--entropix-spacing-1);
16
+ width: 100%;
17
+ }
19
18
 
20
- /* === Label === */
19
+ /* === Label === */
21
20
 
22
- .entropix-input-label {
23
- display: block;
24
- font-family: var(--entropix-font-family-sans);
25
- font-size: var(--entropix-font-size-sm);
26
- font-weight: var(--entropix-font-weight-medium);
27
- color: var(--entropix-color-text-primary);
28
- line-height: var(--entropix-line-height-normal);
29
- }
21
+ .entropix-input-label {
22
+ display: block;
23
+ font-family: var(--entropix-font-family-sans);
24
+ font-size: var(--entropix-font-size-sm);
25
+ font-weight: var(--entropix-font-weight-medium);
26
+ color: var(--entropix-color-text-primary);
27
+ line-height: var(--entropix-line-height-normal);
28
+ }
30
29
 
31
- .entropix-input-required {
32
- color: var(--entropix-color-text-danger);
33
- margin-left: var(--entropix-spacing-1);
34
- }
30
+ .entropix-input-required {
31
+ color: var(--entropix-color-text-danger);
32
+ margin-left: var(--entropix-spacing-1);
33
+ }
35
34
 
36
- /* === Shared Input / Textarea base === */
35
+ /* === Shared Input / Textarea base === */
36
+
37
+ .entropix-input,
38
+ .entropix-textarea {
39
+ display: block;
40
+ width: 100%;
41
+ border: 1px solid var(--input-border-color);
42
+ border-radius: var(--input-border-radius);
43
+ background: var(--input-bg);
44
+ color: var(--entropix-color-text-primary);
45
+ font-family: var(--entropix-font-family-sans);
46
+ font-size: var(--input-font-size);
47
+ line-height: var(--entropix-line-height-normal);
48
+ padding: var(--input-padding-y) var(--input-padding-x);
49
+ transition:
50
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
51
+ box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
52
+ background var(--entropix-duration-fast) var(--entropix-easing-default);
53
+ }
37
54
 
38
- .entropix-input,
39
- .entropix-textarea {
40
- display: block;
41
- width: 100%;
42
- border: 1px solid var(--input-border-color);
43
- border-radius: var(--input-border-radius);
44
- background: var(--input-bg);
45
- color: var(--entropix-color-text-primary);
46
- font-family: var(--entropix-font-family-sans);
47
- font-size: var(--input-font-size);
48
- line-height: var(--entropix-line-height-normal);
49
- padding: var(--input-padding-y) var(--input-padding-x);
50
- transition:
51
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
52
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
53
- background var(--entropix-duration-fast) var(--entropix-easing-default);
54
- }
55
+ .entropix-input::placeholder,
56
+ .entropix-textarea::placeholder {
57
+ color: var(--entropix-color-text-tertiary);
58
+ }
55
59
 
56
- .entropix-input::placeholder,
57
- .entropix-textarea::placeholder {
58
- color: var(--entropix-color-text-tertiary);
59
- }
60
+ /* === Focus === */
60
61
 
61
- /* === Focus === */
62
+ .entropix-input:focus,
63
+ .entropix-textarea:focus {
64
+ outline: none;
65
+ border-color: var(--input-focus-color);
66
+ box-shadow: 0 0 0 1px var(--input-focus-color);
67
+ }
62
68
 
63
- .entropix-input:focus,
64
- .entropix-textarea:focus {
65
- outline: none;
66
- border-color: var(--input-focus-color);
67
- box-shadow: 0 0 0 1px var(--input-focus-color);
68
- }
69
+ .entropix-input:focus-visible,
70
+ .entropix-textarea:focus-visible {
71
+ outline: 2px solid var(--input-focus-color);
72
+ outline-offset: 2px;
73
+ }
69
74
 
70
- .entropix-input:focus-visible,
71
- .entropix-textarea:focus-visible {
72
- outline: 2px solid var(--input-focus-color);
73
- outline-offset: 2px;
74
- }
75
+ /* === Hover === */
75
76
 
76
- /* === Hover === */
77
+ .entropix-input:hover:not(:disabled):not(:focus),
78
+ .entropix-textarea:hover:not(:disabled):not(:focus) {
79
+ border-color: var(--entropix-color-border-hover);
80
+ }
77
81
 
78
- .entropix-input:hover:not(:disabled):not(:focus),
79
- .entropix-textarea:hover:not(:disabled):not(:focus) {
80
- border-color: var(--entropix-color-border-hover);
81
- }
82
+ /* === Variants === */
82
83
 
83
- /* === Variants === */
84
+ .entropix-input[data-variant="filled"],
85
+ .entropix-textarea[data-variant="filled"] {
86
+ background: var(--entropix-color-bg-secondary);
87
+ border-color: transparent;
88
+ }
84
89
 
85
- .entropix-input[data-variant="filled"],
86
- .entropix-textarea[data-variant="filled"] {
87
- background: var(--entropix-color-bg-secondary);
88
- border-color: transparent;
89
- }
90
+ .entropix-input[data-variant="filled"]:focus,
91
+ .entropix-textarea[data-variant="filled"]:focus {
92
+ background: var(--input-bg);
93
+ border-color: var(--input-focus-color);
94
+ }
90
95
 
91
- .entropix-input[data-variant="filled"]:focus,
92
- .entropix-textarea[data-variant="filled"]:focus {
93
- background: var(--input-bg);
94
- border-color: var(--input-focus-color);
95
- }
96
+ /* === Sizes === */
96
97
 
97
- /* === Sizes === */
98
+ .entropix-input[data-size="sm"],
99
+ .entropix-textarea[data-size="sm"] {
100
+ padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
101
+ font-size: var(--entropix-font-size-xs);
102
+ border-radius: var(--entropix-radius-sm);
103
+ }
98
104
 
99
- .entropix-input[data-size="sm"],
100
- .entropix-textarea[data-size="sm"] {
101
- padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
102
- font-size: var(--entropix-font-size-xs);
103
- border-radius: var(--entropix-radius-sm);
104
- }
105
+ .entropix-input[data-size="md"],
106
+ .entropix-textarea[data-size="md"] {
107
+ padding: var(--input-padding-y) var(--input-padding-x);
108
+ font-size: var(--input-font-size);
109
+ }
105
110
 
106
- .entropix-input[data-size="md"],
107
- .entropix-textarea[data-size="md"] {
108
- padding: var(--input-padding-y) var(--input-padding-x);
109
- font-size: var(--input-font-size);
110
- }
111
+ .entropix-input[data-size="lg"],
112
+ .entropix-textarea[data-size="lg"] {
113
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
114
+ font-size: var(--entropix-font-size-base);
115
+ border-radius: var(--entropix-radius-lg);
116
+ }
111
117
 
112
- .entropix-input[data-size="lg"],
113
- .entropix-textarea[data-size="lg"] {
114
- padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
115
- font-size: var(--entropix-font-size-base);
116
- border-radius: var(--entropix-radius-lg);
117
- }
118
+ /* === States === */
118
119
 
119
- /* === States === */
120
+ .entropix-input[data-state="invalid"],
121
+ .entropix-textarea[data-state="invalid"] {
122
+ border-color: var(--input-error-color);
123
+ }
120
124
 
121
- .entropix-input[data-state="invalid"],
122
- .entropix-textarea[data-state="invalid"] {
123
- border-color: var(--input-error-color);
124
- }
125
+ .entropix-input[data-state="invalid"]:focus,
126
+ .entropix-textarea[data-state="invalid"]:focus {
127
+ border-color: var(--input-error-color);
128
+ box-shadow: 0 0 0 1px var(--input-error-color);
129
+ }
125
130
 
126
- .entropix-input[data-state="invalid"]:focus,
127
- .entropix-textarea[data-state="invalid"]:focus {
128
- border-color: var(--input-error-color);
129
- box-shadow: 0 0 0 1px var(--input-error-color);
130
- }
131
+ .entropix-input:disabled,
132
+ .entropix-textarea:disabled,
133
+ .entropix-input[data-state="disabled"],
134
+ .entropix-textarea[data-state="disabled"] {
135
+ opacity: 0.5;
136
+ cursor: not-allowed;
137
+ pointer-events: none;
138
+ }
131
139
 
132
- .entropix-input:disabled,
133
- .entropix-textarea:disabled,
134
- .entropix-input[data-state="disabled"],
135
- .entropix-textarea[data-state="disabled"] {
136
- opacity: 0.5;
137
- cursor: not-allowed;
138
- pointer-events: none;
139
- }
140
+ /* === Helper & Error text === */
140
141
 
141
- /* === Helper & Error text === */
142
+ .entropix-input-helper {
143
+ font-family: var(--entropix-font-family-sans);
144
+ font-size: var(--entropix-font-size-xs);
145
+ color: var(--entropix-color-text-secondary);
146
+ line-height: var(--entropix-line-height-normal);
147
+ }
142
148
 
143
- .entropix-input-helper {
144
- font-family: var(--entropix-font-family-sans);
145
- font-size: var(--entropix-font-size-xs);
146
- color: var(--entropix-color-text-secondary);
147
- line-height: var(--entropix-line-height-normal);
148
- }
149
+ .entropix-input-error {
150
+ font-family: var(--entropix-font-family-sans);
151
+ font-size: var(--entropix-font-size-xs);
152
+ color: var(--entropix-color-text-danger);
153
+ line-height: var(--entropix-line-height-normal);
154
+ }
149
155
 
150
- .entropix-input-error {
151
- font-family: var(--entropix-font-family-sans);
152
- font-size: var(--entropix-font-size-xs);
153
- color: var(--entropix-color-text-danger);
154
- line-height: var(--entropix-line-height-normal);
155
- }
156
+ /* === Textarea specific === */
156
157
 
157
- /* === Textarea specific === */
158
+ .entropix-textarea {
159
+ min-height: 80px;
160
+ }
161
+
162
+ /* === Responsive — Touch-friendly sizing on mobile === */
158
163
 
164
+ @media (max-width: 767px) {
165
+ .entropix-input,
159
166
  .entropix-textarea {
160
- min-height: 80px;
167
+ min-height: 44px;
168
+ font-size: var(--entropix-font-size-base);
161
169
  }
162
170
 
163
- /* === Responsive — Touch-friendly sizing on mobile === */
164
-
165
- @media (max-width: 767px) {
166
- .entropix-input,
167
- .entropix-textarea {
168
- min-height: 44px;
169
- font-size: var(--entropix-font-size-base);
170
- }
171
-
172
- .entropix-input[data-size="sm"],
173
- .entropix-textarea[data-size="sm"] {
174
- min-height: 36px;
175
- font-size: var(--entropix-font-size-sm);
176
- }
171
+ .entropix-input[data-size="sm"],
172
+ .entropix-textarea[data-size="sm"] {
173
+ min-height: 36px;
174
+ font-size: var(--entropix-font-size-sm);
177
175
  }
178
176
  }