@fluentui/react-switch 0.0.0-nightly-20230501-0418.1 → 0.0.0-nightly-20230503-0419.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-switch",
   "entries": [
     {
-      "date": "Mon, 01 May 2023 04:24:05 GMT",
-      "tag": "@fluentui/react-switch_v0.0.0-nightly-20230501-0418.1",
-      "version": "0.0.0-nightly-20230501-0418.1",
+      "date": "Wed, 03 May 2023 04:25:44 GMT",
+      "tag": "@fluentui/react-switch_v0.0.0-nightly-20230503-0419.1",
+      "version": "0.0.0-nightly-20230503-0419.1",
       "comments": {
         "prerelease": [
           {
@@ -16,50 +16,50 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230501-0418.1",
-            "commit": "ec7f7770aa9dd65ad47721639ad0c5d238d9e037"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230503-0419.1",
+            "commit": "a9a6cef152f4c3885a3697ddf9ded12bfce5a2be"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,25 +1,25 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Mon, 01 May 2023 04:24:05 GMT and should not be manually modified.
+This log was last generated on Wed, 03 May 2023 04:25:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230501-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20230501-0418.1)
+## [0.0.0-nightly-20230503-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20230503-0419.1)
 
-Mon, 01 May 2023 04:24:05 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.11..@fluentui/react-switch_v0.0.0-nightly-20230501-0418.1)
+Wed, 03 May 2023 04:25:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.11..@fluentui/react-switch_v0.0.0-nightly-20230503-0419.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-field to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230501-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/ec7f7770aa9dd65ad47721639ad0c5d238d9e037) by beachball)
+- Bump @fluentui/react-field to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230503-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/a9a6cef152f4c3885a3697ddf9ded12bfce5a2be) by beachball)
 
 ## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.11)
 

package/dist/index.d.ts

@@ -0,0 +1,109 @@
+/// <reference types="react" />
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Render a Switch component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
+
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */
+export declare const Switch: ForwardRefComponent<SwitchProps>;
+
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
+export declare const switchClassName: string;
+
+export declare const switchClassNames: SlotClassNames<SwitchSlots>;
+
+export declare type SwitchOnChangeData = {
+    checked: boolean;
+};
+
+/**
+ * Switch Props
+ */
+export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'checked' | 'defaultChecked' | 'onChange'> & {
+    /**
+     * 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;
+    /**
+     * Defines whether the Switch is initially in a checked state or not when rendered.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The position of the label relative to the Switch.
+     *
+     * @default after
+     */
+    labelPosition?: 'above' | 'after' | 'before';
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
+};
+
+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>;
+};
+
+/**
+ * State used in rendering Switch
+ */
+export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition'>>;
+
+/**
+ * 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_2.Ref<HTMLInputElement>) => SwitchState;
+
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;
+
+export { }

package/lib/Switch.js

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

package/lib/Switch.js.map

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

package/lib/components/Switch/Switch.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useSwitch_unstable } from './useSwitch';
+import { renderSwitch_unstable } from './renderSwitch';
+import { useSwitchStyles_unstable } from './useSwitchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */
+export const Switch = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useSwitch_unstable(props, ref);
+  useSwitchStyles_unstable(state);
+  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);
+  return renderSwitch_unstable(state);
+});
+Switch.displayName = 'Switch';
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQR,kBAAA,CAAmBM,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzBL,2BAAA,CAA4B,4BAA4BK,KAAA;EAExD,OAAOP,qBAAA,CAAsBO,KAAA;AAC/B;AAEAJ,MAAA,CAAOK,WAAW,GAAG"}

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+//# sourceMappingURL=Switch.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React"],"sources":["../../../src/components/Switch/Switch.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n  /**\n   * The root element of the Switch.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n   * All other native props will be applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The track and the thumb sliding over it indicating the on and off status of the Switch.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n\n  /**\n   * Hidden input that handles the Switch's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n   * slot, except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The Switch's label.\n   */\n  label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n  checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<\n  ComponentProps<Partial<SwitchSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange'\n> & {\n  /**\n   * Defines the controlled checked state of the Switch.\n   * If passed, Switch ignores the `defaultChecked` property.\n   * 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\n   * correct value based on handling `onChange` events and re-rendering.\n   *\n   * @default false\n   */\n  checked?: boolean;\n\n  /**\n   * Defines whether the Switch is initially in a checked state or not when rendered.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * The position of the label relative to the Switch.\n   *\n   * @default after\n   */\n  labelPosition?: 'above' | 'after' | 'before';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n};\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition'>>;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/Switch/index.js

