@hh.ru/magritte-ui-switch 1.4.4

package/Skeleton-a144d15a.js

@@ -0,0 +1,12 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
+
+var styles = {"switch":"magritte-switch___0AZYC_1-4-4","slider":"magritte-slider___YN62u_1-4-4","checked":"magritte-checked___QEAn5_1-4-4","switch-skeleton":"magritte-switch-skeleton___g1MEY_1-4-4","switchSkeleton":"magritte-switch-skeleton___g1MEY_1-4-4"};
+
+const SwitchSkeleton = ({ Component: Switch, 
+// skeleton props
+width, height, borderRadius, inline, additionalClass, loading, ...switchProps }) => (jsx(Skeleton, { loading: loading, additionalClass: styles.switchSkeleton, inline: true, children: jsx(Switch, { ...switchProps }) }));
+
+export { SwitchSkeleton as S, styles as s };
+//# sourceMappingURL=Skeleton-a144d15a.js.map

package/Skeleton-a144d15a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton-a144d15a.js","sources":["../src/Skeleton.tsx"],"sourcesContent":["import { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { SwitchProps } from '@hh.ru/magritte-ui-switch/types';\n\nimport styles from './switch.less';\n\nexport const SwitchSkeleton: IncompleteSkeletonComponent<SwitchProps> = ({\n    Component: Switch,\n\n    // skeleton props\n    width,\n    height,\n    borderRadius,\n    inline,\n    additionalClass,\n    loading,\n\n    ...switchProps\n}) => (\n    <Skeleton loading={loading} additionalClass={styles.switchSkeleton} inline>\n        <Switch {...switchProps} />\n    </Skeleton>\n);\n"],"names":["_jsx"],"mappings":";;;;;MAKa,cAAc,GAA6C,CAAC,EACrE,SAAS,EAAE,MAAM;AAEjB;AACA,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,WAAW,EACjB,MACGA,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,EAAA,IAAA,EAAA,QAAA,EACtEA,IAAC,MAAM,EAAA,EAAA,GAAK,WAAW,EAAI,CAAA,EAAA,CACpB;;;;"}

package/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import { IncompleteSkeletonComponent } from '@hh.ru/magritte-ui-skeleton';
+import { SwitchProps } from './types';
+export declare const SwitchSkeleton: IncompleteSkeletonComponent<SwitchProps>;

package/Skeleton.js

@@ -0,0 +1,5 @@
+import './index.css';
+import 'react/jsx-runtime';
+import '@hh.ru/magritte-ui-skeleton';
+export { S as SwitchSkeleton } from './Skeleton-a144d15a.js';
+//# sourceMappingURL=Skeleton.js.map

package/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/Switch.d.ts

@@ -0,0 +1,2 @@
+import { SwitchProps } from './types';
+export declare const Switch: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<SwitchProps>;

package/Switch.js

@@ -0,0 +1,19 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+import { LockClosedFilledSize16 } from '@hh.ru/magritte-ui-icon/icon';
+import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
+import { S as SwitchSkeleton, s as styles } from './Skeleton-a144d15a.js';
+
+const SwitchComponent = ({ onClick, ariaLabel, disabled = false, checked = false, ...props }) => {
+    const forceDisabled = useDisabled();
+    const switchClasses = classnames(styles.switch, {
+        [styles.checked]: checked,
+    });
+    return (jsx("button", { ...props, type: "button", className: switchClasses, onClick: onClick, disabled: forceDisabled || disabled, "aria-checked": checked, "aria-label": ariaLabel, role: "switch", children: jsx("span", { className: styles.slider, children: (forceDisabled || disabled) && jsx(LockClosedFilledSize16, {}) }) }));
+};
+const Switch = enrichWithSkeleton(SwitchComponent, SwitchSkeleton);
+
+export { Switch };
+//# sourceMappingURL=Switch.js.map

package/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../src/Switch.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { LockClosedFilledSize16 } from '@hh.ru/magritte-ui-icon/icon';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { SwitchSkeleton } from '@hh.ru/magritte-ui-switch/Skeleton';\nimport { SwitchProps } from '@hh.ru/magritte-ui-switch/types';\n\nimport styles from './switch.less';\n\nconst SwitchComponent: FC<SwitchProps> = ({ onClick, ariaLabel, disabled = false, checked = false, ...props }) => {\n    const forceDisabled = useDisabled();\n\n    const switchClasses = classnames(styles.switch, {\n        [styles.checked]: checked,\n    });\n\n    return (\n        <button\n            {...props}\n            type=\"button\"\n            className={switchClasses}\n            onClick={onClick}\n            disabled={forceDisabled || disabled}\n            aria-checked={checked}\n            aria-label={ariaLabel}\n            role=\"switch\"\n        >\n            <span className={styles.slider}>{(forceDisabled || disabled) && <LockClosedFilledSize16 />}</span>\n        </button>\n    );\n};\n\nexport const Switch = enrichWithSkeleton(SwitchComponent, SwitchSkeleton);\n"],"names":["_jsx"],"mappings":";;;;;;;AAWA,MAAM,eAAe,GAAoB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,KAAI;AAC7G,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AAEpC,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;AAC5C,QAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;AAC5B,KAAA,CAAC,CAAC;IAEH,QACIA,mBACQ,KAAK,EACT,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,aAAa,IAAI,QAAQ,EAAA,cAAA,EACrB,OAAO,EAAA,YAAA,EACT,SAAS,EACrB,IAAI,EAAC,QAAQ,EAAA,QAAA,EAEbA,cAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAA,QAAA,EAAG,CAAC,aAAa,IAAI,QAAQ,KAAKA,GAAA,CAAC,sBAAsB,EAAG,EAAA,CAAA,EAAA,CAAQ,EAC7F,CAAA,EACX;AACN,CAAC,CAAC;AAEW,MAAA,MAAM,GAAG,kBAAkB,CAAC,eAAe,EAAE,cAAc;;;;"}

package/index.css

@@ -0,0 +1,134 @@
+:root{
+  --magritte-color-component-switch-stroke-state-focused-accessible-v18-1-1:#0070ff7a;
+  --magritte-color-component-switch-background-container-checked-v18-1-1:#0dc267;
+  --magritte-color-component-switch-background-container-unchecked-v18-1-1:#DCE3EB;
+  --magritte-color-component-switch-background-toggle-checked-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-toggle-unchecked-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-state-container-checked-hovered-v18-1-1:#5bcf83;
+  --magritte-color-component-switch-background-state-container-checked-pressed-v18-1-1:#5bcf83;
+  --magritte-color-component-switch-background-state-container-unchecked-hovered-v18-1-1:#CCD5DF;
+  --magritte-color-component-switch-background-state-container-unchecked-pressed-v18-1-1:#CCD5DF;
+  --magritte-color-component-switch-background-state-toggle-checked-pressed-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-state-toggle-unchecked-pressed-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-state-container-checked-disabled-v18-1-1:#0dc2677a;
+  --magritte-color-component-switch-background-state-container-unchecked-disabled-v18-1-1:#dce3eb7a;
+  --magritte-color-component-switch-icon-state-toggle-checked-disabled-v18-1-1:#0ea6587a;
+  --magritte-color-component-switch-icon-state-toggle-unchecked-disabled-v18-1-1:#7686947a;
+  --magritte-shadow-level-1-color-v18-1-1:#7090b029;
+  --magritte-shadow-level-1-x-v18-1-1:0px;
+  --magritte-shadow-level-1-y-v18-1-1:4px;
+  --magritte-shadow-level-1-blur-v18-1-1:12px;
+  --magritte-shadow-level-1-spread-v18-1-1:0px;
+}
+:root{
+  --magritte-semantic-animation-ease-in-out-leopard-300-timing-function-v18-1-1:cubic-bezier(0.35, 0.1, 0.1, 1);
+  --magritte-semantic-animation-ease-in-out-leopard-300-duration-v18-1-1:300ms;
+}
+.magritte-night-theme{
+  --magritte-color-component-switch-stroke-state-focused-accessible-v18-1-1:#0070ff7a;
+  --magritte-color-component-switch-background-container-checked-v18-1-1:#0dc267;
+  --magritte-color-component-switch-background-container-unchecked-v18-1-1:#303030;
+  --magritte-color-component-switch-background-toggle-checked-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-toggle-unchecked-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-state-container-checked-hovered-v18-1-1:#5bcf83;
+  --magritte-color-component-switch-background-state-container-checked-pressed-v18-1-1:#5bcf83;
+  --magritte-color-component-switch-background-state-container-unchecked-hovered-v18-1-1:#3B3B3B;
+  --magritte-color-component-switch-background-state-container-unchecked-pressed-v18-1-1:#3B3B3B;
+  --magritte-color-component-switch-background-state-toggle-checked-pressed-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-state-toggle-unchecked-pressed-v18-1-1:#ffffff;
+  --magritte-color-component-switch-background-state-container-checked-disabled-v18-1-1:#0dc2677a;
+  --magritte-color-component-switch-background-state-container-unchecked-disabled-v18-1-1:#3030307a;
+  --magritte-color-component-switch-icon-state-toggle-checked-disabled-v18-1-1:#0ea6587a;
+  --magritte-color-component-switch-icon-state-toggle-unchecked-disabled-v18-1-1:#7686947a;
+  --magritte-shadow-level-1-color-v18-1-1:#00000029;
+  --magritte-shadow-level-1-x-v18-1-1:0px;
+  --magritte-shadow-level-1-y-v18-1-1:4px;
+  --magritte-shadow-level-1-blur-v18-1-1:12px;
+  --magritte-shadow-level-1-spread-v18-1-1:0px;
+}
+.magritte-switch___0AZYC_1-4-4{
+  width:56px;
+  height:36px;
+  background-color:var(--magritte-color-component-switch-background-container-unchecked-v18-1-1);
+  border-radius:18px;
+  cursor:pointer;
+  position:relative;
+}
+.magritte-switch___0AZYC_1-4-4:active:not(:disabled){
+  background-color:var(--magritte-color-component-switch-background-state-container-unchecked-pressed-v18-1-1);
+}
+.magritte-switch___0AZYC_1-4-4:active:not(:disabled) .magritte-slider___YN62u_1-4-4{
+  border-radius:14px;
+  background-color:var(--magritte-color-component-switch-background-state-toggle-unchecked-pressed-v18-1-1);
+  width:36px;
+}
+.magritte-switch___0AZYC_1-4-4:disabled{
+  cursor:not-allowed;
+  background-color:var(--magritte-color-component-switch-background-state-container-unchecked-disabled-v18-1-1);
+  border-radius:20px;
+}
+.magritte-switch___0AZYC_1-4-4:disabled.magritte-checked___QEAn5_1-4-4{
+  background-color:var(--magritte-color-component-switch-background-state-container-checked-disabled-v18-1-1);
+}
+.magritte-switch___0AZYC_1-4-4:focus-visible{
+  outline:var(--magritte-color-component-switch-stroke-state-focused-accessible-v18-1-1) solid 4px;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-switch___0AZYC_1-4-4:hover:not(:disabled):not(:active){
+    background-color:var(--magritte-color-component-switch-background-state-container-unchecked-hovered-v18-1-1);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-switch___0AZYC_1-4-4:hover:not(:disabled):not(:active){
+    background-color:var(--magritte-color-component-switch-background-state-container-unchecked-hovered-v18-1-1);
+  }
+}
+.magritte-slider___YN62u_1-4-4{
+  width:28px;
+  height:28px;
+  background-color:var(--magritte-color-component-switch-background-toggle-unchecked-v18-1-1);
+  border-radius:50%;
+  position:absolute;
+  left:0;
+  right:auto;
+  top:0;
+  transition-duration:var(--magritte-semantic-animation-ease-in-out-leopard-300-duration-v18-1-1);
+  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-leopard-300-timing-function-v18-1-1);
+  margin:4px;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  --magritte-ui-icon-color-override:var(--magritte-color-component-switch-icon-state-toggle-unchecked-disabled-v18-1-1);
+  box-shadow:var(--magritte-shadow-level-1-x-v18-1-1) var(--magritte-shadow-level-1-y-v18-1-1) var(--magritte-shadow-level-1-blur-v18-1-1) var(--magritte-shadow-level-1-spread-v18-1-1) var(--magritte-shadow-level-1-color-v18-1-1);
+}
+.magritte-checked___QEAn5_1-4-4{
+  background-color:var(--magritte-color-component-switch-background-container-checked-v18-1-1);
+}
+.magritte-checked___QEAn5_1-4-4 .magritte-slider___YN62u_1-4-4{
+  background-color:var(--magritte-color-component-switch-background-toggle-checked-v18-1-1);
+  left:calc(56px - (28px + 4px*2));
+  --magritte-ui-icon-color-override:var(--magritte-color-component-switch-icon-state-toggle-checked-disabled-v18-1-1);
+}
+.magritte-checked___QEAn5_1-4-4:active:not(:disabled){
+  background-color:var(--magritte-color-component-switch-background-state-container-checked-pressed-v18-1-1);
+}
+.magritte-checked___QEAn5_1-4-4:active:not(:disabled) .magritte-slider___YN62u_1-4-4{
+  background-color:var(--magritte-color-component-switch-background-state-toggle-checked-pressed-v18-1-1);
+  width:36px;
+  left:calc(56px - (36px + 4px*2));
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout .magritte-checked___QEAn5_1-4-4:hover:not(:disabled):not(:active){
+    background-color:var(--magritte-color-component-switch-background-state-container-checked-hovered-v18-1-1);
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout) .magritte-checked___QEAn5_1-4-4:hover:not(:disabled):not(:active){
+    background-color:var(--magritte-color-component-switch-background-state-container-checked-hovered-v18-1-1);
+  }
+}
+.magritte-switch-skeleton___g1MEY_1-4-4{
+  width:56px;
+  height:36px;
+  border-radius:18px;
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Switch';
+export * from './types';
+export * from '@hh.ru/magritte-ui-theme-provider';

package/index.js

@@ -0,0 +1,10 @@
+import './index.css';
+export { Switch } from './Switch.js';
+export * from '@hh.ru/magritte-ui-theme-provider';
+import 'react/jsx-runtime';
+import 'classnames';
+import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-skeleton';
+import './Skeleton-a144d15a.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@hh.ru/magritte-ui-switch",
+  "version": "1.4.4",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-use-disabled": "1.0.8",
+    "@hh.ru/magritte-design-tokens": "18.1.1",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-icon": "7.1.3",
+    "@hh.ru/magritte-ui-skeleton": "2.1.2",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.21"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/types.d.ts

@@ -0,0 +1,10 @@
+export interface SwitchProps {
+    /** флаг состояния по умолчанию - включен - true, выключен/отсутствует - false*/
+    checked?: boolean;
+    /** компонент отключен для взаимодействия */
+    disabled?: boolean;
+    /** функция действия на клик */
+    onClick?: () => void;
+    /** атрибут aria-label */
+    ariaLabel?: string;
+}

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}