@rescui/toggle 0.4.0 → 0.4.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19

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 (12) hide show
  1. package/package.json +6 -6
  2. package/lib/index.css +0 -149
  3. package/lib/index.d.ts +0 -4
  4. package/lib/index.js +0 -3
  5. package/lib/public-api.p.css +0 -208
  6. package/lib/public-api.pcss +0 -208
  7. package/lib/toggle-control.d.ts +0 -54
  8. package/lib/toggle-control.js +0 -68
  9. package/lib/toggle.d.ts +0 -14
  10. package/lib/toggle.js +0 -63
  11. package/lib/toggle.p.module.css.js +0 -13
  12. package/lib/types.d.ts +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/toggle",
3
- "version": "0.4.0",
3
+ "version": "0.4.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
4
4
  "description": "Toggle is a control that allows you to turn elements on and off instantly",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/menu": "^0.12.0",
19
+ "@rescui/menu": "0.12.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
20
20
  "classnames": "^2.2.6"
21
21
  },
22
22
  "peerDependencies": {
@@ -25,9 +25,9 @@
25
25
  "react": ">=16.8.0 <20"
26
26
  },
27
27
  "devDependencies": {
28
- "@rescui/colors": "^0.2.10",
29
- "@rescui/scripts": "^0.5.1",
30
- "@rescui/visual-regression": "^0.1.2",
28
+ "@rescui/colors": "0.2.11-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
29
+ "@rescui/scripts": "0.5.1",
30
+ "@rescui/visual-regression": "0.1.2",
31
31
  "@types/classnames": "^2.2.11"
32
32
  },
33
33
  "scripts": {
@@ -35,5 +35,5 @@
35
35
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
36
36
  },
37
37
  "nx": {},
38
- "gitHead": "8c7f861e3b95e9be677161ef7a00664db67decd9"
38
+ "gitHead": "8695a9042a55369f8df8f03ffd61c988cd3d3df4"
39
39
  }
