@rescui/toggle - npm Package Compare versions

Comparing version 0.4.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19 to 0.4.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-be7d5720.20

lib/index.css

+._themeLight_1fwg1uu_6{
+  --rs-theme-dark:0;
+}
+._themeDark_1fwg1uu_9{
+  --rs-theme-dark:1;
+}
+._sizeS_1fwg1uu_13{
+  --_rs-toggle-width:20px;
+  --_rs-toggle-height:12px;
+  --_rs-toggle-shadow:3px;
+}
+._sizeM_1fwg1uu_16{
+  --_rs-toggle-width:28px;
+  --_rs-toggle-height:16px;
+  --_rs-toggle-shadow:3px;
+}
+._sizeL_1fwg1uu_19{
+  --_rs-toggle-width:32px;
+  --_rs-toggle-height:18px;
+  --_rs-toggle-shadow:4px;
+}
+._classic_1fwg1uu_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_1fwg1uu_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_1fwg1uu_30{
+  --_rs-toggle-circle-border:2px;
+
+  --_rs-theme-dark:var(
+    --_rs-internal-force-theme-dark-consult-rescui-before-using,
+    var(--rs-theme-dark, 0)
+  );
+
+  --_rs-theme-flip:var(--rs-theme-flip, 0);
+
+  --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
+
+  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
+}
+@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
+._main_1fwg1uu_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)));
+      --_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)));
+      --_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)));
+}
+  }
+@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
+._main_1fwg1uu_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));
+    --_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);
+    --_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_1fwg1uu_30 {
+
+  position:relative;
+
+  display:inline-flex;
+  align-self:center;
+
+  width:calc(var(--_rs-toggle-width) + var(--_rs-toggle-shadow)*2);
+  height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-shadow)*2);
+
+  cursor:pointer;
+}
+._main_1fwg1uu_30 input{
+    position:absolute;
+    z-index:-1;
+
+    opacity:0;
+
+    margin:0;
+
+    pointer-events:none;
+  }
+._main_1fwg1uu_30._disabled_1fwg1uu_57{
+    cursor:default;
+    pointer-events:none;
+  }
+._slider_1fwg1uu_63{
+  position:absolute;
+  top:var(--_rs-toggle-shadow);
+  left:var(--_rs-toggle-shadow);
+
+  width:var(--_rs-toggle-width);
+  height:var(--_rs-toggle-height);
+
+  border-radius:34px;
+
+  background-color:#8C8C8E;
+
+  transition:background-color 200ms;
+}
+._slider_1fwg1uu_63:after{
+    position:absolute;
+    top:0;
+    left:0;
+
+    box-sizing:border-box;
+    width:var(--_rs-toggle-height);
+    height:var(--_rs-toggle-height);
+
+    border:var(--_rs-toggle-circle-border) solid #8C8C8E;
+    border-radius:50%;
+
+    content:'';
+
+    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));
+
+    transition:transform 200ms, height 200ms, width 200ms, border-color 200ms;
+    transform:translate(0);
+  }
+._disabled_1fwg1uu_57 ._slider_1fwg1uu_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_1fwg1uu_57 ._slider_1fwg1uu_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_1fwg1uu_63:after{
+    width:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
+    height:calc(var(--_rs-toggle-height) + var(--_rs-toggle-circle-border));
+
+    transform:translate(
+      calc(var(--_rs-toggle-width) - var(--_rs-toggle-height) - var(--_rs-toggle-circle-border)/2),
+      calc(var(--_rs-toggle-circle-border)/-2)
+    );
+  }
+._main_1fwg1uu_30:not(._disabled_1fwg1uu_57) input:hover + ._slider_1fwg1uu_63{
+    box-shadow:var(--_rs-toggle-hover-slider-box-shadow-color) 0 0 0 var(--_rs-toggle-shadow);
+  }
+._main_1fwg1uu_30:not(._disabled_1fwg1uu_57) input:checked + ._slider_1fwg1uu_63{
+    background-color:var(--_rs-toggle-checked-slider-background-color);
+  }
+._main_1fwg1uu_30:not(._disabled_1fwg1uu_57) input:checked + ._slider_1fwg1uu_63:after{
+      border-color:var(--_rs-toggle-checked-slider-background-color);
+    }
+._main_1fwg1uu_30:not(._disabled_1fwg1uu_57) input:focus[data-focus-method='key'] + ._slider_1fwg1uu_63{
+    box-shadow:0 0 0 var(--_rs-toggle-shadow) var(--_rs-color-primary-t-dim);
+  }

lib/index.d.ts

+export { Toggle } from './toggle';
+export type { ToggleProps } from './toggle';
+export { ToggleControl } from './toggle-control';
+export type { ToggleControlProps } from './toggle-control';

lib/index.js

+import './index.css';
+export { Toggle } from './toggle.js';
+export { ToggleControl } from './toggle-control.js';

