@rescui/toggle 0.5.2 → 0.5.3-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15

package/lib/index.css

@@ -1,33 +1,33 @@
-._themeLight_27rbq0_6{
+._themeLight_1skp5hq_6{
   --rs-theme-dark:0;
 }
-._themeDark_27rbq0_9{
+._themeDark_1skp5hq_9{
   --rs-theme-dark:1;
 }
-._sizeS_27rbq0_13{
+._sizeS_1skp5hq_13{
   --_rs-toggle-width:20px;
   --_rs-toggle-height:12px;
   --_rs-toggle-shadow:3px;
 }
-._sizeM_27rbq0_16{
+._sizeM_1skp5hq_16{
   --_rs-toggle-width:28px;
   --_rs-toggle-height:16px;
   --_rs-toggle-shadow:3px;
 }
-._sizeL_27rbq0_19{
+._sizeL_1skp5hq_19{
   --_rs-toggle-width:32px;
   --_rs-toggle-height:18px;
   --_rs-toggle-shadow:4px;
 }
-._classic_27rbq0_23{
+._classic_1skp5hq_23{
   --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
   --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
 }
-._rock_27rbq0_26{
+._rock_1skp5hq_26{
   --_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);
   --_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));
 }
-._main_27rbq0_30{
+._main_1skp5hq_30{
   --_rs-toggle-circle-border:2px;
 
   --_rs-theme-dark:var(
@@ -42,7 +42,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_27rbq0_30{
+._main_1skp5hq_30{
     --_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)));
     --_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)));
     --_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)));
@@ -51,7 +51,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_27rbq0_30{
+._main_1skp5hq_30{
     --_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);
     --_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));
     --_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));
@@ -59,7 +59,7 @@
     --_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));
 }
   }
