@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/select.css CHANGED
@@ -1,150 +1,148 @@
1
1
  /* Select — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-select {
5
- --select-border-color: var(--entropix-color-border-default);
6
- --select-border-radius: var(--entropix-radius-md);
7
- --select-bg: var(--entropix-color-bg-primary);
8
- --select-dropdown-shadow: var(--entropix-shadow-lg);
9
-
10
- display: flex;
11
- flex-direction: column;
12
- gap: var(--entropix-spacing-1);
13
- position: relative;
14
- width: 100%;
15
- }
3
+ .entropix-select {
4
+ --select-border-color: var(--entropix-color-border-default);
5
+ --select-border-radius: var(--entropix-radius-md);
6
+ --select-bg: var(--entropix-color-bg-primary);
7
+ --select-dropdown-shadow: var(--entropix-shadow-lg);
8
+
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: var(--entropix-spacing-1);
12
+ position: relative;
13
+ width: 100%;
14
+ }
16
15
 
17
- /* === Label === */
16
+ /* === Label === */
18
17
 
19
- .entropix-select-label {
20
- display: block;
21
- font-family: var(--entropix-font-family-sans);
22
- font-size: var(--entropix-font-size-sm);
23
- font-weight: var(--entropix-font-weight-medium);
24
- color: var(--entropix-color-text-primary);
25
- line-height: var(--entropix-line-height-normal);
26
- }
18
+ .entropix-select-label {
19
+ display: block;
20
+ font-family: var(--entropix-font-family-sans);
21
+ font-size: var(--entropix-font-size-sm);
22
+ font-weight: var(--entropix-font-weight-medium);
23
+ color: var(--entropix-color-text-primary);
24
+ line-height: var(--entropix-line-height-normal);
25
+ }
27
26
 
28
- /* === Trigger === */
27
+ /* === Trigger === */
28
+
29
+ .entropix-select-trigger {
30
+ display: inline-flex;
31
+ align-items: center;
32
+ justify-content: space-between;
33
+ gap: var(--entropix-spacing-2);
34
+ width: 100%;
35
+ border: 1px solid var(--select-border-color);
36
+ border-radius: var(--select-border-radius);
37
+ background: var(--select-bg);
38
+ color: var(--entropix-color-text-primary);
39
+ font-family: var(--entropix-font-family-sans);
40
+ font-size: var(--entropix-font-size-sm);
41
+ line-height: var(--entropix-line-height-normal);
42
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
43
+ cursor: pointer;
44
+ user-select: none;
45
+ text-align: left;
46
+ transition:
47
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
48
+ box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
49
+ }
29
50
 
30
- .entropix-select-trigger {
31
- display: inline-flex;
32
- align-items: center;
33
- justify-content: space-between;
34
- gap: var(--entropix-spacing-2);
35
- width: 100%;
36
- border: 1px solid var(--select-border-color);
37
- border-radius: var(--select-border-radius);
38
- background: var(--select-bg);
39
- color: var(--entropix-color-text-primary);
40
- font-family: var(--entropix-font-family-sans);
41
- font-size: var(--entropix-font-size-sm);
42
- line-height: var(--entropix-line-height-normal);
43
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
44
- cursor: pointer;
45
- user-select: none;
46
- text-align: left;
47
- transition:
48
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
49
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
50
- }
51
+ .entropix-select-trigger__value {
52
+ flex: 1;
53
+ overflow: hidden;
54
+ text-overflow: ellipsis;
55
+ white-space: nowrap;
56
+ }
51
57
 
52
- .entropix-select-trigger__value {
53
- flex: 1;
54
- overflow: hidden;
55
- text-overflow: ellipsis;
56
- white-space: nowrap;
57
- }
58
+ .entropix-select-trigger__chevron {
59
+ flex-shrink: 0;
60
+ font-size: var(--entropix-font-size-xs);
61
+ color: var(--entropix-color-text-secondary);
62
+ line-height: 1;
63
+ }
58
64
 
59
- .entropix-select-trigger__chevron {
60
- flex-shrink: 0;
61
- font-size: var(--entropix-font-size-xs);
62
- color: var(--entropix-color-text-secondary);
63
- line-height: 1;
64
- }
65
+ /* === Trigger Hover === */
65
66
 
66
- /* === Trigger Hover === */
67
+ .entropix-select-trigger:hover:not(:disabled) {
68
+ border-color: var(--entropix-color-border-hover);
69
+ }
67
70
 