lib/public-api.p.css

+@define-mixin rs-toggle-size-s{
+  & [data-rs-internal="toggle"]{
+    --_rs-toggle-width:20px;
+    --_rs-toggle-height:12px;
+    --_rs-toggle-shadow:3px;
+  }
+    &[class][class]{
+    --_rs-menu-mi-icon-offset:8px;
+    --_rs-menu-mi-icon-size:20px;
+    --_rs-menu-mi-vertical-padding:6px;
+    --_rs-menu-mi-horizontal-padding:8px;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-3-line-height,
+    20px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  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)
+)
+  );
+    --_rs-typography-text-auto-offset:8px;
+    --_rs-typography-ul-list-li-padding-left:28px;
+    --_rs-typography-ol-list-li-padding-left:21px;
+    --_rs-typography-list-li-margin-top-from-text:8px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+}
+@define-mixin rs-toggle-size-m{
+  & [data-rs-internal="toggle"]{
+    --_rs-toggle-width:28px;
+    --_rs-toggle-height:16px;
+    --_rs-toggle-shadow:3px;
+  }
+    &[class][class]{
+    --_rs-menu-mi-icon-offset:8px;
+    --_rs-menu-mi-icon-size:24px;
+    --_rs-menu-mi-vertical-padding:8px;
+    --_rs-menu-mi-horizontal-padding:16px;
+    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-2-line-height,
+    24px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  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)
+)
+  );
+    --_rs-typography-text-auto-offset:16px;
+    --_rs-typography-ul-list-li-padding-left:22px;
+    --_rs-typography-ol-list-li-padding-left:26px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
+    16px
+  );
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+    @media screen and (max-width: 640px){
+    &[class][class]{
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
+  }
+  }
+}
+@define-mixin rs-toggle-size-l{
+  & [data-rs-internal="toggle"]{
+    --_rs-toggle-width:32px;
+    --_rs-toggle-height:18px;
+    --_rs-toggle-shadow:4px;
+  }
+    &[class][class]{
+    --_rs-menu-mi-icon-offset:16px;
+    --_rs-menu-mi-icon-size:28px;
+    --_rs-menu-mi-vertical-padding:12px;
+    --_rs-menu-mi-horizontal-padding:16px;
+    --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-1-line-height,
+    28px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  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)
+)
+  );
+    --_rs-typography-text-auto-offset:32px;
+    --_rs-typography-ul-list-li-padding-left:26px;
+    --_rs-typography-ol-list-li-padding-left:32px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text,
+    24px
+  );
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+    @media screen and (max-width: 640px){
+    &[class][class]{
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
+  }
+  }
+}
+@define-mixin rs-toggle-mode-classic{
+  & [data-rs-internal="toggle"]{
+    --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
+    --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
+  }
+}
+@define-mixin rs-toggle-mode-rock{
+  & [data-rs-internal="toggle"]{
+    --_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));
+  }
+}
+@define-mixin rs-toggle-label-placement-left{
+    &[class][class]{
+    --_rs-menu-mi-flex-direction:row-reverse;
+    --_rs-menu-mi-justify-content:space-between;
+  }
+}
+@define-mixin rs-toggle-label-placement-right{
+    &[class][class]{
+    --_rs-menu-mi-flex-direction:row;
+    --_rs-menu-mi-justify-content:initial;
+  }
+}
+@define-mixin rs-toggle-control-size-s{
+  &[class]{
+    --_rs-toggle-width:20px;
+    --_rs-toggle-height:12px;
+    --_rs-toggle-shadow:3px;
+  }
+}
+@define-mixin rs-toggle-control-size-m{
+  &[class]{
+    --_rs-toggle-width:28px;
+    --_rs-toggle-height:16px;
+    --_rs-toggle-shadow:3px;
+  }
+}
+@define-mixin rs-toggle-control-size-l{
+  &[class]{
+    --_rs-toggle-width:32px;
+    --_rs-toggle-height:18px;
+    --_rs-toggle-shadow:4px;
+  }
+}
+@define-mixin rs-toggle-control-mode-classic{
+  &[class]{
+    --_rs-toggle-hover-slider-box-shadow-color:var(--_rs-color-primary-t-fog);
+    --_rs-toggle-checked-slider-background-color:var(--_rs-color-primary);
+  }
+}
+@define-mixin rs-toggle-control-mode-rock{
+  &[class]{
+    --_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));
+  }
+}

lib/toggle-control.d.ts

