@entropix/react 0.2.0 → 0.3.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 (16) hide show
  1. package/dist/index.css +1015 -970
  2. package/dist/index.css.map +1 -1
  3. package/dist/styles/accordion.css +56 -54
  4. package/dist/styles/button.css +115 -113
  5. package/dist/styles/checkbox.css +101 -93
  6. package/dist/styles/dialog.css +88 -86
  7. package/dist/styles/index.css +3 -0
  8. package/dist/styles/input.css +144 -133
  9. package/dist/styles/layout.css +105 -103
  10. package/dist/styles/menu.css +51 -49
  11. package/dist/styles/radio.css +105 -98
  12. package/dist/styles/select.css +125 -120
  13. package/dist/styles/switch.css +44 -42
  14. package/dist/styles/tabs.css +70 -68
  15. package/dist/styles/toggle.css +40 -38
  16. package/package.json +2 -2
package/dist/styles/checkbox.css CHANGED
@@ -1,113 +1,121 @@
1
1
  /* Checkbox — @entropix/react */
2
2
 
3
- .entropix-checkbox {
4
- display: inline-flex;
5
- align-items: center;
6
- gap: var(--entropix-spacing-2);
7
- padding: var(--entropix-spacing-1) 0;
8
- border: none;
9
- background: transparent;
10
- cursor: pointer;
11
- user-select: none;
12
- font-family: var(--entropix-font-family-sans);
13
- font-size: var(--entropix-font-size-sm);
14
- color: var(--entropix-color-text-primary);
15
- line-height: var(--entropix-line-height-normal);
16
- }
17
-
18
- /* === Indicator === */
19
-
20
- .entropix-checkbox__indicator {
21
- display: inline-flex;
22
- align-items: center;
23
- justify-content: center;
24
- width: 18px;
25
- height: 18px;
26
- border: 2px solid var(--entropix-color-border-default);
27
- border-radius: var(--entropix-radius-sm);
28
- background: var(--entropix-color-bg-primary);
29
- flex-shrink: 0;
30
- transition:
31
- background var(--entropix-duration-fast) var(--entropix-easing-default),
32
- border-color var(--entropix-duration-fast) var(--entropix-easing-default);
33
- }
3
+ @layer entropix {
4
+ .entropix-checkbox {
5
+ --checkbox-size: 18px;
6
+ --checkbox-border-color: var(--entropix-color-border-default);
7
+ --checkbox-checked-bg: var(--entropix-color-action-primary-default);
8
+ --checkbox-checked-border: var(--entropix-color-action-primary-default);
9
+ --checkbox-border-radius: var(--entropix-radius-sm);
10
+
11
+ display: inline-flex;
12
+ align-items: center;
13
+ gap: var(--entropix-spacing-2);
14
+ padding: var(--entropix-spacing-1) 0;
15
+ border: none;
16
+ background: transparent;
17
+ cursor: pointer;
18
+ user-select: none;
19
+ font-family: var(--entropix-font-family-sans);
20
+ font-size: var(--entropix-font-size-sm);
21
+ color: var(--entropix-color-text-primary);
22
+ line-height: var(--entropix-line-height-normal);
23
+ }
34
24
 
35
- .entropix-checkbox__indicator[data-state="checked"],
36
- .entropix-checkbox__indicator[data-state="indeterminate"] {
37
- background: var(--entropix-color-action-primary-default);
38
- border-color: var(--entropix-color-action-primary-default);
39
- }
25
+ /* === Indicator === */
40
26
 
41
- /* Checkmark via ::after pseudo-element */
42
- .entropix-checkbox__indicator[data-state="checked"]::after {
43
- content: "";
44
- display: block;
45
- width: 5px;
46
- height: 9px;
47
- border: solid var(--entropix-color-text-inverse);
48
- border-width: 0 2px 2px 0;
49
- transform: rotate(45deg);
50
- margin-top: -1px;
51
- }
27
+ .entropix-checkbox__indicator {
28
+ display: inline-flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ width: var(--checkbox-size);
32
+ height: var(--checkbox-size);
33
+ border: 2px solid var(--checkbox-border-color);
34
+ border-radius: var(--checkbox-border-radius);
35
+ background: var(--entropix-color-bg-primary);
36
+ flex-shrink: 0;
37
+ transition:
38
+ background var(--entropix-duration-fast) var(--entropix-easing-default),
39
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default);
40
+ }
52
41
 