@@ -0,0 +1,6 @@
+export * from './Switch';
+export * from './Switch.types';
+export * from './renderSwitch';
+export * from './useSwitch';
+export * from './useSwitchStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/Switch/index.ts"],"sourcesContent":["export * from './Switch';\nexport * from './Switch.types';\nexport * from './renderSwitch';\nexport * from './useSwitch';\nexport * from './useSwitchStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Switch/renderSwitch.js

@@ -0,0 +1,16 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Render a Switch component by passing the state defined props to the appropriate slots.
+ */
+export const renderSwitch_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  const {
+    labelPosition
+  } = state;
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.input, slotProps.input), labelPosition !== 'after' && slots.label && /*#__PURE__*/createElement(slots.label, slotProps.label), /*#__PURE__*/createElement(slots.indicator, slotProps.indicator), labelPosition === 'after' && slots.label && /*#__PURE__*/createElement(slots.label, slotProps.label));
+};
+//# sourceMappingURL=renderSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderSwitch_unstable","state","slots","slotProps","labelPosition","root","input","label","indicator"],"sources":["../../../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA0BE,KAAA;EACvD,MAAM;IAAEG;EAAa,CAAE,GAAGH,KAAA;EAE1B,oBACEH,aAfJ,CAeKI,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BP,aAhBN,CAgBOI,KAAA,CAAMI,KAAK,EAAKH,SAAA,CAAUG,KAAK,GAC/BF,aAAA,KAAkB,WAAWF,KAAA,CAAMK,KAAK,iBAAIT,aAjBnD,CAiBoDI,KAAA,CAAMK,KAAK,EAAKJ,SAAA,CAAUI,KAAK,gBAC7ET,aAlBN,CAkBOI,KAAA,CAAMM,SAAS,EAAKL,SAAA,CAAUK,SAAS,GACvCJ,aAAA,KAAkB,WAAWF,KAAA,CAAMK,KAAK,iBAAIT,aAnBnD,CAmBoDI,KAAA,CAAMK,KAAK,EAAKJ,SAAA,CAAUI,KAAK;AAGnF"}

