@rescui/toggle 0.5.4 → 0.6.0

package/lib/index.css

@@ -3,36 +3,36 @@
   inherits:true;
   initial-value:0;
 }
-._themeLight_zrnxwd_6{
+._themeLight_wfqrsh_6{
   --rs-theme-dark:0;
 }
-._themeDark_zrnxwd_9{
+._themeDark_wfqrsh_9{
   --rs-theme-dark:1;
 }
-._sizeS_zrnxwd_13{
+._sizeS_wfqrsh_13{
   --_rs-toggle-width:20px;
   --_rs-toggle-height:12px;
   --_rs-toggle-shadow:3px;
 }
-._sizeM_zrnxwd_16{
+._sizeM_wfqrsh_16{
   --_rs-toggle-width:28px;
   --_rs-toggle-height:16px;
   --_rs-toggle-shadow:3px;
 }
-._sizeL_zrnxwd_19{
+._sizeL_wfqrsh_19{
   --_rs-toggle-width:32px;
   --_rs-toggle-height:18px;
   --_rs-toggle-shadow:4px;
 }
-._classic_zrnxwd_23{
+._classic_wfqrsh_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_zrnxwd_26{
+._rock_wfqrsh_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_zrnxwd_30{
+._main_wfqrsh_30{
   --_rs-toggle-circle-border:2px;
 
   --_rs-theme-dark:var(
@@ -47,7 +47,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_zrnxwd_30{
+._main_wfqrsh_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)));
@@ -56,7 +56,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_zrnxwd_30{
+._main_wfqrsh_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));
@@ -64,7 +64,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_zrnxwd_30 {
+._main_wfqrsh_30 {
 
   position:relative;
 
@@ -76,7 +76,7 @@
 
   cursor:pointer;
 }
-._main_zrnxwd_30 input{
+._main_wfqrsh_30 input{
     position:absolute;
     z-index:-1;
 
@@ -86,11 +86,11 @@
 
     pointer-events:none;
   }
-._main_zrnxwd_30._disabled_zrnxwd_57{
+._main_wfqrsh_30._disabled_wfqrsh_57{
     cursor:default;
     pointer-events:none;
   }
-._slider_zrnxwd_63{
+._slider_wfqrsh_63{
   position:absolute;
   top:var(--_rs-toggle-shadow);
   left:var(--_rs-toggle-shadow);
@@ -104,7 +104,7 @@
 
   transition:background-color 200ms var(--rs-transition-function, ease);
 }
-._slider_zrnxwd_63:after{
+._slider_wfqrsh_63:after{
     position:absolute;
     top:0;
     left:0;
@@ -123,15 +123,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_zrnxwd_57 ._slider_zrnxwd_63{
+._disabled_wfqrsh_57 ._slider_wfqrsh_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_zrnxwd_57 ._slider_zrnxwd_63:after{
+._disabled_wfqrsh_57 ._slider_wfqrsh_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_zrnxwd_63:after{
+input:checked + ._slider_wfqrsh_63:after{
     width:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
     height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
 
@@ -140,15 +140,15 @@ input:checked + ._slider_zrnxwd_63:after{
       calc(var(--_rs-toggle-circle-border)/-2)
     );
   }
-._main_zrnxwd_30:not(._disabled_zrnxwd_57) input:hover + ._slider_zrnxwd_63{
+._main_wfqrsh_30:not(._disabled_wfqrsh_57) input:hover + ._slider_wfqrsh_63{
     box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
   }
-._main_zrnxwd_30:not(._disabled_zrnxwd_57) input:checked + ._slider_zrnxwd_63{
+._main_wfqrsh_30:not(._disabled_wfqrsh_57) input:checked + ._slider_wfqrsh_63{
     background-color:var(--_rs-toggle-checked-slider-background-color);
   }
-._main_zrnxwd_30:not(._disabled_zrnxwd_57) input:checked + ._slider_zrnxwd_63:after{
+._main_wfqrsh_30:not(._disabled_wfqrsh_57) input:checked + ._slider_wfqrsh_63:after{
       border-color:var(--_rs-toggle-checked-slider-background-color);
     }
-._main_zrnxwd_30:not(._disabled_zrnxwd_57) input:focus[data-focus-method='key'] + ._slider_zrnxwd_63{
+._main_wfqrsh_30:not(._disabled_wfqrsh_57) input:focus[data-focus-method='key'] + ._slider_wfqrsh_63{
     box-shadow:0 0 0 var(--_rs-toggle-shadow) var(--_rs-color-primary-t-dim);
   }

package/lib/toggle-control.js

@@ -1,4 +1,6 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
@@ -17,40 +19,143 @@ const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-const ToggleControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    className,
-    value,
-    defaultChecked,
-    checked,
-    onChange,
-    size = 'm',
-    mode = 'classic',
-    disabled = false,
-    theme: themeFromProps,
-    notUseLabelTag,
-    tabIndex = 0,
-    ...restProps
-  } = _ref;
+const ToggleControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  const $ = c(33);
+  let checked;
+  let className;
+  let defaultChecked;
+  let notUseLabelTag;
+  let onChange;
+  let restProps;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let themeFromProps;
+  let value;
+
+  if ($[0] !== t0) {
+    ({
+      className,
+      value,
+      defaultChecked,
+      checked,
+      onChange,
+      size: t1,
+      mode: t2,
+      disabled: t3,
+      theme: themeFromProps,
+      notUseLabelTag,
+      tabIndex: t4,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = className;
+    $[3] = defaultChecked;
+    $[4] = notUseLabelTag;
+    $[5] = onChange;
+    $[6] = restProps;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = themeFromProps;
+    $[12] = value;
+  } else {
+    checked = $[1];
+    className = $[2];
+    defaultChecked = $[3];
+    notUseLabelTag = $[4];
+    onChange = $[5];
+    restProps = $[6];
+    t1 = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    themeFromProps = $[11];
+    value = $[12];
+  }
+
+  const size = t1 === undefined ? "m" : t1;
+  const mode = t2 === undefined ? "classic" : t2;
+  const disabled = t3 === undefined ? false : t3;
+  const tabIndex = t4 === undefined ? 0 : t4;
   const theme = useThemeWithUndefined(themeFromProps);
-  const RootTag = notUseLabelTag ? 'span' : 'label';
-  return /*#__PURE__*/React.createElement(RootTag, {
-    className: cn(className, styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], disabled && styles.disabled),
-    "data-rs-internal": 'toggle'
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    "data-test": "toggle__input",
-    ref: ref,
-    defaultChecked: defaultChecked,
-    onChange: onChange,
-    value: value,
-    disabled: disabled,
-    checked: checked,
-    tabIndex: disabled ? -1 : tabIndex,
-    ...restProps
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles.slider
-  }));
+  const RootTag = notUseLabelTag ? "span" : "label";
+  const t5 = SIZE_STYLES[size];
+  const t6 = MODE_STYLES[mode];
+  const t7 = THEME_STYLES[theme];
+  const t8 = disabled && styles.disabled;
+  let t9;
+
+  if ($[13] !== className || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8) {
+    t9 = cn(className, styles.main, t5, t6, t7, t8);
+    $[13] = className;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = t7;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+
+  const t10 = disabled ? -1 : tabIndex;
+  let t11;
+
+  if ($[19] !== checked || $[20] !== defaultChecked || $[21] !== disabled || $[22] !== onChange || $[23] !== ref || $[24] !== restProps || $[25] !== t10 || $[26] !== value) {
+    t11 = /*#__PURE__*/React.createElement("input", _extends({
+      type: "checkbox",
+      "data-test": "toggle__input",
+      ref: ref,
+      defaultChecked: defaultChecked,
+      onChange: onChange,
+      value: value,
+      disabled: disabled,
+      checked: checked,
+      tabIndex: t10
+    }, restProps));
+    $[19] = checked;
+    $[20] = defaultChecked;
+    $[21] = disabled;
+    $[22] = onChange;
+    $[23] = ref;
+    $[24] = restProps;
+    $[25] = t10;
+    $[26] = value;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+
+  let t12;
+
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /*#__PURE__*/React.createElement("span", {
+      className: styles.slider
+    });
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+
+  let t13;
+
+  if ($[29] !== RootTag || $[30] !== t11 || $[31] !== t9) {
+    t13 = /*#__PURE__*/React.createElement(RootTag, {
+      className: t9,
+      "data-rs-internal": "toggle"
+    }, t11, t12);
+    $[29] = RootTag;
+    $[30] = t11;
+    $[31] = t9;
+    $[32] = t13;
+  } else {
+    t13 = $[32];
+  }
+
+  return t13;
 });
 ToggleControl.displayName = 'ToggleControl';
 ToggleControl.propTypes = {

package/lib/toggle.js

@@ -1,36 +1,90 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { MenuItem } from '@rescui/menu';
 import { ToggleControl } from './toggle-control.js';
-const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(_ref, ref) {
-  let {
-    className,
-    checked,
-    defaultChecked,
-    onChange,
-    size = 'm',
-    mode = 'classic',
-    disabled = false,
-    theme: themeFromProps,
-    value,
-    children,
-    labelPlacement = 'right',
-    ...restProps
-  } = _ref;
+const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(t0, ref) {
+  const $ = c(34);
+  let checked;
+  let children;
+  let className;
+  let defaultChecked;
+  let onChange;
+  let restProps;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let themeFromProps;
+  let value;
+
+  if ($[0] !== t0) {
+    ({
+      className,
+      checked,
+      defaultChecked,
+      onChange,
+      size: t1,
+      mode: t2,
+      disabled: t3,
+      theme: themeFromProps,
+      value,
+      children,
+      labelPlacement: t4,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = children;
+    $[3] = className;
+    $[4] = defaultChecked;
+    $[5] = onChange;
+    $[6] = restProps;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = themeFromProps;
+    $[12] = value;
+  } else {
+    checked = $[1];
+    children = $[2];
+    className = $[3];
+    defaultChecked = $[4];
+    onChange = $[5];
+    restProps = $[6];
+    t1 = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    themeFromProps = $[11];
+    value = $[12];
+  }
+
+  const size = t1 === undefined ? "m" : t1;
+  const mode = t2 === undefined ? "classic" : t2;
+  const disabled = t3 === undefined ? false : t3;
+  const labelPlacement = t4 === undefined ? "right" : t4;
   const theme = useThemeWithUndefined(themeFromProps);
-  const iconPlacement = labelPlacement === 'right' ? 'left' : 'right';
-  return /*#__PURE__*/React.createElement(MenuItem, {
-    className: cn(className),
-    tag: 'label',
-    mode: 'clear',
-    size: size,
-    theme: theme,
-    disabled: disabled,
-    tabIndex: null,
-    icon: /*#__PURE__*/React.createElement(ToggleControl, {
+  const iconPlacement = labelPlacement === "right" ? "left" : "right";
+  let t5;
+
+  if ($[13] !== className) {
+    t5 = cn(className);
+    $[13] = className;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+
+  let t6;
+
+  if ($[15] !== checked || $[16] !== defaultChecked || $[17] !== disabled || $[18] !== mode || $[19] !== onChange || $[20] !== ref || $[21] !== restProps || $[22] !== size || $[23] !== theme || $[24] !== value) {
+    t6 = /*#__PURE__*/React.createElement(ToggleControl, _extends({
       value: value,
       checked: checked,
       defaultChecked: defaultChecked,
@@ -40,12 +94,51 @@ const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(_ref, ref) {
       mode: mode,
       disabled: disabled,
       ref: ref,
-      notUseLabelTag: true,
-      ...restProps
-    }),
-    iconPlacement: iconPlacement,
-    "data-test": 'toggle'
-  }, children);
+      notUseLabelTag: true
+    }, restProps));
+    $[15] = checked;
+    $[16] = defaultChecked;
+    $[17] = disabled;
+    $[18] = mode;
+    $[19] = onChange;
+    $[20] = ref;
+    $[21] = restProps;
+    $[22] = size;
+    $[23] = theme;
+    $[24] = value;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+
+  let t7;
+
+  if ($[26] !== children || $[27] !== disabled || $[28] !== iconPlacement || $[29] !== size || $[30] !== t5 || $[31] !== t6 || $[32] !== theme) {
+    t7 = /*#__PURE__*/React.createElement(MenuItem, {
+      className: t5,
+      tag: "label",
+      mode: "clear",
+      size: size,
+      theme: theme,
+      disabled: disabled,
+      tabIndex: null,
+      icon: t6,
+      iconPlacement: iconPlacement,
+      "data-test": "toggle"
+    }, children);
+    $[26] = children;
+    $[27] = disabled;
+    $[28] = iconPlacement;
+    $[29] = size;
+    $[30] = t5;
+    $[31] = t6;
+    $[32] = theme;
+    $[33] = t7;
+  } else {
+    t7 = $[33];
+  }
+
+  return t7;
 });
 Toggle.propTypes = {
   children: PropTypes.node,

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

@@ -1,13 +1,13 @@
 var styles = {
-  "themeLight": "_themeLight_zrnxwd_6",
-  "themeDark": "_themeDark_zrnxwd_9",
-  "sizeS": "_sizeS_zrnxwd_13",
-  "sizeM": "_sizeM_zrnxwd_16",
-  "sizeL": "_sizeL_zrnxwd_19",
-  "classic": "_classic_zrnxwd_23",
-  "rock": "_rock_zrnxwd_26",
-  "main": "_main_zrnxwd_30",
-  "disabled": "_disabled_zrnxwd_57",
-  "slider": "_slider_zrnxwd_63"
+  "themeLight": "_themeLight_wfqrsh_6",
+  "themeDark": "_themeDark_wfqrsh_9",
+  "sizeS": "_sizeS_wfqrsh_13",
+  "sizeM": "_sizeM_wfqrsh_16",
+  "sizeL": "_sizeL_wfqrsh_19",
+  "classic": "_classic_wfqrsh_23",
+  "rock": "_rock_wfqrsh_26",
+  "main": "_main_wfqrsh_30",
+  "disabled": "_disabled_wfqrsh_57",
+  "slider": "_slider_wfqrsh_63"
 };
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/toggle",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Toggle is a control that allows you to turn elements on and off instantly",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,17 +17,18 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/menu": "^0.14.1",
-    "classnames": "^2.2.6"
+    "@rescui/menu": "^0.15.0",
+    "classnames": "^2.2.6",
+    "react-compiler-runtime": "^1.0.0"
   },
   "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.3",
-    "@rescui/scripts": "^0.5.2",
+    "@rescui/colors": "^0.3.4",
+    "@rescui/scripts": "^0.5.3",
     "@rescui/visual-regression": "^0.1.4",
     "@types/classnames": "^2.2.11"
   },
@@ -36,5 +37,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
+  "gitHead": "8ffbbe20b8bcbb9ea15204113ab603675d4c03cd"
 }