53
- /* Indeterminate minus via ::after pseudo-element */
54
- .entropix-checkbox__indicator[data-state="indeterminate"]::after {
55
- content: "";
56
- display: block;
57
- width: 8px;
58
- height: 2px;
59
- background: var(--entropix-color-text-inverse);
60
- border-radius: 1px;
61
- }
42
+ .entropix-checkbox__indicator[data-state="checked"],
43
+ .entropix-checkbox__indicator[data-state="indeterminate"] {
44
+ background: var(--checkbox-checked-bg);
45
+ border-color: var(--checkbox-checked-border);
46
+ }
62
47
 
63
- /* === Label === */
48
+ /* Checkmark via ::after pseudo-element */
49
+ .entropix-checkbox__indicator[data-state="checked"]::after {
50
+ content: "";
51
+ display: block;
52
+ width: 5px;
53
+ height: 9px;
54
+ border: solid var(--entropix-color-text-inverse);
55
+ border-width: 0 2px 2px 0;
56
+ transform: rotate(45deg);
57
+ margin-top: -1px;
58
+ }
64
59
 
65
- .entropix-checkbox__label {
66
- font-family: var(--entropix-font-family-sans);
67
- font-size: var(--entropix-font-size-sm);
68
- color: var(--entropix-color-text-primary);
69
- line-height: var(--entropix-line-height-normal);
70
- }
60
+ /* Indeterminate minus via ::after pseudo-element */
61
+ .entropix-checkbox__indicator[data-state="indeterminate"]::after {
62
+ content: "";
63
+ display: block;
64
+ width: 8px;
65
+ height: 2px;
66
+ background: var(--entropix-color-text-inverse);
67
+ border-radius: 1px;
68
+ }
71
69
 
72
- /* === Hover === */
70
+ /* === Label === */
73
71
 
74
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
75
- border-color: var(--entropix-color-border-hover);
76
- }
72
+ .entropix-checkbox__label {
73
+ font-family: var(--entropix-font-family-sans);
74
+ font-size: var(--entropix-font-size-sm);
75
+ color: var(--entropix-color-text-primary);
76
+ line-height: var(--entropix-line-height-normal);
77
+ }
77
78
 
78
- .entropix-checkbox:hover:not(:disabled)
79
- .entropix-checkbox__indicator[data-state="checked"],
80
- .entropix-checkbox:hover:not(:disabled)
81
- .entropix-checkbox__indicator[data-state="indeterminate"] {
82
- background: var(--entropix-color-action-primary-hover);
83
- border-color: var(--entropix-color-action-primary-hover);
84
- }
79
+ /* === Hover === */
85
80
 
86
- /* === Focus === */
81
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
82
+ border-color: var(--entropix-color-border-hover);
83
+ }
87
84
 
88
- .entropix-checkbox:focus-visible {
89
- outline: 2px solid var(--entropix-color-border-focus);
90
- outline-offset: 2px;
91
- border-radius: var(--entropix-radius-sm);
92
- }
85
+ .entropix-checkbox:hover:not(:disabled)
86
+ .entropix-checkbox__indicator[data-state="checked"],
87
+ .entropix-checkbox:hover:not(:disabled)
88
+ .entropix-checkbox__indicator[data-state="indeterminate"] {
89
+ background: var(--entropix-color-action-primary-hover);
90
+ border-color: var(--entropix-color-action-primary-hover);
91
+ }
93
92
 
