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

package/lib/components/Switch/useSwitchStyles.js

@@ -0,0 +1,194 @@
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const switchClassNames = {
+  root: 'fui-Switch',
+  indicator: 'fui-Switch__indicator',
+  input: 'fui-Switch__input',
+  label: 'fui-Switch__label'
+}; // TODO temporary export to pass conformance test.
+
+export const switchClassName = 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__*/__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__*/__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__*/__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__*/__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
+ */
+
+
+export const useSwitchStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const indicatorStyles = useIndicatorStyles();
+  const inputStyles = useInputStyles();
+  const labelStyles = useLabelStyles();
+  const {
+    labelPosition
+  } = state;
+  state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, rootStyles[labelPosition], state.root.className);
+  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
+  state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);
+
+  if (state.label) {
+    state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useSwitchStyles.js.map

package/lib/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/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,2 @@
+export * from './Switch';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC","sourcesContent":["export {};\nexport * from './Switch';\n"]}

package/lib/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

package/lib-commonjs/Switch.d.ts

@@ -0,0 +1 @@
+export * from './components/Switch/index';

package/lib-commonjs/Switch.js

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

package/lib-commonjs/Switch.js.map

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

package/lib-commonjs/components/Switch/Switch.d.ts

@@ -0,0 +1,6 @@
+import type { SwitchProps } from './Switch.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */
+export declare const Switch: ForwardRefComponent<SwitchProps>;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useSwitch_1 = /*#__PURE__*/require("./useSwitch");
+
+const renderSwitch_1 = /*#__PURE__*/require("./renderSwitch");
+
+const useSwitchStyles_1 = /*#__PURE__*/require("./useSwitchStyles");
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */
+
+
+exports.Switch = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSwitch_1.useSwitch_unstable(props, ref);
+  useSwitchStyles_1.useSwitchStyles_unstable(state);
+  return renderSwitch_1.renderSwitch_unstable(state);
+});
+exports.Switch.displayName = 'Switch';
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/Switch.types.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Label } from '@fluentui/react-label';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type SwitchSlots = {
+    /**
+     * The root element of the Switch.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.
+     * All other native props will be applied to the primary slot: `input`.
+     */
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * The track and the thumb sliding over it indicating the on and off status of the Switch.
+     */
+    indicator: NonNullable<Slot<'div'>>;
+    /**
+     * Hidden input that handles the Switch's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this
+     * slot, except `className` and `style`, which remain on the root slot.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /**
+     * The Switch's label.
+     */
+    label?: Slot<typeof Label>;
+};
+declare type SwitchCommons = {
+    /**
+     * Defines the controlled checked state of the Switch.
+     * If passed, Switch ignores the `defaultChecked` property.
+     * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
+     * correct value based on handling `onChange` events and re-rendering.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The position of the label relative to the Switch.
+     *
+     * @default after
+     */
+    labelPosition: 'above' | 'after' | 'before';
+};
+export declare type SwitchOnChangeData = {
+    checked: boolean;
+};
+/**
+ * Switch Props
+ */
+export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & Partial<SwitchCommons> & {
+    /**
+     * Defines whether the Switch is initially in a checked state or not when rendered.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
+};
+/**
+ * State used in rendering Switch
+ */
+export declare type SwitchState = ComponentState<SwitchSlots> & SwitchCommons;
+export {};

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Switch.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Switch';
+export * from './Switch.types';
+export * from './renderSwitch';
+export * from './useSwitch';
+export * from './useSwitchStyles';

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

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

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

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

package/lib-commonjs/components/Switch/renderSwitch.d.ts

@@ -0,0 +1,5 @@
+import type { SwitchState } from './Switch.types';
+/**
+ * Render a Switch component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderSwitch_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render a Switch component by passing the state defined props to the appropriate slots.
+ */
+
+
+const renderSwitch_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  const {
+    labelPosition
+  } = state;
+  return React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.input, { ...slotProps.input
+  }), labelPosition !== 'after' && slots.label && React.createElement(slots.label, { ...slotProps.label
+  }), React.createElement(slots.indicator, { ...slotProps.indicator
+  }), labelPosition === 'after' && slots.label && React.createElement(slots.label, { ...slotProps.label
+  }));
+};
+
+exports.renderSwitch_unstable = renderSwitch_unstable;
+//# sourceMappingURL=renderSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Switch/renderSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AACA,QAAM;AAAE,IAAA;AAAF,MAAoB,KAA1B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,IAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAF/C,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAHF,EAIG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,IAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJ/C,CADF;AAQD,CAZM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n  const { slots, slotProps } = getSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {labelPosition !== 'after' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/useSwitch.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SwitchProps, SwitchState } from './Switch.types';
+/**
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */
+export declare const useSwitch_unstable: (props: SwitchProps, ref: React.Ref<HTMLInputElement>) => SwitchState;

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSwitch_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+
+const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */
+
+
+const useSwitch_unstable = (props, ref) => {
+  const {
+    checked,
+    defaultChecked,
+    disabled,
+    labelPosition = 'after',
+    onChange,
+    required
+  } = props;
+  const nativeProps = react_utilities_1.getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
+  });
+  const id = react_utilities_1.useId('switch-', nativeProps.primary.id);
+  const root = react_utilities_1.resolveShorthand(props.root, {
+    defaultProps: nativeProps.root,
+    required: true
+  });
+  const indicator = react_utilities_1.resolveShorthand(props.indicator, {
+    defaultProps: {
+      'aria-hidden': true,
+      children: React.createElement(react_icons_1.CircleFilled, null)
+    },
+    required: true
+  });
+  const input = react_utilities_1.resolveShorthand(props.input, {
+    defaultProps: {
+      checked,
+      defaultChecked,
+      id,
+      ref,
+      role: 'switch',
+      type: 'checkbox',
+      ...nativeProps.primary
+    },
+    required: true
+  });
+  input.onChange = react_utilities_1.useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+    checked: ev.currentTarget.checked
+  }));
+  const label = react_utilities_1.resolveShorthand(props.label, {
+    defaultProps: {
+      disabled,
+      htmlFor: id,
+      required,
+      size: 'medium'
+    }
+  });
+  return {
+    labelPosition,
+    //Slots definition
+    components: {
+      root: 'div',
+      indicator: 'div',
+      input: 'input',
+      label: react_label_1.Label
+    },
+    root,
+    indicator,
+    input,
+    label
+  };
+};
+
+exports.useSwitch_unstable = useSwitch_unstable;
+//# sourceMappingURL=useSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Switch/useSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,cAAX;AAA2B,IAAA,QAA3B;AAAqC,IAAA,aAAa,GAAG,OAArD;AAA8D,IAAA,QAA9D;AAAwE,IAAA;AAAxE,MAAqF,KAA3F;AAEA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;AAHyB,GAA1B,CAApB;AAMA,QAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,WAAW,CAAC,OAAZ,CAAoB,EAArC,CAAX;AAEA,QAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACxC,IAAA,YAAY,EAAE,WAAW,CAAC,IADc;AAExC,IAAA,QAAQ,EAAE;AAF8B,GAA7B,CAAb;AAKA,QAAM,SAAS,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;AAClD,IAAA,YAAY,EAAE;AACZ,qBAAe,IADH;AAEZ,MAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa,IAAb;AAFE,KADoC;AAKlD,IAAA,QAAQ,EAAE;AALwC,GAAlC,CAAlB;AAQA,QAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,OADY;AAEZ,MAAA,cAFY;AAGZ,MAAA,EAHY;AAIZ,MAAA,GAJY;AAKZ,MAAA,IAAI,EAAE,QALM;AAMZ,MAAA,IAAI,EAAE,UANM;AAOZ,SAAG,WAAW,CAAC;AAPH,KAD4B;AAU1C,IAAA,QAAQ,EAAE;AAVgC,GAA9B,CAAd;AAYA,EAAA,KAAK,CAAC,QAAN,GAAiB,iBAAA,CAAA,uBAAA,CAAwB,KAAK,CAAC,QAA9B,EAAwC,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,IAAA,OAAO,EAAE,EAAE,CAAC,aAAH,CAAiB;AAA5B,GAAP,CAAtD,CAAjB;AAEA,QAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,QADY;AAEZ,MAAA,OAAO,EAAE,EAFG;AAGZ,MAAA,QAHY;AAIZ,MAAA,IAAI,EAAE;AAJM;AAD4B,GAA9B,CAAd;AASA,SAAO;AACL,IAAA,aADK;AAGL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,SAAS,EAAE,KAFD;AAGV,MAAA,KAAK,EAAE,OAHG;AAIV,MAAA,KAAK,EAAE,aAAA,CAAA;AAJG,KAJP;AAWL,IAAA,IAXK;AAYL,IAAA,SAZK;AAaL,IAAA,KAbK;AAcL,IAAA;AAdK,GAAP;AAgBD,CA/DM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = resolveShorthand(props.root, {\n    defaultProps: nativeProps.root,\n    required: true,\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n    required: true,\n  });\n\n  const input = resolveShorthand(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary,\n    },\n    required: true,\n  });\n  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      disabled,\n      htmlFor: id,\n      required,\n      size: 'medium',\n    },\n  });\n\n  return {\n    labelPosition,\n\n    //Slots definition\n    components: {\n      root: 'div',\n      indicator: 'div',\n      input: 'input',\n      label: Label,\n    },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/useSwitchStyles.d.ts

@@ -0,0 +1,9 @@
+import type { SwitchSlots, SwitchState } from './Switch.types';
+export declare const switchClassNames: {
+    [SlotName in keyof SwitchSlots]-?: string;
+};
+export declare const switchClassName: string;
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;