@entropix/react 0.1.1 → 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 (22) hide show
  1. package/dist/index.cjs +468 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1043 -588
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +183 -2
  6. package/dist/index.d.ts +183 -2
  7. package/dist/index.js +462 -4
  8. package/dist/index.js.map +1 -1
  9. package/dist/styles/accordion.css +56 -54
  10. package/dist/styles/button.css +115 -113
  11. package/dist/styles/checkbox.css +121 -0
  12. package/dist/styles/dialog.css +88 -86
  13. package/dist/styles/index.css +7 -0
  14. package/dist/styles/input.css +178 -0
  15. package/dist/styles/layout.css +105 -103
  16. package/dist/styles/menu.css +51 -49
  17. package/dist/styles/radio.css +130 -0
  18. package/dist/styles/select.css +150 -0
  19. package/dist/styles/switch.css +44 -42
  20. package/dist/styles/tabs.css +70 -68
  21. package/dist/styles/toggle.css +40 -38
  22. package/package.json +4 -4
package/dist/styles/select.css ADDED
@@ -0,0 +1,150 @@
1
+ /* Select — @entropix/react */
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
+ }
16
+
17
+ /* === Label === */
18
+
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
+ }
27
+
28
+ /* === Trigger === */
29
+
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
+
52
+ .entropix-select-trigger__value {
53
+ flex: 1;
54
+ overflow: hidden;
55
+ text-overflow: ellipsis;
56
+ white-space: nowrap;
57
+ }
58
+
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
+
66
+ /* === Trigger Hover === */
67
+
68
+ .entropix-select-trigger:hover:not(:disabled) {
69
+ border-color: var(--entropix-color-border-hover);
70
+ }
71
+
72
+ /* === Trigger Focus === */
73
+
74
+ .entropix-select-trigger:focus-visible {
75
+ outline: 2px solid var(--entropix-color-border-focus);
76
+ outline-offset: 2px;
77
+ }
78
+
79
+ /* === Trigger Disabled === */
80
+
81
+ .entropix-select-trigger:disabled {
82
+ opacity: 0.5;
83
+ cursor: not-allowed;
84
+ pointer-events: none;
85
+ }
86
+
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
+
105
+ /* === Option === */
106
+
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
+ }
119
+
120
+ .entropix-select-option:hover:not([data-disabled]) {
121
+ background: var(--entropix-color-action-secondary-hover);
122
+ }
123
+
124
+ .entropix-select-option[data-state="selected"] {
125
+ background: var(--entropix-color-action-secondary-default);
126
+ font-weight: var(--entropix-font-weight-medium);
127
+ }
128
+
129
+ .entropix-select-option[data-state="selected"]:hover {
130
+ background: var(--entropix-color-action-secondary-hover);
131
+ }
132
+
133
+ .entropix-select-option[data-disabled] {
134
+ opacity: 0.5;
135
+ cursor: not-allowed;
136
+ pointer-events: none;
137
+ }
138
+
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
+ }
149
+ }
150
+ }
package/dist/styles/switch.css CHANGED
@@ -1,50 +1,52 @@
1
1
  /* Switch — @entropix/react */
2
2
 
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
- }
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
+ }
16
17
 
17
- .entropix-switch::after {
18
- content: "";
19
- display: block;
20
- width: 20px;
21
- height: 20px;
22
- border-radius: var(--entropix-radius-full);
23
- background: var(--entropix-color-white);
24
- box-shadow: var(--entropix-shadow-sm);
25
- transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
26
- }
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
+ }
27
28
 
28
- .entropix-switch[data-state="checked"] {
29
- background: var(--entropix-color-action-primary-default);
30
- }
31
- .entropix-switch[data-state="checked"]::after {
32
- transform: translateX(20px);
33
- }
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
+ }
34
35
 
35
- .entropix-switch:hover:not(:disabled) {
36
- background: var(--entropix-color-gray-400);
37
- }
38
- .entropix-switch[data-state="checked"]:hover:not(:disabled) {
39
- background: var(--entropix-color-action-primary-hover);
40
- }
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
+ }
41
42
 
42
- .entropix-switch:disabled {
43
- opacity: 0.5;
44
- cursor: not-allowed;
45
- }
43
+ .entropix-switch:disabled {
44
+ opacity: 0.5;
45
+ cursor: not-allowed;
46
+ }
46
47
 