package/lib/components/Switch/useSwitch.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { CircleFilled } from '@fluentui/react-icons';
+import { Label } from '@fluentui/react-label';
+import { useFocusWithin } from '@fluentui/react-tabster';
+import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@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
+ */
+export const useSwitch_unstable = (props, ref) => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, {
+    supportsLabelFor: true,
+    supportsRequired: true
+  });
+  const {
+    checked,
+    defaultChecked,
+    disabled,
+    labelPosition = 'after',
+    onChange,
+    required
+  } = props;
+  const nativeProps = getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
+  });
+  const id = useId('switch-', nativeProps.primary.id);
+  const root = resolveShorthand(props.root, {
+    defaultProps: {
+      ref: useFocusWithin(),
+      ...nativeProps.root
+    },
+    required: true
+  });
+  const indicator = resolveShorthand(props.indicator, {
+    defaultProps: {
+      'aria-hidden': true,
+      children: /*#__PURE__*/React.createElement(CircleFilled, null)
+    },
+    required: true
+  });
+  const input = resolveShorthand(props.input, {
+    defaultProps: {
+      checked,
+      defaultChecked,
+      id,
+      ref,
+      role: 'switch',
+      type: 'checkbox',
+      ...nativeProps.primary
+    },
+    required: true
+  });
+  input.onChange = mergeCallbacks(input.onChange, ev => {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+      checked: ev.currentTarget.checked
+    });
+  });
+  const label = resolveShorthand(props.label, {
+    defaultProps: {
+      disabled,
+      htmlFor: id,
+      required,
+      size: 'medium'
+    }
+  });
+  return {
+    labelPosition,
+    //Slots definition
+    components: {
+      root: 'div',
+      indicator: 'div',
+      input: 'input',
+      label: Label
+    },
+    root,
+    indicator,
+    input,
+    label
+  };
+};
+//# sourceMappingURL=useSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useId","useSwitch_unstable","props","ref","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","defaultProps","indicator","children","createElement","input","role","type","ev","currentTarget","label","htmlFor","size","components"],"sources":["../../../src/components/Switch/useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } 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  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\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: { ref: useFocusWithin<HTMLDivElement>(), ...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 = mergeCallbacks(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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,YAAY,QAAQ;AAC7B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,kBAAA,GAAqBA,CAACC,KAAA,EAAoBC,GAAA,KAAkD;EACvG;EACAD,KAAA,GAAQT,6BAAA,CAA8BS,KAAA,EAAO;IAAEE,gBAAA,EAAkB,IAAI;IAAEC,gBAAA,EAAkB;EAAK;EAE9F,MAAM;IAAEC,OAAA;IAASC,cAAA;IAAgBC,QAAA;IAAUC,aAAA,GAAgB;IAASC,QAAA;IAAUC;EAAQ,CAAE,GAAGT,KAAA;EAE3F,MAAMU,WAAA,GAAcf,yBAAA,CAA0B;IAC5CK,KAAA;IACAW,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,WAAW,kBAAkB;EACnD;EAEA,MAAMC,EAAA,GAAKf,KAAA,CAAM,WAAWY,WAAA,CAAYI,OAAO,CAACD,EAAE;EAElD,MAAME,IAAA,GAAOlB,gBAAA,CAAiBG,KAAA,CAAMe,IAAI,EAAE;IACxCC,YAAA,EAAc;MAAEf,GAAA,EAAKP,cAAA;MAAkC,GAAGgB,WAAA,CAAYK;IAAK;IAC3EN,QAAA,EAAU;EACZ;EAEA,MAAMQ,SAAA,GAAYpB,gBAAA,CAAiBG,KAAA,CAAMiB,SAAS,EAAE;IAClDD,YAAA,EAAc;MACZ,eAAe,IAAI;MACnBE,QAAA,eAAU5B,KAAA,CAAA6B,aAAA,CAAC3B,YAAA;IACb;IACAiB,QAAA,EAAU;EACZ;EAEA,MAAMW,KAAA,GAAQvB,gBAAA,CAAiBG,KAAA,CAAMoB,KAAK,EAAE;IAC1CJ,YAAA,EAAc;MACZZ,OAAA;MACAC,cAAA;MACAQ,EAAA;MACAZ,GAAA;MACAoB,IAAA,EAAM;MACNC,IAAA,EAAM;MACN,GAAGZ,WAAA,CAAYI;IACjB;IACAL,QAAA,EAAU;EACZ;EACAW,KAAA,CAAMZ,QAAQ,GAAGZ,cAAA,CAAewB,KAAA,CAAMZ,QAAQ,EAAEe,EAAA;IAAM,OAAAf,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAWe,EAAA,EAAI;MAAEnB,OAAA,EAASmB,EAAA,CAAGC,aAAa,CAACpB;IAAQ;;EAEzG,MAAMqB,KAAA,GAAQ5B,gBAAA,CAAiBG,KAAA,CAAMyB,KAAK,EAAE;IAC1CT,YAAA,EAAc;MACZV,QAAA;MACAoB,OAAA,EAASb,EAAA;MACTJ,QAAA;MACAkB,IAAA,EAAM;IACR;EACF;EAEA,OAAO;IACLpB,aAAA;IAEA;IACAqB,UAAA,EAAY;MACVb,IAAA,EAAM;MACNE,SAAA,EAAW;MACXG,KAAA,EAAO;MACPK,KAAA,EAAOhC;IACT;IAEAsB,IAAA;IACAE,SAAA;IACAG,KAAA;IACAK;EACF;AACF"}

package/lib/components/Switch/useSwitchStyles.styles.js

