@fluentui/react-switch 0.0.0-nightly-20220302-0405.1

package/lib-commonjs/components/Switch/useSwitchStyles.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSwitchStyles_unstable = exports.switchClassName = exports.switchClassNames = void 0;
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+exports.switchClassNames = {
+  root: 'fui-Switch',
+  indicator: 'fui-Switch__indicator',
+  input: 'fui-Switch__input',
+  label: 'fui-Switch__label'
+}; // TODO temporary export to pass conformance test.
+
+exports.switchClassName = exports.switchClassNames.root; // TODO replace these spacing constants with theme values once they're on the theme.
+
+const spacingXS = 4;
+const spacingS = 8;
+const spacingM = 12; // Thumb and track sizes used by the component.
+
+const spaceBetweenThumbAndTrack = 2;
+const thumbSize = 14;
+const trackHeight = 20;
+const trackWidth = 40;
+
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "B7ck84d": "f1ewtqcl",
+    "i8kkvl": "f4akndk",
+    "mc9l5x": "ftuwxu6",
+    "z8tnut": "fp9bwmr",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f150uoa4",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "qhf8xq": "f10pi13n",
+    "B486eqv": "f2hkw1w",
+    "c2y4jd": "fsofd9k",
+    "B8vm7ur": "f12sql3b",
+    "f4hv8x": "f1i4q40k",
+    "Gpan81": "fcrbge9",
+    "z7afg": "ft464mn",
+    "rsjj6t": "fskqmiq",
+    "Bqsd8kq": "f2gy8jn",
+    "sfhsbh": "f1pke3uf",
+    "Bugh3ej": "f18xdlq9",
+    "hpanx6": "f1114nks",
+    "Bjkpy09": "f1unftzx",
+    "Jxg1p8": "f8rjbh6",
+    "Bc94xmo": ["fxfgh6q", "f8l10fm"],
+    "Bj23z95": ["f8l10fm", "fxfgh6q"]
+  },
+  "above": {
+    "Beiy3e4": "f1vx9l62",
+    "z8tnut": "f10ra9hq",
+    "Belr9w4": "f1ma2n7n"
+  },
+  "after": {
+    "Bt984gj": "f6jr5hl",
+    "i8kkvl": "f4akndk",
+    "Beiy3e4": "f1063pyq"
+  },
+  "before": {
+    "Bt984gj": "f6jr5hl",
+    "i8kkvl": "f4akndk",
+    "Beiy3e4": "f1063pyq"
+  }
+}, {
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10ra9hq{padding-top:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+
+const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "B7ck84d": "f1ewtqcl",
+    "Bkfmm31": "f1w9h62z",
+    "Bnnss6s": "fi64zpg",
+    "Be2twd7": "f4ybsrx",
+    "Bqenvij": "fjamq6b",
+    "Bkecrkj": "f1aehjj5",
+    "B3o57yi": "f1bnoopa",
+    "Bkqvd7p": "f1e1a42z",
+    "Bmy1vo4": "fo99fu7",
+    "a9b677": "feqmc2u",
+    "Hkqiji": "f1wkgtgk",
+    "Bgrs90m": "f17f8g0y",
+    "B0zx559": "f1uwej41"
+  }
+}, {
+  "d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"]
+});
+
+const useInputStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "B7ck84d": "f1ewtqcl",
+    "Bceei9c": "f1k6fduh",
+    "Bqenvij": "f1l02sjl",
+    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
+    "B6of3ja": "f1hu3pq6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "f19f4twv",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "abs64n": "fk73vx1",
+    "qhf8xq": "f1euv43f",
+    "Bhzewxz": "f15twtuk",
+    "a9b677": "fly5x3f",
+    "fv8x6k": ["f1owqbgs", "f1a7g3i4"],
+    "ezr58z": "fvxnmui",
+    "Blezdol": "f1cxq9o1",
+    "B8f96ig": "f1ks1zsm",
+    "po7uxr": "fiqfi0i",
+    "inq7wv": "f9aagkg",
+    "Cdugon": ["fgv8l18", "f1p3jmxb"],
+    "ptsei1": "f11yi64e",
+    "bl04ud": ["f1p3jmxb", "fgv8l18"],
+    "Bu7dm46": "fthrly9",
+    "Gwwlnz": "fhdp2ht",
+    "wb1her": "f1rzj6jj",
+    "Bmieemq": ["f1jywl1l", "f13d626x"],
+    "Bdgjgzg": "f1ivtmze",
+    "B05cvx7": ["f13d626x", "f1jywl1l"],
+    "Bx4eqiv": "f1uvnr57",
+    "xhnoxe": "frhcydi",
+    "Hnmc4c": ["f1pvt3n7", "f14i0clv"],
+    "By8gkvz": "fq9gcw4",
+    "lekrm4": ["f14i0clv", "f1pvt3n7"],
+    "Bei91sp": "fft44l1",
+    "Bksztz9": "fwlrvmy",
+    "h3gz1v": "f1c4gun2",
+    "Cw6427": ["flhgtcm", "fx1zdd8"],
+    "Bpbd9g9": "fayrp2e",
+    "ssulyh": ["fx1zdd8", "flhgtcm"],
+    "vq7rp1": "f1vk2knj",
+    "ynrfiu": "firogjh",
+    "Bf5tpyt": ["f1crd6p1", "for8100"],
+    "Brhic7g": "f1v5j4zb",
+    "Cqvc5u": ["for8100", "f1crd6p1"],
+    "B4e80u0": "f1rt7qcq",
+    "Bwj41i9": "fxvotg6",
+    "B2iiaa1": ["fk9ur30", "f3u5smv"],
+    "Bejmxmv": "fdtj07x",
+    "rqauf5": ["f3u5smv", "fk9ur30"],
+    "wo5z87": "fv5mb1o",
+    "B50joxe": ["f1i2l8ou", "fxj1kmv"],
+    "Bmuizf1": "fku528b",
+    "f4urji": ["fxj1kmv", "f1i2l8ou"],
+    "Bxiq1ly": "fabcpc0",
+    "vbmdq8": "f17xwy6w",
+    "u4vbwo": ["fipwscc", "fab39iv"],
+    "Bfjga03": "f1th5z1l",
+    "F0s3py": ["fab39iv", "fipwscc"]
+  }
+}, {
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1owqbgs:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(22px);-moz-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px);}", ".f1a7g3i4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-22px);-moz-transform:translateX(-22px);-ms-transform:translateX(-22px);transform:translateX(-22px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"]
+});
+
+const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "famaaq": "f1xqy1su"
+  }
+}, {
+  "d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]
+});
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+
+
+const useSwitchStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const indicatorStyles = useIndicatorStyles();
+  const inputStyles = useInputStyles();
+  const labelStyles = useLabelStyles();
+  const {
+    labelPosition
+  } = state;
+  state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, rootStyles[labelPosition], state.root.className);
+  state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
+  state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, state.input.className);
+
+  if (state.label) {
+    state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, state.label.className);
+  }
+
+  return state;
+};
+
+exports.useSwitchStyles_unstable = useSwitchStyles_unstable;
+//# sourceMappingURL=useSwitchStyles.js.map