+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import type { ToggleMode, ToggleSize } from './types';
+export interface ToggleControlProps {
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Checked state. `onChange` callback is required.
+     */
+    checked?: boolean;
+    /**
+     * Is checkbox initially checked
+     */
+    defaultChecked?: boolean;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Size
+     */
+    size?: ToggleSize;
+    /**
+     * Appearance mode
+     */
+    mode?: ToggleMode;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Appearance theme
+     */
+    theme?: Theme;
+    /**
+     * Value of the checkbox
+     */
+    value?: string;
+    tabIndex?: number;
+    /**
+     * Change value callback
+     */
+    onChange?: React.ChangeEventHandler<{
+        checked?: boolean;
+    }>;
+    /**
+     * Cancel the use of the `label` tag inside.
+     * Set it to `true` only if the component is wrapped in a `label` on the outside.
+     */
+    notUseLabelTag?: boolean;
+}
+export declare const ToggleControl: React.ForwardRefExoticComponent<ToggleControlProps & React.RefAttributes<HTMLInputElement>>;

lib/toggle-control.js

+"use client";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import styles from './toggle.p.module.css.js';
+const SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+const MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+};
+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 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
+  }));
+});
+ToggleControl.displayName = 'ToggleControl';
+ToggleControl.propTypes = {
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['s', 'm', 'l']),
+  mode: PropTypes.oneOf(['classic', 'rock']),
+  theme: PropTypes.oneOf(['dark', 'light']),
+  value: PropTypes.string,
+  notUseLabelTag: PropTypes.bool
+};
+export { ToggleControl };

lib/toggle.d.ts

+import React from 'react';
+import { ToggleControlProps } from './toggle-control';
+import type { ToggleLabelPlacement } from './types';
+export interface ToggleProps extends Omit<ToggleControlProps, 'notUseLabelTag'> {
+    /**
+     * Label placement relative to toggle
+     */
+    labelPlacement?: ToggleLabelPlacement;
+    /**
+     * Node or text to show near the input
+     * */
+    children?: React.ReactNode;
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

lib/toggle.js

+"use client";
+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 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, {
+      value: value,
+      checked: checked,
+      defaultChecked: defaultChecked,
+      onChange: onChange,
+      theme: theme,
+      size: size,
+      mode: mode,
+      disabled: disabled,
+      ref: ref,
+      notUseLabelTag: true,
+      ...restProps
+    }),
+    iconPlacement: iconPlacement,
+    "data-test": 'toggle'
+  }, children);
+});
+Toggle.propTypes = {
+  children: PropTypes.node,
+  labelPlacement: PropTypes.oneOf(['left', 'right']),
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['s', 'm', 'l']),
+  mode: PropTypes.oneOf(['classic', 'rock']),
+  disabled: PropTypes.bool,
+  theme: PropTypes.oneOf(['dark', 'light']),
+  value: PropTypes.string
+};
+export { Toggle };

lib/toggle.p.module.css.js

+var styles = {
+  "themeLight": "_themeLight_1fwg1uu_6",
+  "themeDark": "_themeDark_1fwg1uu_9",
+  "sizeS": "_sizeS_1fwg1uu_13",
+  "sizeM": "_sizeM_1fwg1uu_16",
+  "sizeL": "_sizeL_1fwg1uu_19",
+  "classic": "_classic_1fwg1uu_23",
+  "rock": "_rock_1fwg1uu_26",
+  "main": "_main_1fwg1uu_30",
+  "disabled": "_disabled_1fwg1uu_57",
+  "slider": "_slider_1fwg1uu_63"
+};
+export { styles as default };

lib/types.d.ts

+export declare type ToggleSize = 's' | 'm' | 'l';
+export declare type ToggleMode = 'classic' | 'rock';
+export declare type ToggleLabelPlacement = 'left' | 'right';

package.json

 {
   "name": "@rescui/toggle",
-  "version": "0.4.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
+  "version": "0.4.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-be7d5720.20+be7d5720",
   "description": "Toggle is a control that allows you to turn elements on and off instantly",
@@ -19,3 +19,3 @@ "license": "Apache-2.0",
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/menu": "0.12.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
+    "@rescui/menu": "0.12.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-be7d5720.20+be7d5720",
     "classnames": "^2.2.6"
@@ -29,3 +29,3 @@ },
   "devDependencies": {
-    "@rescui/colors": "0.2.11-RUI-262-Migrate-to-GH-Actions-Release-dummy-8695a904.19+8695a904",
+    "@rescui/colors": "0.2.11-RUI-262-Migrate-to-GH-Actions-Release-dummy-be7d5720.20+be7d5720",
     "@rescui/scripts": "0.5.1",
@@ -40,3 +40,3 @@ "@rescui/visual-regression": "0.1.2",
   "nx": {},
-  "gitHead": "8695a9042a55369f8df8f03ffd61c988cd3d3df4"
+  "gitHead": "be7d5720ef7e010e8e78f9dcb01533f32ce33ce6"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41814

231.52%

Number of package files

14

366.67%

Lines of code

562

Infinity%

Number of medium supply chain risk alerts

2

-33.33%

Dependency changes

• Updated

  @rescui/menu@0.12.1-RUI-262-Migrate-to-GH-Actions-Release-dummy-be7d5720.20+be7d5720