package/lib/index.css DELETED
@@ -1,149 +0,0 @@
1
- ._themeLight_abe852_6{
2
- --rs-theme-dark:0;
3
- }
4
- ._themeDark_abe852_9{
5
- --rs-theme-dark:1;
6
- }
7
- ._sizeS_abe852_13{
8
- --_rs-toggle-width:20px;
9
- --_rs-toggle-height:12px;
10
- --_rs-toggle-shadow:3px;
11
- }
12
- ._sizeM_abe852_16{
13
- --_rs-toggle-width:28px;
14
- --_rs-toggle-height:16px;
15
- --_rs-toggle-shadow:3px;
16
- }
17
- ._sizeL_abe852_19{
18
- --_rs-toggle-width:32px;
19
- --_rs-toggle-height:18px;
20
- --_rs-toggle-shadow:4px;
21
- }
22
- ._classic_abe852_23{
23
- --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
24
- --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
25
- }
26
- ._rock_abe852_26{
27
- --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
28
- --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
29
- }
30
- ._main_abe852_30{
31
- --_rs-toggle-circle-border:2px;
32
-
33
- --_rs-theme-dark:var(
34
- --_rs-internal-force-theme-dark-consult-rescui-before-using,
35
- var(--rs-theme-dark, 0)
36
- );
37
-
38
- --_rs-theme-flip:var(--rs-theme-flip, 0);
39
-
40
- --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
41
-
42
- --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
43
- }
44
- @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
45
- ._main_abe852_30{
46
- --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
47
- --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
48
- --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
49
- --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
50
- --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
51
- }
52
- }
53
- @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
54
- ._main_abe852_30{
55
- --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
56
- --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
57
- --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
58
- --_rs-color-primary-t-dim:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, 0.8);
59
- --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
60
- }
61
- }
62
- ._main_abe852_30 {
63
-
64
- position:relative;
65
-
66
- display:inline-flex;
67
- align-self:center;
68
-
69
- width:calc(var(--_rs-toggle-width) + var(--_rs-toggle-shadow)*2);
70
- height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-shadow)*2);
71
-
72
- cursor:pointer;
73
- }
74
- ._main_abe852_30 input{
75
- position:absolute;
76
- z-index:-1;
77
-
78
- opacity:0;
79
-
80
- margin:0;
81
-
82
- pointer-events:none;
83
- }
84
- ._main_abe852_30._disabled_abe852_57{
85
- cursor:default;
86
- pointer-events:none;
87
- }
88
- ._slider_abe852_63{
89
- position:absolute;
90
- top:var(--_rs-toggle-shadow);
91
- left:var(--_rs-toggle-shadow);
92
-
93
- width:var(--_rs-toggle-width);
94
- height:var(--_rs-toggle-height);
95
-
96
- border-radius:34px;
97
-
98
- background-color:#8C8C8E;
99
-
100
- transition:background-color 200ms;
101
- }
102
- ._slider_abe852_63:after{
103
- position:absolute;
104
- top:0;
105
- left:0;
106
-
107
- box-sizing:border-box;
108
- width:var(--_rs-toggle-height);
109
- height:var(--_rs-toggle-height);
110
-
111
- border:var(--_rs-toggle-circle-border) solid #8C8C8E;
112
- border-radius:50%;
113
-
114
- content:'';
115
-
116
- background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
117
-
118
- transition:transform 200ms, height 200ms, width 200ms, border-color 200ms;
119
- transform:translate(0);
120
- }
121
- ._disabled_abe852_57 ._slider_abe852_63{
122
- background:rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(210 - var(--_rs-theme-dark-coefficient, 0)*137));
123
- }
124
- ._disabled_abe852_57 ._slider_abe852_63:after{
125
- border-color:rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(209 - var(--_rs-theme-dark-coefficient, 0)*138), calc(210 - var(--_rs-theme-dark-coefficient, 0)*137));
126
-
127
- background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
128
- }
129
- input:checked + ._slider_abe852_63:after{
130
- width:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
131
- height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
132
-
133
- transform:translate(
134
- calc(var(--_rs-toggle-width) - var(--_rs-toggle-height) - var(--_rs-toggle-circle-border)/2),
135
- calc(var(--_rs-toggle-circle-border)/-2)
136
- );
137
- }
138
- ._main_abe852_30:not(._disabled_abe852_57) input:hover + ._slider_abe852_63{
139
- box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
140
- }
141
- ._main_abe852_30:not(._disabled_abe852_57) input:checked + ._slider_abe852_63{
142
- background-color:var(--_rs-toggle-checked-slider-background-color);
143
- }
144
- ._main_abe852_30:not(._disabled_abe852_57) input:checked + ._slider_abe852_63:after{
145
- border-color:var(--_rs-toggle-checked-slider-background-color);
146
- }
147
- ._main_abe852_30:not(._disabled_abe852_57) input:focus[data-focus-method='key'] + ._slider_abe852_63{
148
- box-shadow:0 0 0 var(--_rs-toggle-shadow) var(--_rs-color-primary-t-dim);
149
- }
package/lib/index.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export { Toggle } from './toggle';
2
- export type { ToggleProps } from './toggle';
3
- export { ToggleControl } from './toggle-control';
4
- export type { ToggleControlProps } from './toggle-control';
package/lib/index.js DELETED
@@ -1,3 +0,0 @@
1
- import './index.css';
2
- export { Toggle } from './toggle.js';
3
- export { ToggleControl } from './toggle-control.js';
package/lib/public-api.p.css DELETED
@@ -1,208 +0,0 @@
1
- @define-mixin rs-toggle-size-s{
2
- & [data-rs-internal="toggle"]{
3
- --_rs-toggle-width:20px;
4
- --_rs-toggle-height:12px;
5
- --_rs-toggle-shadow:3px;
6
- }
7
- &[class][class]{
8
- --_rs-menu-mi-icon-offset:8px;
9
- --_rs-menu-mi-icon-size:20px;
10
- --_rs-menu-mi-vertical-padding:6px;
11
- --_rs-menu-mi-horizontal-padding:8px;
12
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
13
- --_rs-typography-text-transform:initial;
14
- --_rs-typography-font-variant-numeric:initial;
15
- --_rs-typography-font-family:var(
16
- --rs-font-family-ui,
17
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
18
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
19
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
20
- );
21
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
22
- --_rs-typography-font-weight:var(
23
- --rs-font-weight-regular,
24
- 400
25
- );
26
- --_rs-typography-line-height:var(
27
- --rs-text-3-line-height,
28
- 20px
29
- );
30
- --_rs-typography-base-color:var(
31
- --_rs-typography-hardness-color,
32
- var(
33
- --rs-color-average,
34
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
35
- )
36
- );
37
- --_rs-typography-text-auto-offset:8px;
38
- --_rs-typography-ul-list-li-padding-left:28px;
39
- --_rs-typography-ol-list-li-padding-left:21px;
40
- --_rs-typography-list-li-margin-top-from-text:8px;
41
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
42
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
43
- --_rs-typography-link-border-bottom-width-from-text:1px;
44
- }
45
- }
46
- @define-mixin rs-toggle-size-m{
47
- & [data-rs-internal="toggle"]{
48
- --_rs-toggle-width:28px;
49
- --_rs-toggle-height:16px;
50
- --_rs-toggle-shadow:3px;
51
- }
52
- &[class][class]{
53
- --_rs-menu-mi-icon-offset:8px;
54
- --_rs-menu-mi-icon-size:24px;
55
- --_rs-menu-mi-vertical-padding:8px;
56
- --_rs-menu-mi-horizontal-padding:16px;
57
- --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
58
- --_rs-typography-text-transform:initial;
59
- --_rs-typography-font-variant-numeric:initial;
60
- --_rs-typography-font-family:var(
61
- --rs-font-family-ui,
62
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
63
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
64
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
65
- );
66
- --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
67
- --_rs-typography-font-weight:var(
68
- --rs-font-weight-regular,
69
- 400
70
- );
71
- --_rs-typography-line-height:var(
72
- --rs-text-2-line-height,
73
- 24px
74
- );
75
- --_rs-typography-base-color:var(
76
- --_rs-typography-hardness-color,
77
- var(
78
- --rs-color-average,
79
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
80
- )
81
- );
82
- --_rs-typography-text-auto-offset:16px;
83
- --_rs-typography-ul-list-li-padding-left:22px;
84
- --_rs-typography-ol-list-li-padding-left:26px;
85
- --_rs-typography-list-li-margin-top-from-text:var(
86
- --_rs-typography-text-2-sm-list-li-margin-top-from-text,
87
- 16px
88
- );
89
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
90
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
91
- --_rs-typography-link-border-bottom-width-from-text:1px;
92
- }
93
- @media screen and (max-width: 640px){
94
- &[class][class]{
95
- --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
96
- }
97
- }
98
- }
99
- @define-mixin rs-toggle-size-l{
100
- & [data-rs-internal="toggle"]{
101
- --_rs-toggle-width:32px;
102
- --_rs-toggle-height:18px;
103
- --_rs-toggle-shadow:4px;
104
- }
105
- &[class][class]{
106
- --_rs-menu-mi-icon-offset:16px;
107
- --_rs-menu-mi-icon-size:28px;
108
- --_rs-menu-mi-vertical-padding:12px;
109
- --_rs-menu-mi-horizontal-padding:16px;
110
- --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
111
- --_rs-typography-text-transform:initial;
112
- --_rs-typography-font-variant-numeric:initial;
113
- --_rs-typography-font-family:var(
114
- --rs-font-family-ui,
115
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
116
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
117
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
118
- );
119
- --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
120
- --_rs-typography-font-weight:var(
121
- --rs-font-weight-regular,
122
- 400
123
- );
124
- --_rs-typography-line-height:var(
125
- --rs-text-1-line-height,
126
- 28px
127
- );
128
- --_rs-typography-base-color:var(
129
- --_rs-typography-hardness-color,
130
- var(
131
- --rs-color-average,
132
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
133
- )
134
- );
135
- --_rs-typography-text-auto-offset:32px;
136
- --_rs-typography-ul-list-li-padding-left:26px;
137
- --_rs-typography-ol-list-li-padding-left:32px;
138
- --_rs-typography-list-li-margin-top-from-text:var(
139
- --_rs-typography-text-1-sm-list-li-margin-top-from-text,
140
- 24px
141
- );
142
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
143
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
144
- --_rs-typography-link-border-bottom-width-from-text:1px;
145
- }
146
- @media screen and (max-width: 640px){
147
- &[class][class]{
148
- --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
149
- }
150
- }
151
- }
152
- @define-mixin rs-toggle-mode-classic{
153
- & [data-rs-internal="toggle"]{
154
- --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
155
- --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
156
- }
157
- }
158
- @define-mixin rs-toggle-mode-rock{
159
- & [data-rs-internal="toggle"]{
160
- --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
161
- --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
162
- }
163
- }
164
- @define-mixin rs-toggle-label-placement-left{
165
- &[class][class]{
166
- --_rs-menu-mi-flex-direction:row-reverse;
167
- --_rs-menu-mi-justify-content:space-between;
168
- }
169
- }
170
- @define-mixin rs-toggle-label-placement-right{
171
- &[class][class]{
172
- --_rs-menu-mi-flex-direction:row;
173
- --_rs-menu-mi-justify-content:initial;
174
- }
175
- }
176
- @define-mixin rs-toggle-control-size-s{
177
- &[class]{
178
- --_rs-toggle-width:20px;
179
- --_rs-toggle-height:12px;
180
- --_rs-toggle-shadow:3px;
181
- }
182
- }
183
- @define-mixin rs-toggle-control-size-m{
184
- &[class]{
185
- --_rs-toggle-width:28px;
186
- --_rs-toggle-height:16px;
187
- --_rs-toggle-shadow:3px;
188
- }
189
- }
190
- @define-mixin rs-toggle-control-size-l{
191
- &[class]{
192
- --_rs-toggle-width:32px;
193
- --_rs-toggle-height:18px;
194
- --_rs-toggle-shadow:4px;
195
- }
196
- }
197
- @define-mixin rs-toggle-control-mode-classic{
198
- &[class]{
199
- --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
200
- --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
201
- }
202
- }
203
- @define-mixin rs-toggle-control-mode-rock{
204
- &[class]{
205
- --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
206
- --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
207
- }
208
- }
package/lib/public-api.pcss DELETED
@@ -1,208 +0,0 @@
1
- @define-mixin rs-toggle-size-s{
2
- & [data-rs-internal="toggle"]{
3
- --_rs-toggle-width:20px;
4
- --_rs-toggle-height:12px;
5
- --_rs-toggle-shadow:3px;
6
- }
7
- &[class][class]{
8
- --_rs-menu-mi-icon-offset:8px;
9
- --_rs-menu-mi-icon-size:20px;
10
- --_rs-menu-mi-vertical-padding:6px;
11
- --_rs-menu-mi-horizontal-padding:8px;
12
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
13
- --_rs-typography-text-transform:initial;
14
- --_rs-typography-font-variant-numeric:initial;
15
- --_rs-typography-font-family:var(
16
- --rs-font-family-ui,
17
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
18
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
19
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
20
- );
21
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
22
- --_rs-typography-font-weight:var(
23
- --rs-font-weight-regular,
24
- 400
25
- );
26
- --_rs-typography-line-height:var(
27
- --rs-text-3-line-height,
28
- 20px
29
- );
30
- --_rs-typography-base-color:var(
31
- --_rs-typography-hardness-color,
32
- var(
33
- --rs-color-average,
34
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
35
- )
36
- );
37
- --_rs-typography-text-auto-offset:8px;
38
- --_rs-typography-ul-list-li-padding-left:28px;
39
- --_rs-typography-ol-list-li-padding-left:21px;
40
- --_rs-typography-list-li-margin-top-from-text:8px;
41
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
42
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
43
- --_rs-typography-link-border-bottom-width-from-text:1px;
44
- }
45
- }
46
- @define-mixin rs-toggle-size-m{
47
- & [data-rs-internal="toggle"]{
48
- --_rs-toggle-width:28px;
49
- --_rs-toggle-height:16px;
50
- --_rs-toggle-shadow:3px;
51
- }
52
- &[class][class]{
53
- --_rs-menu-mi-icon-offset:8px;
54
- --_rs-menu-mi-icon-size:24px;
55
- --_rs-menu-mi-vertical-padding:8px;
56
- --_rs-menu-mi-horizontal-padding:16px;
57
- --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
58
- --_rs-typography-text-transform:initial;
59
- --_rs-typography-font-variant-numeric:initial;
60
- --_rs-typography-font-family:var(
61
- --rs-font-family-ui,
62
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
63
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
64
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
65
- );
66
- --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
67
- --_rs-typography-font-weight:var(
68
- --rs-font-weight-regular,
69
- 400
70
- );
71
- --_rs-typography-line-height:var(
72
- --rs-text-2-line-height,
73
- 24px
74
- );
75
- --_rs-typography-base-color:var(
76
- --_rs-typography-hardness-color,
77
- var(
78
- --rs-color-average,
79
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
80
- )
81
- );
82
- --_rs-typography-text-auto-offset:16px;
83
- --_rs-typography-ul-list-li-padding-left:22px;
84
- --_rs-typography-ol-list-li-padding-left:26px;
85
- --_rs-typography-list-li-margin-top-from-text:var(
86
- --_rs-typography-text-2-sm-list-li-margin-top-from-text,
87
- 16px
88
- );
89
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
90
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
91
- --_rs-typography-link-border-bottom-width-from-text:1px;
92
- }
93
- @media screen and (max-width: 640px){
94
- &[class][class]{
95
- --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
96
- }
97
- }
98
- }
99
- @define-mixin rs-toggle-size-l{
100
- & [data-rs-internal="toggle"]{
101
- --_rs-toggle-width:32px;
102
- --_rs-toggle-height:18px;
103
- --_rs-toggle-shadow:4px;
104
- }
105
- &[class][class]{
106
- --_rs-menu-mi-icon-offset:16px;
107
- --_rs-menu-mi-icon-size:28px;
108
- --_rs-menu-mi-vertical-padding:12px;
109
- --_rs-menu-mi-horizontal-padding:16px;
110
- --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
111
- --_rs-typography-text-transform:initial;
112
- --_rs-typography-font-variant-numeric:initial;
113
- --_rs-typography-font-family:var(
114
- --rs-font-family-ui,
115
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
116
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
117
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
118
- );
119
- --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
120
- --_rs-typography-font-weight:var(
121
- --rs-font-weight-regular,
122
- 400
123
- );
124
- --_rs-typography-line-height:var(
125
- --rs-text-1-line-height,
126
- 28px
127
- );
128
- --_rs-typography-base-color:var(
129
- --_rs-typography-hardness-color,
130
- var(
131
- --rs-color-average,
132
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
133
- )
134
- );
135
- --_rs-typography-text-auto-offset:32px;
136
- --_rs-typography-ul-list-li-padding-left:26px;
137
- --_rs-typography-ol-list-li-padding-left:32px;
138
- --_rs-typography-list-li-margin-top-from-text:var(
139
- --_rs-typography-text-1-sm-list-li-margin-top-from-text,
140
- 24px
141
- );
142
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
143
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
144
- --_rs-typography-link-border-bottom-width-from-text:1px;
145
- }
146
- @media screen and (max-width: 640px){
147
- &[class][class]{
148
- --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
149
- }
150
- }
151
- }
152
- @define-mixin rs-toggle-mode-classic{
153
- & [data-rs-internal="toggle"]{
154
- --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
155
- --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
156
- }
157
- }
158
- @define-mixin rs-toggle-mode-rock{
159
- & [data-rs-internal="toggle"]{
160
- --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
161
- --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
162
- }
163
- }
164
- @define-mixin rs-toggle-label-placement-left{
165
- &[class][class]{
166
- --_rs-menu-mi-flex-direction:row-reverse;
167
- --_rs-menu-mi-justify-content:space-between;
168
- }
169
- }
170
- @define-mixin rs-toggle-label-placement-right{
171
- &[class][class]{
172
- --_rs-menu-mi-flex-direction:row;
173
- --_rs-menu-mi-justify-content:initial;
174
- }
175
- }
176
- @define-mixin rs-toggle-control-size-s{
177
- &[class]{
178
- --_rs-toggle-width:20px;
179
- --_rs-toggle-height:12px;
180
- --_rs-toggle-shadow:3px;
181
- }
182
- }
183
- @define-mixin rs-toggle-control-size-m{
184
- &[class]{
185
- --_rs-toggle-width:28px;
186
- --_rs-toggle-height:16px;
187
- --_rs-toggle-shadow:3px;
188
- }
189
- }
190
- @define-mixin rs-toggle-control-size-l{
191
- &[class]{
192
- --_rs-toggle-width:32px;
193
- --_rs-toggle-height:18px;
194
- --_rs-toggle-shadow:4px;
195
- }
196
- }
197
- @define-mixin rs-toggle-control-mode-classic{
198
- &[class]{
199
- --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
200
- --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
201
- }
202
- }
203
- @define-mixin rs-toggle-control-mode-rock{
204
- &[class]{
205
- --_rs-toggle-hover-slider-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
206
- --_rs-toggle-checked-slider-background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
207
- }
208
- }
package/lib/toggle-control.d.ts DELETED
@@ -1,54 +0,0 @@
1
- import React from 'react';
2
- import { Theme } from '@rescui/ui-contexts';
3
- import type { ToggleMode, ToggleSize } from './types';
4
- export interface ToggleControlProps {
5
- /**
6
- * Additional class name
7
- */
8
- className?: string;
9
- /**
10
- * Checked state. `onChange` callback is required.
11
- */
12
- checked?: boolean;
13
- /**
14
- * Is checkbox initially checked
15
- */
16
- defaultChecked?: boolean;
17
- /**
18
- * Input name attribute
19
- */
20
- name?: string;
21
- /**
22
- * Size
23
- */
24
- size?: ToggleSize;
25
- /**
26
- * Appearance mode
27
- */
28
- mode?: ToggleMode;
29
- /**
30
- * Disabled state
31
- */
32
- disabled?: boolean;
33
- /**
34
- * Appearance theme
35
- */
36
- theme?: Theme;
37
- /**
38
- * Value of the checkbox
39
- */
40
- value?: string;
41
- tabIndex?: number;
42
- /**
43
- * Change value callback
44
- */
45
- onChange?: React.ChangeEventHandler<{
46
- checked?: boolean;
47
- }>;
48
- /**
49
- * Cancel the use of the `label` tag inside.
50
- * Set it to `true` only if the component is wrapped in a `label` on the outside.
51
- */
52
- notUseLabelTag?: boolean;
53
- }
54
- export declare const ToggleControl: React.ForwardRefExoticComponent<ToggleControlProps & React.RefAttributes<HTMLInputElement>>;
package/lib/toggle-control.js DELETED
@@ -1,68 +0,0 @@
1
- "use client";
2
- import React from 'react';
3
- import PropTypes from 'prop-types';
4
- import cn from 'classnames';
5
- import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
- import styles from './toggle.p.module.css.js';
7
- const SIZE_STYLES = {
8
- s: styles.sizeS,
9
- m: styles.sizeM,
10
- l: styles.sizeL
11
- };
12
- const MODE_STYLES = {
13
- classic: styles.classic,
14
- rock: styles.rock
15
- };
16
- const THEME_STYLES = {
17
- light: styles.themeLight,
18
- dark: styles.themeDark
19
- };
20
- const ToggleControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
21
- let {
22
- className,
23
- value,
24
- defaultChecked,
25
- checked,
26
- onChange,
27
- size = 'm',
28
- mode = 'classic',
29
- disabled = false,
30
- theme: themeFromProps,
31
- notUseLabelTag,
32
- tabIndex = 0,
33
- ...restProps
34
- } = _ref;
35
- const theme = useThemeWithUndefined(themeFromProps);
36
- const RootTag = notUseLabelTag ? 'span' : 'label';
37
- return /*#__PURE__*/React.createElement(RootTag, {
38
- className: cn(className, styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], disabled && styles.disabled),
39
- "data-rs-internal": 'toggle'
40
- }, /*#__PURE__*/React.createElement("input", {
41
- type: "checkbox",
42
- "data-test": "toggle__input",
43
- ref: ref,
44
- defaultChecked: defaultChecked,
45
- onChange: onChange,
46
- value: value,
47
- disabled: disabled,
48
- checked: checked,
49
- tabIndex: disabled ? -1 : tabIndex,
50
- ...restProps
51
- }), /*#__PURE__*/React.createElement("span", {
52
- className: styles.slider
53
- }));
54
- });
55
- ToggleControl.displayName = 'ToggleControl';
56
- ToggleControl.propTypes = {
57
- checked: PropTypes.bool,
58
- defaultChecked: PropTypes.bool,
59
- disabled: PropTypes.bool,
60
- name: PropTypes.string,
61
- onChange: PropTypes.func,
62
- size: PropTypes.oneOf(['s', 'm', 'l']),
63
- mode: PropTypes.oneOf(['classic', 'rock']),
64
- theme: PropTypes.oneOf(['dark', 'light']),
65
- value: PropTypes.string,
66
- notUseLabelTag: PropTypes.bool
67
- };
68
- export { ToggleControl };
package/lib/toggle.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { ToggleControlProps } from './toggle-control';
3
- import type { ToggleLabelPlacement } from './types';
4
- export interface ToggleProps extends Omit<ToggleControlProps, 'notUseLabelTag'> {
5
- /**
6
- * Label placement relative to toggle
7
- */
8
- labelPlacement?: ToggleLabelPlacement;
9
- /**
10
- * Node or text to show near the input
11
- * */
12
- children?: React.ReactNode;
13
- }
14
- export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
package/lib/toggle.js DELETED
@@ -1,63 +0,0 @@
1
- "use client";
2
- import React from 'react';
3
- import PropTypes from 'prop-types';
4
- import cn from 'classnames';
5
- import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
- import { MenuItem } from '@rescui/menu';
7
- import { ToggleControl } from './toggle-control.js';
8
- const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(_ref, ref) {
9
- let {
10
- className,
11
- checked,
12
- defaultChecked,
13
- onChange,
14
- size = 'm',
15
- mode = 'classic',
16
- disabled = false,
17
- theme: themeFromProps,
18
- value,
19
- children,
20
- labelPlacement = 'right',
21
- ...restProps
22
- } = _ref;
23
- const theme = useThemeWithUndefined(themeFromProps);
24
- const iconPlacement = labelPlacement === 'right' ? 'left' : 'right';
25
- return /*#__PURE__*/React.createElement(MenuItem, {
26
- className: cn(className),
27
- tag: 'label',
28
- mode: 'clear',
29
- size: size,
30
- theme: theme,
31
- disabled: disabled,
32
- tabIndex: null,
33
- icon: /*#__PURE__*/React.createElement(ToggleControl, {
34
- value: value,
35
- checked: checked,
36
- defaultChecked: defaultChecked,
37
- onChange: onChange,
38
- theme: theme,
39
- size: size,
40
- mode: mode,
41
- disabled: disabled,
42
- ref: ref,
43
- notUseLabelTag: true,
44
- ...restProps
45
- }),
46
- iconPlacement: iconPlacement,
47
- "data-test": 'toggle'
48
- }, children);
49
- });
50
- Toggle.propTypes = {
51
- children: PropTypes.node,
52
- labelPlacement: PropTypes.oneOf(['left', 'right']),
53
- checked: PropTypes.bool,
54
- defaultChecked: PropTypes.bool,
55
- name: PropTypes.string,
56
- onChange: PropTypes.func,
57
- size: PropTypes.oneOf(['s', 'm', 'l']),
58
- mode: PropTypes.oneOf(['classic', 'rock']),
59
- disabled: PropTypes.bool,
60
- theme: PropTypes.oneOf(['dark', 'light']),
61
- value: PropTypes.string
62
- };
63
- export { Toggle };
package/lib/toggle.p.module.css.js DELETED
@@ -1,13 +0,0 @@
1
- var styles = {
2
- "themeLight": "_themeLight_abe852_6",
3
- "themeDark": "_themeDark_abe852_9",
4
- "sizeS": "_sizeS_abe852_13",
5
- "sizeM": "_sizeM_abe852_16",
6
- "sizeL": "_sizeL_abe852_19",
7
- "classic": "_classic_abe852_23",
8
- "rock": "_rock_abe852_26",
9
- "main": "_main_abe852_30",
10
- "disabled": "_disabled_abe852_57",
11
- "slider": "_slider_abe852_63"
12
- };
13
- export { styles as default };
package/lib/types.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export declare type ToggleSize = 's' | 'm' | 'l';
2
- export declare type ToggleMode = 'classic' | 'rock';
3
- export declare type ToggleLabelPlacement = 'left' | 'right';