@rescui/toggle 0.5.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18 → 0.5.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19

package/lib/index.css

@@ -1,33 +1,33 @@
-._themeLight_85twx1_6{
+._themeLight_jj7z3n_6{
   --rs-theme-dark:0;
 }
-._themeDark_85twx1_9{
+._themeDark_jj7z3n_9{
   --rs-theme-dark:1;
 }
-._sizeS_85twx1_13{
+._sizeS_jj7z3n_13{
   --_rs-toggle-width:20px;
   --_rs-toggle-height:12px;
   --_rs-toggle-shadow:3px;
 }
-._sizeM_85twx1_16{
+._sizeM_jj7z3n_16{
   --_rs-toggle-width:28px;
   --_rs-toggle-height:16px;
   --_rs-toggle-shadow:3px;
 }
-._sizeL_85twx1_19{
+._sizeL_jj7z3n_19{
   --_rs-toggle-width:32px;
   --_rs-toggle-height:18px;
   --_rs-toggle-shadow:4px;
 }
-._classic_85twx1_23{
+._classic_jj7z3n_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_85twx1_26{
+._rock_jj7z3n_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_85twx1_30{
+._main_jj7z3n_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_85twx1_30{
+._main_jj7z3n_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_85twx1_30{
+._main_jj7z3n_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_85twx1_30 {
+._main_jj7z3n_30 {
 
   position:relative;
 
@@ -71,7 +71,7 @@
 
   cursor:pointer;
 }
-._main_85twx1_30 input{
+._main_jj7z3n_30 input{
     position:absolute;
     z-index:-1;
 
@@ -81,11 +81,11 @@
 
     pointer-events:none;
   }
-._main_85twx1_30._disabled_85twx1_57{
+._main_jj7z3n_30._disabled_jj7z3n_57{
     cursor:default;
     pointer-events:none;
   }
-._slider_85twx1_63{
+._slider_jj7z3n_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_85twx1_63:after{
+._slider_jj7z3n_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_85twx1_57 ._slider_85twx1_63{
+._disabled_jj7z3n_57 ._slider_jj7z3n_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_85twx1_57 ._slider_85twx1_63:after{
+._disabled_jj7z3n_57 ._slider_jj7z3n_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_85twx1_63:after{
+input:checked + ._slider_jj7z3n_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_85twx1_63:after{
       calc(var(--_rs-toggle-circle-border)/-2)
     );
   }
-._main_85twx1_30:not(._disabled_85twx1_57) input:hover + ._slider_85twx1_63{
+._main_jj7z3n_30:not(._disabled_jj7z3n_57) input:hover + ._slider_jj7z3n_63{
     box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
   }
-._main_85twx1_30:not(._disabled_85twx1_57) input:checked + ._slider_85twx1_63{
+._main_jj7z3n_30:not(._disabled_jj7z3n_57) input:checked + ._slider_jj7z3n_63{
     background-color:var(--_rs-toggle-checked-slider-background-color);
   }
-._main_85twx1_30:not(._disabled_85twx1_57) input:checked + ._slider_85twx1_63:after{
+._main_jj7z3n_30:not(._disabled_jj7z3n_57) input:checked + ._slider_jj7z3n_63:after{
       border-color:var(--_rs-toggle-checked-slider-background-color);
     }
-._main_85twx1_30:not(._disabled_85twx1_57) input:focus[data-focus-method='key'] + ._slider_85twx1_63{
+._main_jj7z3n_30:not(._disabled_jj7z3n_57) input:focus[data-focus-method='key'] + ._slider_jj7z3n_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_85twx1_6",
-  "themeDark": "_themeDark_85twx1_9",
-  "sizeS": "_sizeS_85twx1_13",
-  "sizeM": "_sizeM_85twx1_16",
-  "sizeL": "_sizeL_85twx1_19",
-  "classic": "_classic_85twx1_23",
-  "rock": "_rock_85twx1_26",
-  "main": "_main_85twx1_30",
-  "disabled": "_disabled_85twx1_57",
-  "slider": "_slider_85twx1_63"
+  "themeLight": "_themeLight_jj7z3n_6",
+  "themeDark": "_themeDark_jj7z3n_9",
+  "sizeS": "_sizeS_jj7z3n_13",
+  "sizeM": "_sizeM_jj7z3n_16",
+  "sizeL": "_sizeL_jj7z3n_19",
+  "classic": "_classic_jj7z3n_23",
+  "rock": "_rock_jj7z3n_26",
+  "main": "_main_jj7z3n_30",
+  "disabled": "_disabled_jj7z3n_57",
+  "slider": "_slider_jj7z3n_63"
 };
 export { styles as default };

package/llm/components/toggle.md

@@ -0,0 +1,204 @@
+# 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
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { Toggle } from '@rescui/toggle';
+
+const MyToggle = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)', maxWidth: 400 }}>
+      <Toggle className={className} 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>
+);
+```
+
+```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;
+}
+```
+
+#### `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
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```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>
+  );
+};
+
+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>
+);
+```
+
+```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;
+}
+```

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-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
+  "version": "0.5.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19+b138dd5bf",
   "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,7 +17,7 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/menu": "0.13.6-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.18+2a311c841",
+    "@rescui/menu": "0.13.6-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19+b138dd5bf",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
@@ -25,7 +26,7 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-2a311c841.53+2a311c841",
+    "@rescui/colors": "0.3.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.54+b138dd5bf",
     "@rescui/scripts": "0.5.2",
     "@rescui/visual-regression": "0.1.4",
     "@types/classnames": "^2.2.11"
@@ -35,5 +36,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "2a311c841551a48c46895aff5609fe099bbe1a61"
+  "gitHead": "b138dd5bf3dbdca6c21fa339dd567517d5c5d1d9"
 }