package/lib-commonjs/components/Switch/useSwitchStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: {\n  [SlotName in keyof SwitchSlots]-?: string;\n} = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n// TODO temporary export to pass conformance test.\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    columnGap: `${spacingM}px`,\n    display: 'inline-flex',\n    ...shorthands.padding(`${spacingS}px`),\n    position: 'relative',\n\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n\n  // Label position variations\n  above: {\n    flexDirection: 'column',\n    paddingTop: `${spacingXS}px`,\n    rowGap: `${spacingXS}px`,\n  },\n  after: {\n    alignItems: 'flex-start',\n    columnGap: `${spacingM}px`,\n    flexDirection: 'row',\n  },\n  before: {\n    alignItems: 'flex-start',\n    columnGap: `${spacingM}px`,\n    flexDirection: 'row',\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth('1px'),\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n    height: `${trackHeight}px`,\n    pointerEvents: 'none',\n    transitionDuration: '200ms',\n    transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n\n    '> *': {\n      transitionDuration: '200ms',\n      transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n      transitionProperty: 'transform',\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    left: 0,\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    width: '100%',\n\n    // Checked (both enabled and disabled)\n    ':checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        '> *': {\n          transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n        },\n      },\n    },\n\n    // Disabled (both checked and unchecked)\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    // Enabled and unchecked\n    ':enabled:not(:checked)': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessible,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessibleHover,\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessiblePressed,\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Enabled and checked\n    ':enabled:checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n    },\n\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      },\n    },\n\n    // Disabled and checked\n    ':disabled:checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n      },\n    },\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    userSelect: 'none',\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  const rootStyles = useRootStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootStyles.base,\n    rootStyles[labelPosition],\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n  state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+export * from './Switch';

package/lib-commonjs/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./Switch"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA","sourcesContent":["export {};\nexport * from './Switch';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@fluentui/react-switch",
+  "version": "0.0.0-nightly-20220302-0405.1",
+  "description": "Fluent UI React Switch component.",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
+    "clean": "just-scripts clean",
+    "code-style": "just-scripts code-style",
+    "just": "just-scripts",
+    "lint": "just-scripts lint",
+    "start": "yarn storybook",
+    "test": "jest --passWithNoTests",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-switch/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220302-0405.1",
+    "@fluentui/scripts": "^1.0.0",
+    "@types/enzyme": "3.10.3",
+    "@types/enzyme-adapter-react-16": "1.0.3",
+    "@types/react": "16.9.42",
+    "@types/react-dom": "16.9.10",
+    "@types/react-test-renderer": "^16.0.0",
+    "enzyme": "~3.10.0",
+    "enzyme-adapter-react-16": "^1.15.0",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "react-test-renderer": "^16.3.0"
+  },
+  "dependencies": {
+    "@fluentui/react-icons": "^2.0.159-beta.10",
+    "@fluentui/react-label": "0.0.0-nightly-20220302-0405.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20220302-0405.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220302-0405.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220302-0405.1",
+    "@griffel/react": "1.0.0",
+    "tslib": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <18.0.0",
+    "@types/react-dom": ">=16.8.0 <18.0.0",
+    "react": ">=16.8.0 <18.0.0",
+    "react-dom": ">=16.8.0 <18.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ]
+  }
+}