68
- .entropix-select-trigger:hover:not(:disabled) {
69
- border-color: var(--entropix-color-border-hover);
70
- }
71
+ /* === Trigger Focus === */
71
72
 
72
- /* === Trigger Focus === */
73
+ .entropix-select-trigger:focus-visible {
74
+ outline: 2px solid var(--entropix-color-border-focus);
75
+ outline-offset: 2px;
76
+ }
73
77
 
74
- .entropix-select-trigger:focus-visible {
75
- outline: 2px solid var(--entropix-color-border-focus);
76
- outline-offset: 2px;
77
- }
78
+ /* === Trigger Disabled === */
78
79
 
79
- /* === Trigger Disabled === */
80
+ .entropix-select-trigger:disabled {
81
+ opacity: 0.5;
82
+ cursor: not-allowed;
83
+ pointer-events: none;
84
+ }
80
85
 
81
- .entropix-select-trigger:disabled {
82
- opacity: 0.5;
83
- cursor: not-allowed;
84
- pointer-events: none;
85
- }
86
+ /* === Content (Dropdown) === */
87
+
88
+ .entropix-select-content {
89
+ position: absolute;
90
+ top: 100%;
91
+ left: 0;
92
+ right: 0;
93
+ z-index: 50;
94
+ margin-top: var(--entropix-spacing-1);
95
+ border: 1px solid var(--select-border-color);
96
+ border-radius: var(--select-border-radius);
97
+ background: var(--select-bg);
98
+ box-shadow: var(--select-dropdown-shadow);
99
+ padding: var(--entropix-spacing-1) 0;
100
+ max-height: 240px;
101
+ overflow-y: auto;
102
+ }
86
103
 
87
- /* === Content (Dropdown) === */
88
-
89
- .entropix-select-content {
90
- position: absolute;
91
- top: 100%;
92
- left: 0;
93
- right: 0;
94
- z-index: 50;
95
- margin-top: var(--entropix-spacing-1);
96
- border: 1px solid var(--select-border-color);
97
- border-radius: var(--select-border-radius);
98
- background: var(--select-bg);
99
- box-shadow: var(--select-dropdown-shadow);
100
- padding: var(--entropix-spacing-1) 0;
101
- max-height: 240px;
102
- overflow-y: auto;
103
- }
104
+ /* === Option === */
105
+
106
+ .entropix-select-option {
107
+ display: flex;
108
+ align-items: center;
109
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
110
+ font-family: var(--entropix-font-family-sans);
111
+ font-size: var(--entropix-font-size-sm);
112
+ color: var(--entropix-color-text-primary);
113
+ line-height: var(--entropix-line-height-normal);
114
+ cursor: pointer;
115
+ user-select: none;
116
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
117
+ }
104
118
 
105
- /* === Option === */
119
+ .entropix-select-option:hover:not([data-disabled]) {
120
+ background: var(--entropix-color-action-secondary-hover);
121
+ }
106
122
 
107
- .entropix-select-option {
108
- display: flex;
109
- align-items: center;
110
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
111
- font-family: var(--entropix-font-family-sans);
112
- font-size: var(--entropix-font-size-sm);
113
- color: var(--entropix-color-text-primary);
114
- line-height: var(--entropix-line-height-normal);
115
- cursor: pointer;
116
- user-select: none;
117
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
118
- }
123
+ .entropix-select-option[data-state="selected"] {
124
+ background: var(--entropix-color-action-secondary-default);
125
+ font-weight: var(--entropix-font-weight-medium);
126
+ }
119
127
 
120
- .entropix-select-option:hover:not([data-disabled]) {
121
- background: var(--entropix-color-action-secondary-hover);
122
- }
128
+ .entropix-select-option[data-state="selected"]:hover {
129
+ background: var(--entropix-color-action-secondary-hover);
130
+ }
123
131
 
124
- .entropix-select-option[data-state="selected"] {
125
- background: var(--entropix-color-action-secondary-default);
126
- font-weight: var(--entropix-font-weight-medium);
127
- }
132
+ .entropix-select-option[data-disabled] {
133
+ opacity: 0.5;
134
+ cursor: not-allowed;
135
+ pointer-events: none;
136
+ }
128
137
 
129
- .entropix-select-option[data-state="selected"]:hover {
130
- background: var(--entropix-color-action-secondary-hover);
131
- }
138
+ /* === Responsive — Touch-friendly sizing on mobile === */
132
139
 
