@rescui/toggle 0.5.1 → 0.5.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14

package/README.md

@@ -1,3 +1,5 @@
 # Toggle
 
-* [Usage examples](./docs/demo.md)
+## LLM
+
+To get the docs for the LLM, check out [this index](./llm/index.md).

package/lib/index.css

@@ -1,33 +1,33 @@
-._themeLight_ejumgn_6{
+._themeLight_1utj9e2_6{
   --rs-theme-dark:0;
 }
-._themeDark_ejumgn_9{
+._themeDark_1utj9e2_9{
   --rs-theme-dark:1;
 }
-._sizeS_ejumgn_13{
+._sizeS_1utj9e2_13{
   --_rs-toggle-width:20px;
   --_rs-toggle-height:12px;
   --_rs-toggle-shadow:3px;
 }
-._sizeM_ejumgn_16{
+._sizeM_1utj9e2_16{
   --_rs-toggle-width:28px;
   --_rs-toggle-height:16px;
   --_rs-toggle-shadow:3px;
 }
-._sizeL_ejumgn_19{
+._sizeL_1utj9e2_19{
   --_rs-toggle-width:32px;
   --_rs-toggle-height:18px;
   --_rs-toggle-shadow:4px;
 }
-._classic_ejumgn_23{
+._classic_1utj9e2_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_ejumgn_26{
+._rock_1utj9e2_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_ejumgn_30{
+._main_1utj9e2_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_ejumgn_30{
+._main_1utj9e2_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_ejumgn_30{
+._main_1utj9e2_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_ejumgn_30 {
+._main_1utj9e2_30 {
 
   position:relative;
 
@@ -71,7 +71,7 @@
 
   cursor:pointer;
 }
-._main_ejumgn_30 input{
+._main_1utj9e2_30 input{
     position:absolute;
     z-index:-1;
 
@@ -81,11 +81,11 @@
 
     pointer-events:none;
   }
-._main_ejumgn_30._disabled_ejumgn_57{
+._main_1utj9e2_30._disabled_1utj9e2_57{
     cursor:default;
     pointer-events:none;
   }
-._slider_ejumgn_63{
+._slider_1utj9e2_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_ejumgn_63:after{
+._slider_1utj9e2_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_ejumgn_57 ._slider_ejumgn_63{
+._disabled_1utj9e2_57 ._slider_1utj9e2_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_ejumgn_57 ._slider_ejumgn_63:after{
+._disabled_1utj9e2_57 ._slider_1utj9e2_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_ejumgn_63:after{
+input:checked + ._slider_1utj9e2_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_ejumgn_63:after{
       calc(var(--_rs-toggle-circle-border)/-2)
     );
   }
-._main_ejumgn_30:not(._disabled_ejumgn_57) input:hover + ._slider_ejumgn_63{
+._main_1utj9e2_30:not(._disabled_1utj9e2_57) input:hover + ._slider_1utj9e2_63{
     box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
   }
-._main_ejumgn_30:not(._disabled_ejumgn_57) input:checked + ._slider_ejumgn_63{
+._main_1utj9e2_30:not(._disabled_1utj9e2_57) input:checked + ._slider_1utj9e2_63{
     background-color:var(--_rs-toggle-checked-slider-background-color);
   }
-._main_ejumgn_30:not(._disabled_ejumgn_57) input:checked + ._slider_ejumgn_63:after{
+._main_1utj9e2_30:not(._disabled_1utj9e2_57) input:checked + ._slider_1utj9e2_63:after{
       border-color:var(--_rs-toggle-checked-slider-background-color);
     }
-._main_ejumgn_30:not(._disabled_ejumgn_57) input:focus[data-focus-method='key'] + ._slider_ejumgn_63{
+._main_1utj9e2_30:not(._disabled_1utj9e2_57) input:focus[data-focus-method='key'] + ._slider_1utj9e2_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_ejumgn_6",
-  "themeDark": "_themeDark_ejumgn_9",
-  "sizeS": "_sizeS_ejumgn_13",
-  "sizeM": "_sizeM_ejumgn_16",
-  "sizeL": "_sizeL_ejumgn_19",
-  "classic": "_classic_ejumgn_23",
-  "rock": "_rock_ejumgn_26",
-  "main": "_main_ejumgn_30",
-  "disabled": "_disabled_ejumgn_57",
-  "slider": "_slider_ejumgn_63"
+  "themeLight": "_themeLight_1utj9e2_6",
+  "themeDark": "_themeDark_1utj9e2_9",
+  "sizeS": "_sizeS_1utj9e2_13",
+  "sizeM": "_sizeM_1utj9e2_16",
+  "sizeL": "_sizeL_1utj9e2_19",
+  "classic": "_classic_1utj9e2_23",
+  "rock": "_rock_1utj9e2_26",
+  "main": "_main_1utj9e2_30",
+  "disabled": "_disabled_1utj9e2_57",
+  "slider": "_slider_1utj9e2_63"
 };
 export { styles as default };

package/llm/components/toggle.md

@@ -0,0 +1,172 @@
+# Toggle
+
+Toggle is a control that allows you to turn elements on and off instantly.
+
+## Usage
+
+### Features showcase
+
+#### Default props
+
+```tsx
+import { Toggle } from '@rescui/toggle';
+
+<Toggle>Toggle</Toggle>;
+```
+
+#### Controlled toggle
+
+```tsx
+import { Toggle } from '@rescui/toggle';
+import { useState } from 'react';
+
+const Demo = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <>
+      <Toggle checked={checked} onChange={e => setChecked(e.target.checked)}>
+        Toggle
+      </Toggle>
+      <div>Toggle {checked ? 'checked' : 'unchecked'}</div>
+    </>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Inlined toggle
+
+Use inlined `Toggle` when you want to save as much space as possible
+
+```tsx
+import { Toggle } from '@rescui/toggle';
+
+<span style={{ display: 'inline-block' }}>
+  <Toggle labelPlacement="left">Toggle</Toggle>
+</span>;
+```
+
+#### Toggle wrapped in label
+
+Use 'Toggle' wrapped in "Label" to enable custom toggle descriptions
+
+```tsx
+import { ToggleControl } from '@rescui/toggle';
+
+<label style={{ display: 'flex', alignItems: 'center' }}>
+  <span className="rs-text-2" style={{ marginRight: 8 }}>
+    Custom description:
+  </span>
+  <ToggleControl notUseLabelTag value="item" />
+</label>;
+```
+
+#### Toggle list
+
+If you want to change the size of items in the list, change the size of `ToggleControl` component as well.
+
+```tsx
+import { ToggleControl } from '@rescui/toggle';
+import { Menu, MenuItem } from '@rescui/menu';
+
+<Menu size="s" itemTag="label" tag="div">
+  <MenuItem icon={<ToggleControl notUseLabelTag size="s" />}>
+    Dark theme
+  </MenuItem>
+  <MenuItem icon={<ToggleControl notUseLabelTag size="s" />}>
+    Notifications
+  </MenuItem>
+  <MenuItem icon={<ToggleControl notUseLabelTag size="s" />}>Tracking</MenuItem>
+</Menu>;
+```
+
+## CSS Mixins API
+
+#### `Toggle` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-toggle-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-toggle-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-toggle-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-toggle-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-toggle-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-toggle-label-placement-left` | prop: `labelPlacement`<br><br>value: `"left"` |
+| `rs-toggle-label-placement-right` | prop: `labelPlacement`<br><br>value: `"right"` |
+
+##### Demo
+
+Use the controls to see the effect at different viewport widths.
+
+```tsx
+import { Toggle } from '@rescui/toggle';
+
+const MyToggle = () => {
+  return (
+    <div style={{ maxWidth: '180px' }}>
+      <Toggle className="my-toggle" defaultChecked>
+        Option
+      </Toggle>
+    </div>
+  );
+};
+
+render(<MyToggle />);
+```
+
+```postcss attached
+@import '@rescui/toggle/lib/public-api.p.css';
+
+.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;
+  }
+}
+```
+
+#### `ToggleControl` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-toggle-control-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-toggle-control-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-toggle-control-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-toggle-control-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-toggle-control-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+
+##### Demo
+
+Use the controls to see the effect at different viewport widths.
+
+```tsx
+import { ToggleControl } from '@rescui/toggle';
+
+const MyToggleControl = () => {
+  return <ToggleControl className="my-toggle-control" defaultChecked />;
+};
+
+render(<MyToggleControl />);
+```
+
+```postcss
+@import '@rescui/toggle/lib/public-api.p.css';
+
+.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/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [Toggle](./components/toggle.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/toggle",
-  "version": "0.5.1",
+  "version": "0.5.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
   "description": "Toggle is a control that allows you to turn elements on and off instantly",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -16,18 +17,18 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/menu": "^0.13.6",
+    "@rescui/menu": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
     "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.1",
-    "@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-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/visual-regression": "0.1.4",
     "@types/classnames": "^2.2.11"
   },
   "scripts": {
@@ -35,5 +36,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
+  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
 }