@@ -0,0 +1,101 @@
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+export const switchClassNames = {
+  root: 'fui-Switch',
+  indicator: 'fui-Switch__indicator',
+  input: 'fui-Switch__input',
+  label: 'fui-Switch__label'
+};
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
+export const switchClassName = switchClassNames.root;
+// Thumb and track sizes used by the component.
+const spaceBetweenThumbAndTrack = 2;
+const trackHeight = 20;
+const trackWidth = 40;
+const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1u7w45w", "rlzel8d", [".r1u7w45w{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1u7w45w:focus{outline-style:none;}", ".r1u7w45w:focus-visible{outline-style:none;}", ".r1u7w45w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1u7w45w[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".rlzel8d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".rlzel8d:focus{outline-style:none;}", ".rlzel8d:focus-visible{outline-style:none;}", ".rlzel8d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rlzel8d[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
+const useRootStyles = /*#__PURE__*/__styles({
+  vertical: {
+    Beiy3e4: "f1vx9l62"
+  }
+}, {
+  d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r13wlxb8", null, [".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}", ".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"]);
+const useIndicatorStyles = /*#__PURE__*/__styles({
+  labelAbove: {
+    B6of3ja: "f1hu3pq6"
+  }
+}, {
+  d: [".f1hu3pq6{margin-top:0;}"]
+});
+const useInputBaseClassName = /*#__PURE__*/__resetStyles("rw4brat", "r1f4bxyr", [".rw4brat{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rw4brat:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".rw4brat:disabled{cursor:default;}", ".rw4brat:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rw4brat:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rw4brat:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rw4brat:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rw4brat:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rw4brat:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rw4brat:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rw4brat:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rw4brat:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rw4brat:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.rw4brat:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rw4brat:disabled~.fui-Switch__label{color:GrayText;}.rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rw4brat:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", ".r1f4bxyr{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r1f4bxyr:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".r1f4bxyr:disabled{cursor:default;}", ".r1f4bxyr:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r1f4bxyr:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r1f4bxyr:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r1f4bxyr:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r1f4bxyr:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1f4bxyr:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r1f4bxyr:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r1f4bxyr:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r1f4bxyr:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.r1f4bxyr:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r1f4bxyr:disabled~.fui-Switch__label{color:GrayText;}.r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]);
+const useInputStyles = /*#__PURE__*/__styles({
+  before: {
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    Bhzewxz: "f15twtuk"
+  },
+  after: {
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    Bhzewxz: "f15twtuk"
+  },
+  above: {
+    B5kzvoi: "f1yab3r1",
+    Bqenvij: "f1aar7gd",
+    a9b677: "fly5x3f"
+  }
+}, {
+  d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"]
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = /*#__PURE__*/__styles({
+  base: {
+    Bceei9c: "f1k6fduh",
+    jrapky: "f49ad5g",
+    B6of3ja: "f1xlvstr",
+    z8tnut: "f1kwiid1",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f5b47ha",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  above: {
+    z8tnut: "f1ywm7hm",
+    Byoj8tv: "f14wxoun",
+    a9b677: "fly5x3f"
+  },
+  after: {
+    uwmqm3: ["fruq291", "f7x41pl"]
+  },
+  before: {
+    z189sj: ["f7x41pl", "fruq291"]
+  }
+}, {
+  d: [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
+});
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+export const useSwitchStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  const indicatorBaseClassName = useIndicatorBaseClassName();
+  const indicatorStyles = useIndicatorStyles();
+  const inputBaseClassName = useInputBaseClassName();
+  const inputStyles = useInputStyles();
+  const labelStyles = useLabelStyles();
+  const {
+    label,
+    labelPosition
+  } = state;
+  state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
+  state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
+  if (state.label) {
+    state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useSwitchStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"sources":["../../../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSize}px`,\n  height: `${trackHeight}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidth}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the switch.\n  width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}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      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n\n    ':enabled:checked': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\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 rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ;AACxC,SAASC,MAAM,QAAQ;AACvB,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ;AAItE,OAAO,MAAMC,gBAAA,GAAgD;EAC3DC,IAAA,EAAM;EACNC,SAAA,EAAW;EACXC,KAAA,EAAO;EACPC,KAAA,EAAO;AACT;AAEA;;;AAGA,OAAO,MAAMC,eAAA,GAAkBL,gBAAA,CAAiBC,IAAI;AAEpD;AACA,MAAMK,yBAAA,GAA4B;AAClC,MAAMC,WAAA,GAAc;AACpB,MAAMC,UAAA,GAAa;AACnB,MAAMC,SAAA,GAAYF,WAAA,GAAcD,yBAAA;AAEhC,MAAMI,oBAAA,gBAAuBd,aAAA,g+EAO7B;AAEA,MAAMe,aAAA,gBAAgBd,QAAA;EAAAe,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAItB;AAEA,MAAMC,yBAAA,gBAA4BnB,aAAA,4wBA6BlC;AAEA,MAAMoB,kBAAA,gBAAqBnB,QAAA;EAAAoB,UAAA;IAAAC,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,EAI3B;AAEA,MAAMK,qBAAA,gBAAwBvB,aAAA,miJA4H9B;AAEA,MAAMwB,cAAA,gBAAiBvB,QAAA;EAAAwB,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAF,OAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAf,CAAA;AAAA,EAcvB;AAEA;AACA,MAAMgB,cAAA,gBAAiBjC,QAAA;EAAAkC,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAf,OAAA;IAAAgB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAX,KAAA;IAAAQ,MAAA;IAAAE,OAAA;IAAAP,MAAA;EAAA;EAAAL,KAAA;IAAAa,MAAA;EAAA;EAAAhB,MAAA;IAAAc,MAAA;EAAA;AAAA;EAAArB,CAAA;AAAA,EAsBvB;AAEA;;;AAGA,OAAO,MAAMwB,wBAAA,GAA4BC,KAAA,IAAoC;EAC3E,MAAMC,iBAAA,GAAoB9B,oBAAA;EAC1B,MAAM+B,UAAA,GAAa9B,aAAA;EACnB,MAAM+B,sBAAA,GAAyB3B,yBAAA;EAC/B,MAAM4B,eAAA,GAAkB3B,kBAAA;EACxB,MAAM4B,kBAAA,GAAqBzB,qBAAA;EAC3B,MAAM0B,WAAA,GAAczB,cAAA;EACpB,MAAM0B,WAAA,GAAchB,cAAA;EAEpB,MAAM;IAAE1B,KAAA;IAAO2C;EAAa,CAAE,GAAGR,KAAA;EAEjCA,KAAA,CAAMtC,IAAI,CAAC+C,SAAS,GAAGlD,YAAA,CACrBE,gBAAA,CAAiBC,IAAI,EACrBuC,iBAAA,EACAO,aAAA,KAAkB,WAAWN,UAAA,CAAW7B,QAAQ,EAChD2B,KAAA,CAAMtC,IAAI,CAAC+C,SAAS;EAGtBT,KAAA,CAAMrC,SAAS,CAAC8C,SAAS,GAAGlD,YAAA,CAC1BE,gBAAA,CAAiBE,SAAS,EAC1BwC,sBAAA,EACAtC,KAAA,IAAS2C,aAAA,KAAkB,WAAWJ,eAAA,CAAgB1B,UAAU,EAChEsB,KAAA,CAAMrC,SAAS,CAAC8C,SAAS;EAG3BT,KAAA,CAAMpC,KAAK,CAAC6C,SAAS,GAAGlD,YAAA,CACtBE,gBAAA,CAAiBG,KAAK,EACtByC,kBAAA,EACAxC,KAAA,IAASyC,WAAW,CAACE,aAAA,CAAc,EACnCR,KAAA,CAAMpC,KAAK,CAAC6C,SAAS;EAGvB,IAAIT,KAAA,CAAMnC,KAAK,EAAE;IACfmC,KAAA,CAAMnC,KAAK,CAAC4C,SAAS,GAAGlD,YAAA,CACtBE,gBAAA,CAAiBI,KAAK,EACtB0C,WAAA,CAAYf,IAAI,EAChBe,WAAW,CAACC,aAAA,CAAc,EAC1BR,KAAA,CAAMnC,KAAK,CAAC4C,SAAS;EAEzB;EAEA,OAAOT,KAAA;AACT"}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { Switch, renderSwitch_unstable,
+// eslint-disable-next-line deprecation/deprecation
+switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable } from './Switch';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line deprecation/deprecation\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB;AACrB;AACAC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,QACb"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "0.0.0-nightly-20230501-0418.1",
+  "version": "0.0.0-nightly-20230503-0419.1",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,19 +27,19 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230501-0418.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230503-0419.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "0.0.0-nightly-20230501-0418.1",
+    "@fluentui/react-field": "0.0.0-nightly-20230503-0419.1",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-label": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230501-0418.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230501-0418.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-label": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230503-0419.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },