@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/accordion.css CHANGED
@@ -1,69 +1,67 @@
1
1
  /* Accordion — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-accordion {
5
- border: 1px solid var(--entropix-color-border-default);
6
- border-radius: var(--entropix-radius-lg);
7
- overflow: hidden;
8
- }
3
+ .entropix-accordion {
4
+ border: 1px solid var(--entropix-color-border-default);
5
+ border-radius: var(--entropix-radius-lg);
6
+ overflow: hidden;
7
+ }
9
8
 
10
- .entropix-accordion-item {
11
- border-bottom: 1px solid var(--entropix-color-border-default);
12
- }
13
- .entropix-accordion-item:last-child {
14
- border-bottom: none;
15
- }
9
+ .entropix-accordion-item {
10
+ border-bottom: 1px solid var(--entropix-color-border-default);
11
+ }
12
+ .entropix-accordion-item:last-child {
13
+ border-bottom: none;
14
+ }
16
15
 
17
- .entropix-accordion-trigger {
18
- display: flex;
19
- align-items: center;
20
- justify-content: space-between;
21
- width: 100%;
22
- padding: var(--entropix-spacing-4);
23
- border: none;
24
- background: transparent;
25
- font-family: var(--entropix-font-family-sans);
26
- font-size: var(--entropix-font-size-sm);
27
- font-weight: var(--entropix-font-weight-medium);
28
- color: var(--entropix-color-text-primary);
29
- text-align: left;
30
- cursor: pointer;
31
- transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
32
- }
16
+ .entropix-accordion-trigger {
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: space-between;
20
+ width: 100%;
21
+ padding: var(--entropix-spacing-4);
22
+ border: none;
23
+ background: transparent;
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
+ text-align: left;
29
+ cursor: pointer;
30
+ transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
31
+ }
33
32
 
34
- .entropix-accordion-trigger:hover:not(:disabled) {
35
- background: var(--entropix-color-bg-secondary);
36
- }
33
+ .entropix-accordion-trigger:hover:not(:disabled) {
34
+ background: var(--entropix-color-bg-secondary);
35
+ }
37
36
 
38
- .entropix-accordion-trigger:disabled {
39
- opacity: 0.5;
40
- cursor: not-allowed;
41
- }
37
+ .entropix-accordion-trigger:disabled {
38
+ opacity: 0.5;
39
+ cursor: not-allowed;
40
+ }
42
41
 
43
- .entropix-accordion-trigger:focus-visible {
44
- outline: 2px solid var(--entropix-color-border-focus);
45
- outline-offset: -2px;
46
- }
42
+ .entropix-accordion-trigger:focus-visible {
43
+ outline: 2px solid var(--entropix-color-border-focus);
44
+ outline-offset: -2px;
45
+ }
47
46
 
48
- .entropix-accordion-panel {
49
- padding: 0 var(--entropix-spacing-4) var(--entropix-spacing-4);
50
- font-family: var(--entropix-font-family-sans);
51
- font-size: var(--entropix-font-size-sm);
52
- color: var(--entropix-color-text-secondary);
53
- line-height: var(--entropix-line-height-normal);
54
- }
47
+ .entropix-accordion-panel {
48
+ padding: 0 var(--entropix-spacing-4) var(--entropix-spacing-4);
49
+ font-family: var(--entropix-font-family-sans);
50
+ font-size: var(--entropix-font-size-sm);
51
+ color: var(--entropix-color-text-secondary);
52
+ line-height: var(--entropix-line-height-normal);
53
+ }
55
54
 
56
- /* === Responsive — Touch-friendly on mobile === */
55
+ /* === Responsive — Touch-friendly on mobile === */
57
56
 