-._main_27rbq0_30 {
+._main_1skp5hq_30 {
 
   position:relative;
 
@@ -71,7 +71,7 @@
 
   cursor:pointer;
 }
-._main_27rbq0_30 input{
+._main_1skp5hq_30 input{
     position:absolute;
     z-index:-1;
 
@@ -81,11 +81,11 @@
 
     pointer-events:none;
   }
-._main_27rbq0_30._disabled_27rbq0_57{
+._main_1skp5hq_30._disabled_1skp5hq_57{
     cursor:default;
     pointer-events:none;
   }
-._slider_27rbq0_63{
+._slider_1skp5hq_63{
   position:absolute;
   top:var(--_rs-toggle-shadow);
   left:var(--_rs-toggle-shadow);
@@ -99,7 +99,7 @@
 
   transition:background-color 200ms var(--rs-transition-function, ease);
 }
-._slider_27rbq0_63:after{
+._slider_1skp5hq_63:after{
     position:absolute;
     top:0;
     left:0;
@@ -118,15 +118,15 @@
     transition:transform 200ms var(--rs-transition-function, ease), height 200ms var(--rs-transition-function, ease), width 200ms var(--rs-transition-function, ease), border-color 200ms var(--rs-transition-function, ease);
     transform:translate(0);
   }
-._disabled_27rbq0_57 ._slider_27rbq0_63{
+._disabled_1skp5hq_57 ._slider_1skp5hq_63{
     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));
   }
-._disabled_27rbq0_57 ._slider_27rbq0_63:after{
+._disabled_1skp5hq_57 ._slider_1skp5hq_63:after{
       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));
 
       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));
     }
-input:checked + ._slider_27rbq0_63:after{
+input:checked + ._slider_1skp5hq_63:after{
     width:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
     height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
 
@@ -135,15 +135,15 @@ input:checked + ._slider_27rbq0_63:after{
       calc(var(--_rs-toggle-circle-border)/-2)
     );
   }
-._main_27rbq0_30:not(._disabled_27rbq0_57) input:hover + ._slider_27rbq0_63{
+._main_1skp5hq_30:not(._disabled_1skp5hq_57) input:hover + ._slider_1skp5hq_63{
     box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
   }
-._main_27rbq0_30:not(._disabled_27rbq0_57) input:checked + ._slider_27rbq0_63{
+._main_1skp5hq_30:not(._disabled_1skp5hq_57) input:checked + ._slider_1skp5hq_63{
     background-color:var(--_rs-toggle-checked-slider-background-color);
   }
-._main_27rbq0_30:not(._disabled_27rbq0_57) input:checked + ._slider_27rbq0_63:after{
+._main_1skp5hq_30:not(._disabled_1skp5hq_57) input:checked + ._slider_1skp5hq_63:after{
       border-color:var(--_rs-toggle-checked-slider-background-color);
     }
-._main_27rbq0_30:not(._disabled_27rbq0_57) input:focus[data-focus-method='key'] + ._slider_27rbq0_63{
+._main_1skp5hq_30:not(._disabled_1skp5hq_57) input:focus[data-focus-method='key'] + ._slider_1skp5hq_63{
     box-shadow:0 0 0 var(--_rs-toggle-shadow) var(--_rs-color-primary-t-dim);
   }

package/lib/toggle.p.module.css.js

@@ -1,13 +1,13 @@
 var styles = {
-  "themeLight": "_themeLight_27rbq0_6",
-  "themeDark": "_themeDark_27rbq0_9",
-  "sizeS": "_sizeS_27rbq0_13",
-  "sizeM": "_sizeM_27rbq0_16",
-  "sizeL": "_sizeL_27rbq0_19",
-  "classic": "_classic_27rbq0_23",
-  "rock": "_rock_27rbq0_26",
-  "main": "_main_27rbq0_30",
-  "disabled": "_disabled_27rbq0_57",
-  "slider": "_slider_27rbq0_63"
+  "themeLight": "_themeLight_1skp5hq_6",
+  "themeDark": "_themeDark_1skp5hq_9",
+  "sizeS": "_sizeS_1skp5hq_13",
+  "sizeM": "_sizeM_1skp5hq_16",
+  "sizeL": "_sizeL_1skp5hq_19",
+  "classic": "_classic_1skp5hq_23",
+  "rock": "_rock_1skp5hq_26",
+  "main": "_main_1skp5hq_30",
+  "disabled": "_disabled_1skp5hq_57",
+  "slider": "_slider_1skp5hq_63"
 };
 export { styles as default };

package/llm/components/toggle.md

@@ -97,51 +97,38 @@ import { Menu, MenuItem } from '@rescui/menu';
 
 ##### Demo
 
-Instead of separate classes, it may be a single class with `@media` queries inside:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { Toggle } from '@rescui/toggle';
 
-const MyToggle = ({ className }) => {
+const MyToggle = () => {
   return (
-    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)', maxWidth: 400 }}>
-      <Toggle className={className} defaultChecked>
+    <div style={{ maxWidth: '180px' }}>
+      <Toggle className="my-toggle" defaultChecked>
         Option
       </Toggle>
     </div>
   );
 };
 
-render(
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-    <div>
-      <p>Default:</p>
-      <MyToggle />
-    </div>
-    <div>
-      <p>Var1:</p>
-      <MyToggle className={`my-toggle-var-1`} />
-    </div>
-    <div>
-      <p>Var1 & Var2 combined:</p>
-      <MyToggle className={`my-toggle-var-1 my-toggle-var-2`} />
-    </div>
-  </div>
-);
+render(<MyToggle />);
 ```
 
 ```postcss attached
 @import '@rescui/toggle/lib/public-api.p.css';
 
-.my-toggle-var-1 {
-  @mixin rs-toggle-size-l;
-  @mixin rs-toggle-mode-rock;
-  @mixin rs-toggle-label-placement-left;
-}
-.my-toggle-var-2 {
-  @mixin rs-toggle-size-s;
-  @mixin rs-toggle-mode-classic;
-  @mixin rs-toggle-label-placement-right;
+.my-toggle {
+  @media (max-width: 640px) {
+    @mixin rs-toggle-size-l;
+    @mixin rs-toggle-mode-rock;
+    @mixin rs-toggle-label-placement-left;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-toggle-size-s;
+    @mixin rs-toggle-mode-classic;
+    @mixin rs-toggle-label-placement-right;
+  }
 }
 ```
 
@@ -157,48 +144,29 @@ render(
 
 ##### Demo
 
-Instead of separate classes, it may be a single class with `@media` queries inside:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { ToggleControl } from '@rescui/toggle';
 
-const MyToggleControl = ({ className }) => {
-  return (
-    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)', maxWidth: 400 }}>
-      <ToggleControl className={className} defaultChecked />
-    </div>
-  );
+const MyToggleControl = () => {
+  return <ToggleControl className="my-toggle-control" defaultChecked />;
 };
 
-render(
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-    <div>
-      <p>Default:</p>
-      <MyToggleControl />
-    </div>
-    <div>
-      <p>Var1:</p>
-      <MyToggleControl className={`my-toggle-control-var-1`} />
-    </div>
-    <div>
-      <p>Var1 & Var2 combined:</p>
-      <MyToggleControl
-        className={`my-toggle-control-var-1 my-toggle-control-var-2`}
-      />
-    </div>
-  </div>
-);
+render(<MyToggleControl />);
 ```
 
 ```postcss
 @import '@rescui/toggle/lib/public-api.p.css';
 
-.my-toggle-control-var-1 {
-  @mixin rs-toggle-control-size-l;
-  @mixin rs-toggle-control-mode-rock;
-}
-.my-toggle-control-var-2 {
-  @mixin rs-toggle-control-size-s;
-  @mixin rs-toggle-control-mode-classic;
+.my-toggle-control {
+  @media (max-width: 640px) {
+    @mixin rs-toggle-control-size-l;
+    @mixin rs-toggle-control-mode-rock;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-toggle-control-size-s;
+    @mixin rs-toggle-control-mode-classic;
+  }
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/toggle",
-  "version": "0.5.2",
+  "version": "0.5.3-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15+f15074a13",
   "description": "Toggle is a control that allows you to turn elements on and off instantly",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,18 +17,18 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/menu": "^0.13.7",
+    "@rescui/menu": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15+f15074a13",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.2",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/visual-regression": "^0.1.4",
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15+f15074a13",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/visual-regression": "0.1.4",
     "@types/classnames": "^2.2.11"
   },
   "scripts": {
@@ -36,5 +36,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
+  "gitHead": "f15074a13a93f4cdfe7b9ac295f0a493e4a0ca0f"
 }