@fluentui/react-switch 9.0.0-alpha.5 → 9.0.0-alpha.9

package/CHANGELOG.json

@@ -2,7 +2,233 @@
   "name": "@fluentui/react-switch",
   "entries": [
     {
-      "date": "Fri, 17 Sep 2021 07:32:57 GMT",
+      "date": "Thu, 23 Sep 2021 08:19:56 GMT",
+      "tag": "@fluentui/react-switch_v9.0.0-alpha.9",
+      "version": "9.0.0-alpha.9",
+      "comments": {
+        "none": [
+          {
+            "author": "czearing@outlook.com",
+            "package": "@fluentui/react-switch",
+            "comment": "Importing clamp from react-utilities.",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "czearing@outlook.com",
+            "package": "@fluentui/react-switch",
+            "comment": "Adding dragging to the Switch component.",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.71",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-alpha.65",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.51",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.53",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.46",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.15",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-label to v9.0.0-alpha.44",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.82",
+            "commit": "95682da34c48813f7658032ae490d21d2f363b90"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Sep 2021 10:10:07 GMT",
+      "tag": "@fluentui/react-switch_v9.0.0-alpha.8",
+      "version": "9.0.0-alpha.8",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "czearing@outlook.com",
+            "package": "@fluentui/react-switch",
+            "comment": "Adding switch role to the hidden input element.",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.70",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-alpha.64",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.50",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.52",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.45",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.14",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-label to v9.0.0-alpha.43",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.81",
+            "commit": "bc3f1ec72fc7784a558b0dd6598ee0662f4649c1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Sep 2021 07:42:34 GMT",
+      "tag": "@fluentui/react-switch_v9.0.0-alpha.7",
+      "version": "9.0.0-alpha.7",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.69",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-alpha.25",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-alpha.63",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.51",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.44",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.13",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-label to v9.0.0-alpha.42",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-provider to v9.0.0-alpha.80",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-alpha.23",
+            "commit": "363765ba3d08d2facbb97fb80ab54ff27ac714fd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 20 Sep 2021 07:36:26 GMT",
+      "tag": "@fluentui/react-switch_v9.0.0-alpha.6",
+      "version": "9.0.0-alpha.6",
+      "comments": {
+        "none": [
+          {
+            "author": "czearing@outlook.com",
+            "package": "@fluentui/react-switch",
+            "comment": "Adding missing theme tokens and updating styles.",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-switch",
+            "comment": "chore: use  versioon eslint-plugin and react-conformance in dev dependencies",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-switch",
+            "commit": "b8a304770f77c0353553a152dad34421070400a6",
+            "comment": "Bump @fluentui/react-switch to v9.0.0-alpha.6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 17 Sep 2021 07:35:26 GMT",
       "tag": "@fluentui/react-switch_v9.0.0-alpha.5",
       "version": "9.0.0-alpha.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,72 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Fri, 17 Sep 2021 07:32:57 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Sep 2021 08:19:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.9)
+
+Thu, 23 Sep 2021 08:19:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.8..@fluentui/react-switch_v9.0.0-alpha.9)
+
+### Changes
+
+- Adding dragging to the Switch component. ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by czearing@outlook.com)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.71 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-alpha.65 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.51 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.53 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.46 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.15 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+- Bump @fluentui/react-label to v9.0.0-alpha.44 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+- Bump @fluentui/react-provider to v9.0.0-alpha.82 ([commit](https://github.com/microsoft/fluentui/commit/95682da34c48813f7658032ae490d21d2f363b90) by beachball)
+
+## [9.0.0-alpha.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.8)
+
+Wed, 22 Sep 2021 10:10:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.7..@fluentui/react-switch_v9.0.0-alpha.8)
+
+### Changes
+
+- Adding switch role to the hidden input element. ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by czearing@outlook.com)
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.70 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-alpha.64 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.50 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.52 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.45 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/react-label to v9.0.0-alpha.43 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/react-provider to v9.0.0-alpha.81 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+
+## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.7)
+
+Tue, 21 Sep 2021 07:42:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.6..@fluentui/react-switch_v9.0.0-alpha.7)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.69 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-alpha.25 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-alpha.63 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.51 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.44 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.13 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-label to v9.0.0-alpha.42 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-provider to v9.0.0-alpha.80 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-alpha.23 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+
+## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.6)
+
+Mon, 20 Sep 2021 07:36:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.5..@fluentui/react-switch_v9.0.0-alpha.6)
+
+### Changes
+
+- Bump @fluentui/react-switch to v9.0.0-alpha.6 ([PR #19844](https://github.com/microsoft/fluentui/pull/19844) by lingfangao@hotmail.com)
+
 ## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.5)
 
-Fri, 17 Sep 2021 07:32:57 GMT 
+Fri, 17 Sep 2021 07:35:26 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.4..@fluentui/react-switch_v9.0.0-alpha.5)
 
 ### Changes

package/dist/react-switch.d.ts

@@ -35,7 +35,7 @@ export declare interface SwitchCommons {
     /**
      * Callback to be called when the `checked` value changes.
      */
-    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: {
+    onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
         checked: boolean;
     }) => void;
 }
@@ -69,6 +69,10 @@ export declare type SwitchSlots = {
      * The hidden input that handles the Switch's internal functionality.
      */
     input: IntrinsicShorthandProps<'input'>;
+    /**
+     * The area in which the Switch's rail allows for the thumb to be dragged.
+     */
+    activeRail: IntrinsicShorthandProps<'div'>;
 };
 
 export declare interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {

package/lib/Switch.js.map

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

package/lib/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,eAH+C;AAI3D,IAAA,eAAe,EAAE;AAJ0C,GAA7D;AAOA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    extraTests: makeStylesTests as TestObject<TProps>,\n    skipAsPropTests: true,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,eAH+C;AAI3D,IAAA,eAAe,EAAE;AAJ0C,GAA7D;AAOA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,aAA1B;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAGA;;AAEG;;AACH,OAAO,IAAM,MAAM,gBAAG,KAAK,CAAC,UAAN,CAA8C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC7E,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAAvB;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,YAAY,CAAC,KAAD,CAAnB;AACD,CANqB,CAAf;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSwitch } from './useSwitch';\nimport { renderSwitch } from './renderSwitch';\nimport { useSwitchStyles } from './useSwitchStyles';\nimport type { SwitchProps } from './Switch.types';\n\n/**\n * The Switch control enables users to trigger an option on or off through pressing on the component.\n */\nexport const Switch = React.forwardRef<HTMLDivElement, SwitchProps>((props, ref) => {\n  const state = useSwitch(props, ref);\n\n  useSwitchStyles(state);\n\n  return renderSwitch(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,aAA1B;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAGA;;AAEG;;AACH,OAAO,IAAM,MAAM,gBAAG,KAAK,CAAC,UAAN,CAA8C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC7E,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAAvB;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,YAAY,CAAC,KAAD,CAAnB;AACD,CANqB,CAAf;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourceRoot":""}

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

@@ -21,6 +21,10 @@ export declare type SwitchSlots = {
      * The hidden input that handles the Switch's internal functionality.
      */
     input: IntrinsicShorthandProps<'input'>;
+    /**
+     * The area in which the Switch's rail allows for the thumb to be dragged.
+     */
+    activeRail: IntrinsicShorthandProps<'div'>;
 };
 export interface SwitchCommons {
     /**
@@ -44,7 +48,7 @@ export interface SwitchCommons {
     /**
      * Callback to be called when the `checked` value changes.
      */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: {
+    onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
         checked: boolean;
     }) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.types.js","sourceRoot":"../src/","sources":["components/Switch/Switch.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root of the Switch.\n   */\n  root: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The bar indicating the status of the Switch.\n   */\n  track: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The wrapper around the thumb. It is used as the active area for the thumb to position itself.\n   */\n  thumbWrapper: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The circular icon indicating the status of the Switch.\n   */\n  thumb: IntrinsicShorthandProps<'div'>;\n\n  /**\n   * The hidden input that handles the Switch's internal functionality.\n   */\n  input: IntrinsicShorthandProps<'input'>;\n};\n\nexport interface SwitchCommons {\n  /**\n   * The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.\n   * Mutually exclusive with `checked` prop.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The current value for a controlled Switch. If `true` then the Switch will be enabled.\n   * Mutually exclusive with `defaultChecked` prop.\n   */\n  checked?: boolean;\n\n  /**\n   * Whether the Switch should be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Callback to be called when the `checked` value changes.\n   */\n  onChange?: (\n    ev: React.ChangeEvent<HTMLInputElement>,\n    data: {\n      checked: boolean;\n    },\n  ) => void;\n}\n\nexport interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {}\n\nexport interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {}\n"]}
+{"version":3,"file":"Switch.types.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Switch';\nexport * from './Switch.types';\nexport * from './renderSwitch';\nexport * from './useSwitch';\nexport * from './useSwitchStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}

package/lib/components/Switch/renderSwitch.js

@@ -11,6 +11,6 @@ export var renderSwitch = function (state) {
       slots = _a.slots,
       slotProps = _a.slotProps;
 
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.track, __assign({}, slotProps.track)), /*#__PURE__*/React.createElement(slots.thumbWrapper, __assign({}, slotProps.thumbWrapper), /*#__PURE__*/React.createElement(slots.thumb, __assign({}, slotProps.thumb))), /*#__PURE__*/React.createElement(slots.input, __assign({}, slotProps.input)));
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.track, __assign({}, slotProps.track)), /*#__PURE__*/React.createElement(slots.thumbWrapper, __assign({}, slotProps.thumbWrapper), /*#__PURE__*/React.createElement(slots.thumb, __assign({}, slotProps.thumb))), /*#__PURE__*/React.createElement(slots.input, __assign({}, slotProps.input)), /*#__PURE__*/React.createElement(slots.activeRail, __assign({}, slotProps.activeRail)));
 };
 //# sourceMappingURL=renderSwitch.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/renderSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,oBAAT,QAAqC,aAArC;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,QAAQ,CAAc,KAAd,EAAqB,oBAArB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,CAFF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CALF,CADF;AASD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { switchShorthandProps } from './useSwitch';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render the final JSX of Switch\n */\nexport const renderSwitch = (state: SwitchState) => {\n  const { slots, slotProps } = getSlots<SwitchSlots>(state, switchShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.track {...slotProps.track} />\n      <slots.thumbWrapper {...slotProps.thumbWrapper}>\n        <slots.thumb {...slotProps.thumb} />\n      </slots.thumbWrapper>\n      <slots.input {...slotProps.input} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Switch/renderSwitch.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,oBAAT,QAAqC,aAArC;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,QAAQ,CAAc,KAAd,EAAqB,oBAArB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,YAAf,CAAnB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,CAFF,eAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CALF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CANF,CADF;AAUD,CAbM","sourceRoot":""}

package/lib/components/Switch/useSwitch.js

@@ -5,7 +5,7 @@ import { useSwitchState } from './useSwitchState';
  * Array of all shorthand properties listed in SwitchSlots
  */
 
-export var switchShorthandProps = ['root', 'track', 'thumbWrapper', 'thumb', 'input'];
+export var switchShorthandProps = ['root', 'track', 'thumbWrapper', 'thumb', 'activeRail', 'input'];
 /**
  * Given user props, returns state and render function for a Switch.
  */
@@ -14,6 +14,7 @@ export var useSwitch = function (props, ref) {
   var track = props.track,
       thumbWrapper = props.thumbWrapper,
       thumb = props.thumb,
+      activeRail = props.activeRail,
       input = props.input,
       defaultChecked = props.defaultChecked,
       checked = props.checked,
@@ -34,6 +35,7 @@ export var useSwitch = function (props, ref) {
       track: 'div',
       thumbWrapper: 'div',
       thumb: 'div',
+      activeRail: 'div',
       input: 'input'
     },
     track: resolveShorthand(track, {
@@ -45,6 +47,9 @@ export var useSwitch = function (props, ref) {
     thumb: resolveShorthand(thumb, {
       required: true
     }),
+    activeRail: resolveShorthand(activeRail, {
+      required: true
+    }),
     input: resolveShorthand(input, {
       required: true,
       defaultProps: {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/useSwitch.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAA0B,CAAC,MAAD,EAAS,OAAT,EAAkB,cAAlB,EAAkC,OAAlC,EAA2C,OAA3C,CAApD;AAEP;;AAEG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAAgD;AAC/D,MAAA,KAAK,GAA8E,KAAK,CAAnF,KAAL;AAAA,MAAO,YAAY,GAAgE,KAAK,CAArE,YAAnB;AAAA,MAAqB,KAAK,GAAyD,KAAK,CAA9D,KAA1B;AAAA,MAA4B,KAAK,GAAkD,KAAK,CAAvD,KAAjC;AAAA,MAAmC,cAAc,GAAkC,KAAK,CAAvC,cAAjD;AAAA,MAAmD,OAAO,GAAyB,KAAK,CAA9B,OAA1D;AAAA,MAA4D,QAAQ,GAAe,KAAK,CAApB,QAApE;AAAA,MAAsE,QAAQ,GAAK,KAAK,CAAV,QAA9E;AACR,MAAM,KAAK,GAAgB;AACzB,IAAA,cAAc,EAAA,cADW;AAEzB,IAAA,OAAO,EAAA,OAFkB;AAGzB,IAAA,QAAQ,EAAA,QAHiB;AAIzB,IAAA,QAAQ,EAAA,QAJiB;AAKzB,IAAA,IAAI,EAAE,qBAAqB,CAAC,MAAD,EAAO,QAAA,CAAA,QAAA,CAAA;AAChC,MAAA,GAAG,EAAA;AAD6B,KAAA,EAE7B,KAF6B,CAAA,EAExB;AACR,MAAA,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB;AADD,KAFwB,CAAP,CALF;AAUzB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,YAAY,EAAE,KAHJ;AAIV,MAAA,KAAK,EAAE,KAJG;AAKV,MAAA,KAAK,EAAE;AALG,KAVa;AAiBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CAjBE;AAkBzB,IAAA,YAAY,EAAE,gBAAgB,CAAC,YAAD,EAAe;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAf,CAlBL;AAmBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CAnBE;AAoBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE;AADM;AAFe,KAAR;AApBE,GAA3B;AA4BA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAjCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSwitchState } from './useSwitchState';\nimport type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';\n\n/**\n * Array of all shorthand properties listed in SwitchSlots\n */\nexport const switchShorthandProps: (keyof SwitchSlots)[] = ['root', 'track', 'thumbWrapper', 'thumb', 'input'];\n\n/**\n * Given user props, returns state and render function for a Switch.\n */\nexport const useSwitch = (props: SwitchProps, ref: React.Ref<HTMLElement>): SwitchState => {\n  const { track, thumbWrapper, thumb, input, defaultChecked, checked, disabled, onChange } = props;\n  const state: SwitchState = {\n    defaultChecked,\n    checked,\n    disabled,\n    onChange,\n    root: getNativeElementProps('span', {\n      ref,\n      ...props,\n      id: useId('switch-', props.id),\n    }),\n    components: {\n      root: 'div',\n      track: 'div',\n      thumbWrapper: 'div',\n      thumb: 'div',\n      input: 'input',\n    },\n    track: resolveShorthand(track, { required: true }),\n    thumbWrapper: resolveShorthand(thumbWrapper, { required: true }),\n    thumb: resolveShorthand(thumb, { required: true }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n      },\n    }),\n  };\n\n  useSwitchState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Switch/useSwitch.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAA0B,CACzD,MADyD,EAEzD,OAFyD,EAGzD,cAHyD,EAIzD,OAJyD,EAKzD,YALyD,EAMzD,OANyD,CAApD;AASP;;AAEG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAAgD;AAC/D,MAAA,KAAK,GAA0F,KAAK,CAA/F,KAAL;AAAA,MAAO,YAAY,GAA4E,KAAK,CAAjF,YAAnB;AAAA,MAAqB,KAAK,GAAqE,KAAK,CAA1E,KAA1B;AAAA,MAA4B,UAAU,GAAyD,KAAK,CAA9D,UAAtC;AAAA,MAAwC,KAAK,GAAkD,KAAK,CAAvD,KAA7C;AAAA,MAA+C,cAAc,GAAkC,KAAK,CAAvC,cAA7D;AAAA,MAA+D,OAAO,GAAyB,KAAK,CAA9B,OAAtE;AAAA,MAAwE,QAAQ,GAAe,KAAK,CAApB,QAAhF;AAAA,MAAkF,QAAQ,GAAK,KAAK,CAAV,QAA1F;AACR,MAAM,KAAK,GAAgB;AACzB,IAAA,cAAc,EAAA,cADW;AAEzB,IAAA,OAAO,EAAA,OAFkB;AAGzB,IAAA,QAAQ,EAAA,QAHiB;AAIzB,IAAA,QAAQ,EAAA,QAJiB;AAKzB,IAAA,IAAI,EAAE,qBAAqB,CAAC,MAAD,EAAO,QAAA,CAAA,QAAA,CAAA;AAChC,MAAA,GAAG,EAAA;AAD6B,KAAA,EAE7B,KAF6B,CAAA,EAExB;AACR,MAAA,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB;AADD,KAFwB,CAAP,CALF;AAUzB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,YAAY,EAAE,KAHJ;AAIV,MAAA,KAAK,EAAE,KAJG;AAKV,MAAA,UAAU,EAAE,KALF;AAMV,MAAA,KAAK,EAAE;AANG,KAVa;AAkBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CAlBE;AAmBzB,IAAA,YAAY,EAAE,gBAAgB,CAAC,YAAD,EAAe;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAf,CAnBL;AAoBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR,CApBE;AAqBzB,IAAA,UAAU,EAAE,gBAAgB,CAAC,UAAD,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAb,CArBH;AAsBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE;AADM;AAFe,KAAR;AAtBE,GAA3B;AA8BA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAnCM","sourceRoot":""}

package/lib/components/Switch/useSwitchState.js

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { clamp, useBoolean, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useFluent } from '@fluentui/react-shared-contexts'; // TODO: This should be replaced with a useEvent hook
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+var on = function (element, eventName, callback) {
+  element.addEventListener(eventName, callback);
+  return function () {
+    return element.removeEventListener(eventName, callback);
+  };
+};
+
 export var useSwitchState = function (state) {
   var _a = state.defaultChecked,
       defaultChecked = _a === void 0 ? false : _a,
@@ -8,39 +17,136 @@ export var useSwitchState = function (state) {
       _b = state.disabled,
       disabled = _b === void 0 ? false : _b,
       onChange = state.onChange;
+  var _c = state.root,
+      onPointerDownCallback = _c.onPointerDown,
+      onKeyDownCallback = _c.onKeyDown;
   var dir = useFluent().dir;
   var inputRef = useMergedRefs(state.input.ref);
+  var railRef = React.useRef(null);
+  var internalState = React.useRef({
+    internalValue: checked ? checked : defaultChecked,
+    thumbIsDragging: false,
+    disposables: []
+  });
 
-  var _c = useControllableState({
+  var _d = useControllableState({
     defaultState: defaultChecked,
     state: checked,
     initialState: false
   }),
-      internalValue = _c[0],
-      setInternalValue = _c[1];
+      currentValue = _d[0],
+      setCurrentValue = _d[1];
+
+  var _e = useBoolean(true),
+      thumbAnimation = _e[0],
+      _f = _e[1],
+      showThumbAnimation = _f.setTrue,
+      hideThumbAnimation = _f.setFalse;
+
+  var _g = React.useState(currentValue === true ? 100 : 0),
+      renderedPosition = _g[0],
+      setRenderedPosition = _g[1];
 
-  var setChecked = React.useCallback(function (ev, incomingValue) {
+  var setChecked = useEventCallback(function (ev, incomingValue) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    internalState.current.internalValue = incomingValue;
     onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
       checked: incomingValue
     });
-    setInternalValue(incomingValue);
-  }, [onChange, setInternalValue]);
-  var userOnChange = state.input.onChange;
-  var onInputChange = useEventCallback(function (ev) {
-    ev.stopPropagation();
-    userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(ev);
-    setChecked(ev, ev.currentTarget.checked);
+    setCurrentValue(incomingValue);
+    setRenderedPosition(undefined);
   });
+  var calculatePosition = React.useCallback(function (ev) {
+    var _a;
+
+    var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var railWidth = currentBounds.width;
+    var railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
+    var distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
+    return clamp(distance / railWidth * 100, 0, 100);
+  }, [dir]);
+  var onPointerMove = React.useCallback(function (ev) {
+    var incomingPosition = calculatePosition(ev);
+    internalState.current.thumbIsDragging = true;
+    hideThumbAnimation();
+    setRenderedPosition(incomingPosition); // If the Switch reaches a new position of 0% or 100%, update the state and fire change.
+
+    if (incomingPosition === 100 && internalState.current.internalValue !== true) {
+      setChecked(ev, true);
+    } else if (incomingPosition === 0 && internalState.current.internalValue !== false) {
+      setChecked(ev, false);
+    }
+  }, [calculatePosition, hideThumbAnimation, setChecked]);
+  var onPointerUp = React.useCallback(function (ev) {
+    internalState.current.disposables.forEach(function (dispose) {
+      return dispose();
+    });
+    internalState.current.disposables = [];
+    inputRef.current.focus();
+
+    if (internalState.current.thumbIsDragging) {
+      var roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
+      showThumbAnimation();
+
+      if (roundedPosition === 100) {
+        setChecked(ev, true);
+      } else if (roundedPosition === 0) {
+        setChecked(ev, false);
+      }
+    } else {
+      setChecked(ev, !internalState.current.internalValue);
+    }
+  }, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
+  var onPointerDown = React.useCallback(function (ev) {
+    var _a;
+
+    var pointerId = ev.pointerId;
+    var target = ev.target;
+    onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
+    showThumbAnimation();
+    (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
+    internalState.current.thumbIsDragging = false;
+    internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), function () {
+      var _a;
+
+      (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
+    });
+  }, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
+  var onKeyDown = React.useCallback(function (ev) {
+    onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
+
+    if (ev.key === ' ') {
+      setChecked(ev, !internalState.current.internalValue);
+    }
+  }, [onKeyDownCallback, setChecked]);
+  var currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
+  var rootStyles = {
+    '--switch-checked-opacity': currentPosition / 100,
+    '--switch-unchecked-opacity': (100 - currentPosition) / 100
+  };
   var thumbWrapperStyles = {
-    transform: dir === 'rtl' ? internalValue ? 'translate(-100%)' : 'translate(0%)' : internalValue ? 'translate(100%)' : 'translate(0%)'
-  }; // Input Props
+    transform: "translate(" + (dir === 'rtl' ? -currentPosition : currentPosition) + "%)",
+    transition: thumbAnimation ? 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1)' : 'none'
+  }; // Root Props
+
+  state.root.style = rootStyles;
+
+  if (!disabled) {
+    state.root.onPointerDown = onPointerDown;
+    state.root.onKeyDown = onKeyDown;
+  } // Input Props
 
-  state.input.onChange = onInputChange;
-  state.input.checked = internalValue;
+
+  state.input.checked = currentValue;
   state.input.disabled = disabled;
-  state.input.ref = inputRef; // thumbContainer Props
+  state.input.ref = inputRef;
+  state.input.readOnly = true;
+  state.input.role = 'switch'; // Thumb Container Props
+
+  state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
 
-  state.thumbWrapper.style = thumbWrapperStyles;
+  state.activeRail.ref = railRef;
   return state;
 };
 //# sourceMappingURL=useSwitchState.js.map