58
- @media (max-width: 767px) {
59
- .entropix-accordion-trigger {
60
- padding: var(--entropix-spacing-4) var(--entropix-spacing-3);
61
- min-height: 48px;
62
- font-size: var(--entropix-font-size-base);
63
- }
57
+ @media (max-width: 767px) {
58
+ .entropix-accordion-trigger {
59
+ padding: var(--entropix-spacing-4) var(--entropix-spacing-3);
60
+ min-height: 48px;
61
+ font-size: var(--entropix-font-size-base);
62
+ }
64
63
 
65
- .entropix-accordion-panel {
66
- padding: 0 var(--entropix-spacing-3) var(--entropix-spacing-3);
67
- }
64
+ .entropix-accordion-panel {
65
+ padding: 0 var(--entropix-spacing-3) var(--entropix-spacing-3);
68
66
  }
69
67
  }
package/dist/styles/button.css CHANGED
@@ -1,135 +1,133 @@
1
1
  /* Button — @entropix/react */
2
2
 
3
- @layer entropix {
4
- .entropix-button {
5
- display: inline-flex;
6
- align-items: center;
7
- justify-content: center;
8
- gap: var(--entropix-button-gap);
9
- border: 1px solid transparent;
10
- font-family: var(--entropix-font-family-sans);
11
- font-size: var(--entropix-button-font-size);
12
- font-weight: var(--entropix-button-font-weight);
13
- line-height: var(--entropix-button-line-height);
14
- border-radius: var(--entropix-button-border-radius);
15
- padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
16
- cursor: pointer;
17
- text-decoration: none;
18
- user-select: none;
19
- transition:
20
- background var(--entropix-duration-fast) var(--entropix-easing-default),
21
- color var(--entropix-duration-fast) var(--entropix-easing-default),
22
- border-color var(--entropix-duration-fast) var(--entropix-easing-default),
23
- box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
24
- }
3
+ .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
+ }
25
24
 
26
- /* === Variants === */
25
+ /* === Variants === */
27
26
 
28
- .entropix-button--primary {
29
- background: var(--entropix-button-primary-bg);
30
- color: var(--entropix-button-primary-text);
31
- border-color: var(--entropix-button-primary-border);
32
- }
33
- .entropix-button--primary:hover:not(:disabled) {
34
- background: var(--entropix-button-primary-bg-hover);
35
- }
36
- .entropix-button--primary:active:not(:disabled) {
37
- background: var(--entropix-button-primary-bg-active);
38
- }
27
+ .entropix-button--primary {
28
+ background: var(--entropix-button-primary-bg);
29
+ color: var(--entropix-button-primary-text);
30
+ border-color: var(--entropix-button-primary-border);
31
+ }
32
+ .entropix-button--primary:hover:not(:disabled) {
33
+ background: var(--entropix-button-primary-bg-hover);
34
+ }
35
+ .entropix-button--primary:active:not(:disabled) {
36
+ background: var(--entropix-button-primary-bg-active);
37
+ }
39
38
 
40
- .entropix-button--secondary {
41
- background: var(--entropix-button-secondary-bg);
42
- color: var(--entropix-button-secondary-text);
43
- border-color: var(--entropix-button-secondary-border);
44
- }
45
- .entropix-button--secondary:hover:not(:disabled) {
46
- background: var(--entropix-button-secondary-bg-hover);
47
- }
48
- .entropix-button--secondary:active:not(:disabled) {
49
- background: var(--entropix-button-secondary-bg-active);
50
- }
39
+ .entropix-button--secondary {
40
+ background: var(--entropix-button-secondary-bg);
41
+ color: var(--entropix-button-secondary-text);
42
+ border-color: var(--entropix-button-secondary-border);
43
+ }
44
+ .entropix-button--secondary:hover:not(:disabled) {
45
+ background: var(--entropix-button-secondary-bg-hover);
46
+ }
47
+ .entropix-button--secondary:active:not(:disabled) {
48
+ background: var(--entropix-button-secondary-bg-active);
49
+ }
51
50
 
52
- .entropix-button--outline {
53
- background: transparent;
54
- color: var(--entropix-color-text-primary);
55
- border-color: var(--entropix-color-border-default);
56
- }
57
- .entropix-button--outline:hover:not(:disabled) {
58
- background: var(--entropix-color-action-secondary-hover);
59
- }
60
- .entropix-button--outline:active:not(:disabled) {
61
- background: var(--entropix-color-action-secondary-active);
62
- }
51
+ .entropix-button--outline {
52
+ background: transparent;
53
+ color: var(--entropix-color-text-primary);
54
+ border-color: var(--entropix-color-border-default);
55
+ }
56
+ .entropix-button--outline:hover:not(:disabled) {
57
+ background: var(--entropix-color-action-secondary-hover);
58
+ }
59
+ .entropix-button--outline:active:not(:disabled) {
60
+ background: var(--entropix-color-action-secondary-active);
61
+ }
63
62
 
64
- .entropix-button--ghost {
65
- background: transparent;
66
- color: var(--entropix-color-text-primary);
67
- border-color: transparent;
68
- }
69
- .entropix-button--ghost:hover:not(:disabled) {
70
- background: var(--entropix-color-action-secondary-default);
71
- }
72
- .entropix-button--ghost:active:not(:disabled) {
73
- background: var(--entropix-color-action-secondary-hover);
74
- }
63
+ .entropix-button--ghost {
64
+ background: transparent;
65
+ color: var(--entropix-color-text-primary);
66
+ border-color: transparent;
67
+ }
68
+ .entropix-button--ghost:hover:not(:disabled) {
69
+ background: var(--entropix-color-action-secondary-default);
70
+ }
71
+ .entropix-button--ghost:active:not(:disabled) {
72
+ background: var(--entropix-color-action-secondary-hover);
73
+ }
75
74
 
76
- .entropix-button--danger {
77
- background: var(--entropix-button-danger-bg);
78
- color: var(--entropix-button-danger-text);
79
- border-color: var(--entropix-button-danger-border);
80
- }
81
- .entropix-button--danger:hover:not(:disabled) {
82
- background: var(--entropix-button-danger-bg-hover);
83
- }
84
- .entropix-button--danger:active:not(:disabled) {
85
- background: var(--entropix-button-danger-bg-active);
86
- }
75
+ .entropix-button--danger {
76
+ background: var(--entropix-button-danger-bg);
77
+ color: var(--entropix-button-danger-text);
78
+ border-color: var(--entropix-button-danger-border);
79
+ }
80
+ .entropix-button--danger:hover:not(:disabled) {
81
+ background: var(--entropix-button-danger-bg-hover);
82
+ }
83
+ .entropix-button--danger:active:not(:disabled) {
84
+ background: var(--entropix-button-danger-bg-active);
85
+ }
87
86
 
88
- /* === Sizes === */
87
+ /* === Sizes === */
89
88
 
90
- .entropix-button--sm {
91
- padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
92
- font-size: var(--entropix-font-size-xs);
93
- border-radius: var(--entropix-radius-sm);
94
- }
89
+ .entropix-button--sm {
90
+ padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
91
+ font-size: var(--entropix-font-size-xs);
92
+ border-radius: var(--entropix-radius-sm);
93
+ }
95
94
 
96
- .entropix-button--md {
97
- padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
98
- font-size: var(--entropix-button-font-size);
99
- }
95
+ .entropix-button--md {
96
+ padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
97
+ font-size: var(--entropix-button-font-size);
98
+ }
100
99
 
101
- .entropix-button--lg {
102
- padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
103
- font-size: var(--entropix-font-size-base);
104
- border-radius: var(--entropix-radius-lg);
105
- }
100
+ .entropix-button--lg {
101
+ padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
102
+ font-size: var(--entropix-font-size-base);
103
+ border-radius: var(--entropix-radius-lg);
104
+ }
106
105
 
107
- /* === States === */
106
+ /* === States === */
108
107
 
109
- .entropix-button:disabled,
110
- .entropix-button[data-state="disabled"],
111
- .entropix-button[data-state="loading"] {
112
- opacity: 0.5;
113
- cursor: not-allowed;
114
- pointer-events: none;
115
- }
108
+ .entropix-button:disabled,
109
+ .entropix-button[data-state="disabled"],
110
+ .entropix-button[data-state="loading"] {
111
+ opacity: 0.5;
112
+ cursor: not-allowed;
113
+ pointer-events: none;
114
+ }
116
115
 
117
- .entropix-button:focus-visible {
118
- outline: 2px solid var(--entropix-color-border-focus);
119
- outline-offset: 2px;
120
- }
116
+ .entropix-button:focus-visible {
117
+ outline: 2px solid var(--entropix-color-border-focus);
118
+ outline-offset: 2px;
119
+ }
121
120
 
122
- /* === Responsive — Touch-friendly sizing on mobile === */
121
+ /* === Responsive — Touch-friendly sizing on mobile === */
123
122
 
124
- @media (max-width: 767px) {
125
- .entropix-button {
126
- min-height: 44px;
127
- }
123
+ @media (max-width: 767px) {
124
+ .entropix-button {
125
+ min-height: 44px;
126
+ }
128
127
 
129
- .entropix-button--sm {
130
- min-height: 36px;
131
- padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
132
- font-size: var(--entropix-font-size-sm);
133
- }
128
+ .entropix-button--sm {
129
+ min-height: 36px;
130
+ padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
131
+ font-size: var(--entropix-font-size-sm);
134
132
  }
135
133
  }
package/dist/styles/checkbox.css CHANGED
@@ -1,121 +1,119 @@
1
1
  /* Checkbox — @entropix/react */
2
2
 
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
- }
24
-
25
- /* === Indicator === */
3
+ .entropix-checkbox {
4
+ --checkbox-size: 18px;
5
+ --checkbox-border-color: var(--entropix-color-border-default);
6
+ --checkbox-checked-bg: var(--entropix-color-action-primary-default);
7
+ --checkbox-checked-border: var(--entropix-color-action-primary-default);
8
+ --checkbox-border-radius: var(--entropix-radius-sm);
9
+
10
+ display: inline-flex;
11
+ align-items: center;
12
+ gap: var(--entropix-spacing-2);
13
+ padding: var(--entropix-spacing-1) 0;
14
+ border: none;
15
+ background: transparent;
16
+ cursor: pointer;
17
+ user-select: none;
18
+ font-family: var(--entropix-font-family-sans);
19
+ font-size: var(--entropix-font-size-sm);
20
+ color: var(--entropix-color-text-primary);
21
+ line-height: var(--entropix-line-height-normal);
22
+ }
26
23
 
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
- }
24
+ /* === Indicator === */
25
+
26
+ .entropix-checkbox__indicator {
27
+ display: inline-flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ width: var(--checkbox-size);
31
+ height: var(--checkbox-size);
32
+ border: 2px solid var(--checkbox-border-color);
33
+ border-radius: var(--checkbox-border-radius);
34
+ background: var(--entropix-color-bg-primary);
35
+ flex-shrink: 0;
36
+ transition:
37
+ background var(--entropix-duration-fast) var(--entropix-easing-default),
38
+ border-color var(--entropix-duration-fast) var(--entropix-easing-default);
39
+ }
41
40
 
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
- }
41
+ .entropix-checkbox__indicator[data-state="checked"],
42
+ .entropix-checkbox__indicator[data-state="indeterminate"] {
43
+ background: var(--checkbox-checked-bg);
44
+ border-color: var(--checkbox-checked-border);
45
+ }
47
46
 
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
- }
47
+ /* Checkmark via ::after pseudo-element */
48
+ .entropix-checkbox__indicator[data-state="checked"]::after {
49
+ content: "";
50
+ display: block;
51
+ width: 5px;
52
+ height: 9px;
53
+ border: solid var(--entropix-color-text-inverse);
54
+ border-width: 0 2px 2px 0;
55
+ transform: rotate(45deg);
56
+ margin-top: -1px;
57
+ }
59
58
 
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
- }
59
+ /* Indeterminate minus via ::after pseudo-element */
60
+ .entropix-checkbox__indicator[data-state="indeterminate"]::after {
61
+ content: "";
62
+ display: block;
63
+ width: 8px;
64
+ height: 2px;
65
+ background: var(--entropix-color-text-inverse);
66
+ border-radius: 1px;
67
+ }
69
68
 