47
- .entropix-switch:focus-visible {
48
- outline: 2px solid var(--entropix-color-border-focus);
49
- outline-offset: 2px;
48
+ .entropix-switch:focus-visible {
49
+ outline: 2px solid var(--entropix-color-border-focus);
50
+ outline-offset: 2px;
51
+ }
50
52
  }
package/dist/styles/tabs.css CHANGED
@@ -1,84 +1,86 @@
1
1
  /* Tabs — @entropix/react */
2
2
 
3
- .entropix-tabs {
4
- display: flex;
5
- flex-direction: column;
6
- }
3
+ @layer entropix {
4
+ .entropix-tabs {
5
+ display: flex;
6
+ flex-direction: column;
7
+ }
7
8
 
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
- }
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
+ }
18
19
 
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
- }
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
+ }
36
37
 
37
- .entropix-tab:hover:not(:disabled) {
38
- color: var(--entropix-color-text-primary);
39
- }
38
+ .entropix-tab:hover:not(:disabled) {
39
+ color: var(--entropix-color-text-primary);
40
+ }
40
41
 
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
- }
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
+ }
45
46
 
46
- .entropix-tab:disabled,
47
- .entropix-tab[aria-disabled="true"] {
48
- opacity: 0.5;
49
- cursor: not-allowed;
50
- }
47
+ .entropix-tab:disabled,
48
+ .entropix-tab[aria-disabled="true"] {
49
+ opacity: 0.5;
50
+ cursor: not-allowed;
51
+ }
51
52
 
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
- }
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
+ }
57
58
 
58
- .entropix-tabpanel {
59
- padding: var(--entropix-spacing-4);
60
- }
59
+ .entropix-tabpanel {
60
+ padding: var(--entropix-spacing-4);
61
+ }
61
62
 
62
- /* === Responsive — Scrollable tabs on mobile === */
63
+ /* === Responsive — Scrollable tabs on mobile === */
63
64
 
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
- }
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
+ }
71
72
 
72
- .entropix-tablist::-webkit-scrollbar {
73
- display: none;
74
- }
73
+ .entropix-tablist::-webkit-scrollbar {
74
+ display: none;
75
+ }
75
76
 
76
- .entropix-tab {
77
- white-space: nowrap;
78
- flex-shrink: 0;
79
- }
77
+ .entropix-tab {
78
+ white-space: nowrap;
79
+ flex-shrink: 0;
80
+ }
80
81
 
81
- .entropix-tabpanel {
82
- padding: var(--entropix-spacing-3);
82
+ .entropix-tabpanel {
83
+ padding: var(--entropix-spacing-3);
84
+ }
83
85
  }
84
86
  }
package/dist/styles/toggle.css CHANGED
@@ -1,45 +1,47 @@
1
1
  /* Toggle (checkbox) — @entropix/react */
2
2
 
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
- }
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
+ }
22
23
 
23
- .entropix-toggle:hover:not(:disabled) {
24
- background: var(--entropix-color-action-secondary-hover);
25
- }
24
+ .entropix-toggle:hover:not(:disabled) {
25
+ background: var(--entropix-color-action-secondary-hover);
26
+ }
26
27
 
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
- }
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
+ }
35
36
 
36
- .entropix-toggle:disabled {
37
- opacity: 0.5;
38
- cursor: not-allowed;
39
- pointer-events: none;
40
- }
37
+ .entropix-toggle:disabled {
38
+ opacity: 0.5;
39
+ cursor: not-allowed;
40
+ pointer-events: none;
41
+ }
41
42
 
42
- .entropix-toggle:focus-visible {
43
- outline: 2px solid var(--entropix-color-border-focus);
44
- outline-offset: 2px;
43
+ .entropix-toggle:focus-visible {
44
+ outline: 2px solid var(--entropix-color-border-focus);
45
+ outline-offset: 2px;
46
+ }
45
47
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entropix/react",
3
- "version": "0.1.1",
3
+ "version": "0.3.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.1.1"
54
+ "@entropix/core": "0.3.0"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "react": "^18.0.0 || ^19.0.0",
@@ -70,8 +70,8 @@
70
70
  "tsup": "^8.4.0",
71
71
  "typescript": "5.9.2",
72
72
  "vitest": "^3.2.1",
73
- "@entropix/typescript-config": "0.0.0",
74
- "@entropix/eslint-config": "0.0.0"
73
+ "@entropix/eslint-config": "0.0.0",
74
+ "@entropix/typescript-config": "0.0.0"
75
75
  },
76
76
  "scripts": {
77
77
  "build": "tsup",