133
- .entropix-select-option[data-disabled] {
134
- opacity: 0.5;
135
- cursor: not-allowed;
136
- pointer-events: none;
140
+ @media (max-width: 767px) {
141
+ .entropix-select-trigger {
142
+ min-height: 44px;
137
143
  }
138
144
 
139
- /* === Responsive — Touch-friendly sizing on mobile === */
140
-
141
- @media (max-width: 767px) {
142
- .entropix-select-trigger {
143
- min-height: 44px;
144
- }
145
-
146
- .entropix-select-option {
147
- min-height: 44px;
148
- }
145
+ .entropix-select-option {
146
+ min-height: 44px;
149
147
  }
150
148
  }
package/dist/styles/switch.css CHANGED
@@ -1,52 +1,53 @@
1
1
  /* Switch — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-switch {
5
- position: relative;
6
- display: inline-flex;
7
- align-items: center;
8
- width: 44px;
9
- height: 24px;
10
- padding: 2px;
11
- border: none;
12
- border-radius: var(--entropix-radius-full);
13
- background: var(--entropix-color-gray-300);
14
- cursor: pointer;
15
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
16
- }
3
+ .entropix-switch {
4
+ position: relative;
5
+ display: inline-flex;
6
+ align-items: center;
7
+ width: 44px;
8
+ height: 24px;
9
+ padding: 2px;
10
+ border: none;
11
+ border-radius: var(--entropix-radius-full);
12
+ background: var(--entropix-color-gray-300);
13
+ cursor: pointer;
14
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
15
+ font-size: 0;
16
+ color: transparent;
17
+ overflow: hidden;
18
+ }
17
19
 
18
- .entropix-switch::after {
19
- content: "";
20
- display: block;
21
- width: 20px;
22
- height: 20px;
23
- border-radius: var(--entropix-radius-full);
24
- background: var(--entropix-color-white);
25
- box-shadow: var(--entropix-shadow-sm);
26
- transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
27
- }
20
+ .entropix-switch::after {
21
+ content: "";
22
+ display: block;
23
+ width: 20px;
24
+ height: 20px;
25
+ border-radius: var(--entropix-radius-full);
26
+ background: var(--entropix-color-white);
27
+ box-shadow: var(--entropix-shadow-sm);
28
+ transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
29
+ }
28
30
 
29
- .entropix-switch[data-state="checked"] {
30
- background: var(--entropix-color-action-primary-default);
31
- }
32
- .entropix-switch[data-state="checked"]::after {
33
- transform: translateX(20px);
34
- }
31
+ .entropix-switch[data-state="checked"] {
32
+ background: var(--entropix-color-action-primary-default);
33
+ }
34
+ .entropix-switch[data-state="checked"]::after {
35
+ transform: translateX(20px);
36
+ }
35
37
 
36
- .entropix-switch:hover:not(:disabled) {
37
- background: var(--entropix-color-gray-400);
38
- }
39
- .entropix-switch[data-state="checked"]:hover:not(:disabled) {
40
- background: var(--entropix-color-action-primary-hover);
41
- }
38
+ .entropix-switch:hover:not(:disabled) {
39
+ background: var(--entropix-color-gray-400);
40
+ }
41
+ .entropix-switch[data-state="checked"]:hover:not(:disabled) {
42
+ background: var(--entropix-color-action-primary-hover);
43
+ }
42
44
 
43
- .entropix-switch:disabled {
44
- opacity: 0.5;
45
- cursor: not-allowed;
46
- }
45
+ .entropix-switch:disabled {
46
+ opacity: 0.5;
47
+ cursor: not-allowed;
48
+ }
47
49
 
48
- .entropix-switch:focus-visible {
49
- outline: 2px solid var(--entropix-color-border-focus);
50
- outline-offset: 2px;
51
- }
50
+ .entropix-switch:focus-visible {
51
+ outline: 2px solid var(--entropix-color-border-focus);
52
+ outline-offset: 2px;
52
53
  }
package/dist/styles/tabs.css CHANGED
@@ -1,86 +1,84 @@
1
1
  /* Tabs — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-tabs {
5
- display: flex;
6
- flex-direction: column;
7
- }
3
+ .entropix-tabs {
4
+ display: flex;
5
+ flex-direction: column;
6
+ }
8
7
 
9
- .entropix-tablist {
10
- display: flex;
11
- gap: var(--entropix-spacing-1);
12
- border-bottom: 1px solid var(--entropix-color-border-default);
13
- }
14
- .entropix-tablist[data-orientation="vertical"] {
15
- flex-direction: column;
16
- border-bottom: none;
17
- border-right: 1px solid var(--entropix-color-border-default);
18
- }
8
+ .entropix-tablist {
9
+ display: flex;
10
+ gap: var(--entropix-spacing-1);
11
+ border-bottom: 1px solid var(--entropix-color-border-default);
12
+ }
13
+ .entropix-tablist[data-orientation="vertical"] {
14
+ flex-direction: column;
15
+ border-bottom: none;
16
+ border-right: 1px solid var(--entropix-color-border-default);
17
+ }
19
18
 
20
- .entropix-tab {
21
- display: inline-flex;
22
- align-items: center;
23
- justify-content: center;
24
- padding: var(--entropix-spacing-2) var(--entropix-spacing-4);
25
- border: none;
26
- border-bottom: 2px solid transparent;
27
- background: transparent;
28
- font-family: var(--entropix-font-family-sans);
29
- font-size: var(--entropix-font-size-sm);
30
- font-weight: var(--entropix-font-weight-medium);
31
- color: var(--entropix-color-text-secondary);
32
- cursor: pointer;
33
- transition:
34
- color var(--entropix-duration-fast) var(--entropix-easing-default),
35
- border-color var(--entropix-duration-fast) var(--entropix-easing-default);
36
- }
19
+ .entropix-tab {
20
+ display: inline-flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-4);
24
+ border: none;
25
+ border-bottom: 2px solid transparent;
26
+ background: transparent;
27
+ font-family: var(--entropix-font-family-sans);
28
+ font-size: var(--entropix-font-size-sm);
29
+ font-weight: var(--entropix-font-weight-medium);
30
+ color: var(--entropix-color-text-secondary);
31
+ cursor: pointer;
32
+ transition:
33
+ color var(--entropix-duration-fast) var(--entropix-easing-default),
34
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default);
35
+ }
37
36
 
38
- .entropix-tab:hover:not(:disabled) {
39
- color: var(--entropix-color-text-primary);
40
- }
37
+ .entropix-tab:hover:not(:disabled) {
38
+ color: var(--entropix-color-text-primary);
39
+ }
41
40
 
42
- .entropix-tab[data-state="active"] {
43
- color: var(--entropix-color-action-primary-default);
44
- border-bottom-color: var(--entropix-color-action-primary-default);
45
- }
41
+ .entropix-tab[data-state="active"] {
42
+ color: var(--entropix-color-action-primary-default);
43
+ border-bottom-color: var(--entropix-color-action-primary-default);
44
+ }
46
45
 
47
- .entropix-tab:disabled,
48
- .entropix-tab[aria-disabled="true"] {
49
- opacity: 0.5;
50
- cursor: not-allowed;
51
- }
46
+ .entropix-tab:disabled,
47
+ .entropix-tab[aria-disabled="true"] {
48
+ opacity: 0.5;
49
+ cursor: not-allowed;
50
+ }
52
51
 
53
- .entropix-tab:focus-visible {
54
- outline: 2px solid var(--entropix-color-border-focus);
55
- outline-offset: -2px;
56
- border-radius: var(--entropix-radius-sm);
57
- }
52
+ .entropix-tab:focus-visible {
53
+ outline: 2px solid var(--entropix-color-border-focus);
54
+ outline-offset: -2px;
55
+ border-radius: var(--entropix-radius-sm);
56
+ }
58
57
 
59
- .entropix-tabpanel {
60
- padding: var(--entropix-spacing-4);
61
- }
58
+ .entropix-tabpanel {
59
+ padding: var(--entropix-spacing-4);
60
+ }
62
61
 
63
- /* === Responsive — Scrollable tabs on mobile === */
62
+ /* === Responsive — Scrollable tabs on mobile === */
64
63
 
65
- @media (max-width: 767px) {
66
- .entropix-tablist {
67
- overflow-x: auto;
68
- -webkit-overflow-scrolling: touch;
69
- scrollbar-width: none;
70
- -ms-overflow-style: none;
71
- }
64
+ @media (max-width: 767px) {
65
+ .entropix-tablist {
66
+ overflow-x: auto;
67
+ -webkit-overflow-scrolling: touch;
68
+ scrollbar-width: none;
69
+ -ms-overflow-style: none;
70
+ }
72
71
 
73
- .entropix-tablist::-webkit-scrollbar {
74
- display: none;
75
- }
72
+ .entropix-tablist::-webkit-scrollbar {
73
+ display: none;
74
+ }
76
75
 
77
- .entropix-tab {
78
- white-space: nowrap;
79
- flex-shrink: 0;
80
- }
76
+ .entropix-tab {
77
+ white-space: nowrap;
78
+ flex-shrink: 0;
79
+ }
81
80
 
82
- .entropix-tabpanel {
83
- padding: var(--entropix-spacing-3);
84
- }
81
+ .entropix-tabpanel {
82
+ padding: var(--entropix-spacing-3);
85
83
  }
86
84
  }
package/dist/styles/toggle.css CHANGED
@@ -1,47 +1,45 @@
1
1
  /* Toggle (checkbox) — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-toggle {
5
- display: inline-flex;
6
- align-items: center;
7
- justify-content: center;
8
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
9
- border: 1px solid var(--entropix-color-border-default);
10
- border-radius: var(--entropix-radius-md);
11
- background: var(--entropix-color-bg-primary);
12
- color: var(--entropix-color-text-primary);
13
- font-family: var(--entropix-font-family-sans);
14
- font-size: var(--entropix-font-size-sm);
15
- font-weight: var(--entropix-font-weight-medium);
16
- cursor: pointer;
17
- user-select: none;
18
- transition:
19
- background var(--entropix-duration-fast) var(--entropix-easing-default),
20
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
21
- color var(--entropix-duration-fast) var(--entropix-easing-default);
22
- }
3
+ .entropix-toggle {
4
+ display: inline-flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
8
+ border: 1px solid var(--entropix-color-border-default);
9
+ border-radius: var(--entropix-radius-md);
10
+ background: var(--entropix-color-bg-primary);
11
+ color: var(--entropix-color-text-primary);
12
+ font-family: var(--entropix-font-family-sans);
13
+ font-size: var(--entropix-font-size-sm);
14
+ font-weight: var(--entropix-font-weight-medium);
15
+ cursor: pointer;
16
+ user-select: none;
17
+ transition:
18
+ background var(--entropix-duration-fast) var(--entropix-easing-default),
19
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default),
20
+ color var(--entropix-duration-fast) var(--entropix-easing-default);
21
+ }
23
22
 
24
- .entropix-toggle:hover:not(:disabled) {
25
- background: var(--entropix-color-action-secondary-hover);
26
- }
23
+ .entropix-toggle:hover:not(:disabled) {
24
+ background: var(--entropix-color-action-secondary-hover);
25
+ }
27
26
 
28
- .entropix-toggle[data-state="checked"] {
29
- background: var(--entropix-color-action-primary-default);
30
- color: var(--entropix-color-text-inverse);
31
- border-color: transparent;
32
- }
33
- .entropix-toggle[data-state="checked"]:hover:not(:disabled) {
34
- background: var(--entropix-color-action-primary-hover);
35
- }
27
+ .entropix-toggle[data-state="checked"] {
28
+ background: var(--entropix-color-action-primary-default);
29
+ color: var(--entropix-color-text-inverse);
30
+ border-color: transparent;
31
+ }
32
+ .entropix-toggle[data-state="checked"]:hover:not(:disabled) {
33
+ background: var(--entropix-color-action-primary-hover);
34
+ }
36
35
 
37
- .entropix-toggle:disabled {
38
- opacity: 0.5;
39
- cursor: not-allowed;
40
- pointer-events: none;
41
- }
36
+ .entropix-toggle:disabled {
37
+ opacity: 0.5;
38
+ cursor: not-allowed;
39
+ pointer-events: none;
40
+ }
42
41
 
43
- .entropix-toggle:focus-visible {
44
- outline: 2px solid var(--entropix-color-border-focus);
45
- outline-offset: 2px;
46
- }
42
+ .entropix-toggle:focus-visible {
43
+ outline: 2px solid var(--entropix-color-border-focus);
44
+ outline-offset: 2px;
47
45
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entropix/react",
3
- "version": "0.3.0",
3
+ "version": "1.0.0",
4
4
  "description": "React (Web) components for the Entropix design system — styled with CSS custom properties and design tokens",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -51,7 +51,7 @@
51
51
  "dist"
52
52
  ],
53
53
  "dependencies": {
54
- "@entropix/core": "0.3.0"
54
+ "@entropix/core": "1.0.0"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "react": "^18.0.0 || ^19.0.0",