94
- /* === Disabled === */
93
+ /* === Focus === */
95
94
 
96
- .entropix-checkbox:disabled {
97
- opacity: 0.5;
98
- cursor: not-allowed;
99
- pointer-events: none;
100
- }
95
+ .entropix-checkbox:focus-visible {
96
+ outline: 2px solid var(--entropix-color-border-focus);
97
+ outline-offset: 2px;
98
+ border-radius: var(--checkbox-border-radius);
99
+ }
101
100
 
102
- /* === Responsive — Touch-friendly sizing on mobile === */
101
+ /* === Disabled === */
103
102
 
104
- @media (max-width: 767px) {
105
- .entropix-checkbox {
106
- min-height: 44px;
103
+ .entropix-checkbox:disabled {
104
+ opacity: 0.5;
105
+ cursor: not-allowed;
106
+ pointer-events: none;
107
107
  }
108
108
 
109
- .entropix-checkbox__indicator {
110
- width: 22px;
111
- height: 22px;
109
+ /* === Responsive — Touch-friendly sizing on mobile === */
110
+
111
+ @media (max-width: 767px) {
112
+ .entropix-checkbox {
113
+ min-height: 44px;
114
+ }
115
+
116
+ .entropix-checkbox__indicator {
117
+ width: 22px;
118
+ height: 22px;
119
+ }
112
120
  }
113
121
  }
package/dist/styles/dialog.css CHANGED
@@ -1,102 +1,104 @@
1
1
  /* Dialog — @entropix/react */
2
2
 
3
- .entropix-dialog-overlay {
4
- position: fixed;
5
- inset: 0;
6
- background: rgba(0, 0, 0, 0.5);
7
- z-index: 50;
8
- }
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
+ }
9
10
 
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
- }
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
+ }
25
26
 
26
- .entropix-dialog-content:focus {
27
- outline: none;
28
- }
27
+ .entropix-dialog-content:focus {
28
+ outline: none;
29
+ }
29
30
 
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
- }
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
+ }
39
40
 
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
- }
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
+ }
49
50
 
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
- }
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
+ }
67
68
 
68
- .entropix-dialog-close:hover {
69
- background: var(--entropix-color-action-secondary-default);
70
- }
69
+ .entropix-dialog-close:hover {
70
+ background: var(--entropix-color-action-secondary-default);
71
+ }
71
72
 
72
- .entropix-dialog-close:focus-visible {
73
- outline: 2px solid var(--entropix-color-border-focus);
74
- outline-offset: 2px;
75
- }
73
+ .entropix-dialog-close:focus-visible {
74
+ outline: 2px solid var(--entropix-color-border-focus);
75
+ outline-offset: 2px;
76
+ }
76
77
 
77
- .entropix-dialog-trigger {
78
- /* Inherits button styles if also .entropix-button */
79
- }
78
+ .entropix-dialog-trigger {
79
+ /* Inherits button styles if also .entropix-button */
80
+ }
80
81
 
81
- /* === Responsive — Full-width bottom sheet on mobile === */
82
+ /* === Responsive — Full-width bottom sheet on mobile === */
82
83
 
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);
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
+ }
95
97
  }
96
- }
97
98
 
98
- @media (min-width: 768px) {
99
- .entropix-dialog-content {
100
- max-width: 560px;
99
+ @media (min-width: 768px) {
100
+ .entropix-dialog-content {
101
+ max-width: 560px;
102
+ }
101
103
  }
102
104
  }
package/dist/styles/index.css CHANGED
@@ -1,5 +1,7 @@
1
1
  /* Entropix Design System — All Component Styles */
2
2
 
3
+ @layer entropix;
4
+
3
5
  @import "./button.css";
4
6
  @import "./toggle.css";
5
7
  @import "./switch.css";
@@ -11,3 +13,4 @@
11
13
  @import "./checkbox.css";
12
14
  @import "./radio.css";
13
15
  @import "./select.css";
16
+ @import "./layout.css";