70
- /* === Label === */
69
+ /* === Label === */
71
70
 
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
- }
71
+ .entropix-checkbox__label {
72
+ font-family: var(--entropix-font-family-sans);
73
+ font-size: var(--entropix-font-size-sm);
74
+ color: var(--entropix-color-text-primary);
75
+ line-height: var(--entropix-line-height-normal);
76
+ }
78
77
 
79
- /* === Hover === */
78
+ /* === Hover === */
80
79
 
81
- .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
82
- border-color: var(--entropix-color-border-hover);
83
- }
80
+ .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
81
+ border-color: var(--entropix-color-border-hover);
82
+ }
84
83
 
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
- }
84
+ .entropix-checkbox:hover:not(:disabled)
85
+ .entropix-checkbox__indicator[data-state="checked"],
86
+ .entropix-checkbox:hover:not(:disabled)
87
+ .entropix-checkbox__indicator[data-state="indeterminate"] {
88
+ background: var(--entropix-color-action-primary-hover);
89
+ border-color: var(--entropix-color-action-primary-hover);
90
+ }
92
91
 
93
- /* === Focus === */
92
+ /* === Focus === */
94
93
 
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
- }
94
+ .entropix-checkbox:focus-visible {
95
+ outline: 2px solid var(--entropix-color-border-focus);
96
+ outline-offset: 2px;
97
+ border-radius: var(--checkbox-border-radius);
98
+ }
100
99
 
101
- /* === Disabled === */
100
+ /* === Disabled === */
102
101
 
103
- .entropix-checkbox:disabled {
104
- opacity: 0.5;
105
- cursor: not-allowed;
106
- pointer-events: none;
107
- }
102
+ .entropix-checkbox:disabled {
103
+ opacity: 0.5;
104
+ cursor: not-allowed;
105
+ pointer-events: none;
106
+ }
108
107
 
109
- /* === Responsive — Touch-friendly sizing on mobile === */
108
+ /* === Responsive — Touch-friendly sizing on mobile === */
110
109
 
111
- @media (max-width: 767px) {
112
- .entropix-checkbox {
113
- min-height: 44px;
114
- }
110
+ @media (max-width: 767px) {
111
+ .entropix-checkbox {
112
+ min-height: 44px;
113
+ }
115
114
 
116
- .entropix-checkbox__indicator {
117
- width: 22px;
118
- height: 22px;
119
- }
115
+ .entropix-checkbox__indicator {
116
+ width: 22px;
117
+ height: 22px;
120
118
  }
121
119
  }