@fluentui/react-radio 0.0.0-nightly-20220311-0445.1 → 0.0.0-nightly-20220316-0419.1

package/CHANGELOG.json

@@ -2,46 +2,64 @@
   "name": "@fluentui/react-radio",
   "entries": [
     {
-      "date": "Fri, 11 Mar 2022 04:54:29 GMT",
-      "tag": "@fluentui/react-radio_v0.0.0-nightly-20220311-0445.1",
-      "version": "0.0.0-nightly-20220311-0445.1",
+      "date": "Wed, 16 Mar 2022 04:30:38 GMT",
+      "tag": "@fluentui/react-radio_v0.0.0-nightly-20220316-0419.1",
+      "version": "0.0.0-nightly-20220316-0419.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-radio",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1",
+            "commit": "not available",
             "comment": "Release nightly v9"
           },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "086a675fd0c648944ff4048450190a0a13467de3",
+            "comment": "Deprecate static classname string for Radio."
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "c6af0f7fa900a2f497f4c7477bb05ca2c59c7987",
+            "comment": "Add onChange event prop to Radio"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "0f509ed4c7e26548ae9d27e3001bd8db4784e838",
+            "comment": "Radio/RadioGroup API alignment."
+          },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220311-0445.1",
-            "commit": "759100cbaaec296c71f27b5db304609d85dee3d1"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220316-0419.1",
+            "commit": "ffa5f7be511dfeb24ce12b0b195c3119e907faaf"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,22 +1,25 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Fri, 11 Mar 2022 04:54:29 GMT and should not be manually modified.
+This log was last generated on Wed, 16 Mar 2022 04:30:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220311-0445.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20220311-0445.1)
+## [0.0.0-nightly-20220316-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20220316-0419.1)
 
-Fri, 11 Mar 2022 04:54:29 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.2..@fluentui/react-radio_v0.0.0-nightly-20220311-0445.1)
+Wed, 16 Mar 2022 04:30:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.2..@fluentui/react-radio_v0.0.0-nightly-20220316-0419.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by email not defined)
-- Bump @fluentui/react-label to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220311-0445.1 ([commit](https://github.com/microsoft/fluentui/commit/759100cbaaec296c71f27b5db304609d85dee3d1) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- Deprecate static classname string for Radio. ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
+- Add onChange event prop to Radio ([PR #22104](https://github.com/microsoft/fluentui/pull/22104) by seanmonahan@microsoft.com)
+- Radio/RadioGroup API alignment. ([PR #22065](https://github.com/microsoft/fluentui/pull/22065) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-label to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220316-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/ffa5f7be511dfeb24ce12b0b195c3119e907faaf) by beachball)
 
 ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.2)
 

package/dist/react-radio.d.ts

@@ -4,21 +4,32 @@ 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';
 
 /**
  * Radio component is a wrapper for a radio button with a label.
  */
 export declare const Radio: ForwardRefComponent<RadioProps>;
 
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
 export declare const radioClassName = "fui-Radio";
 
+export declare const radioClassNames: SlotClassNames<RadioSlots>;
+
 /**
  * A RadioGroup component presents a set of options where only one option can be selected.
  */
 export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
+/**
+ * @deprecated Use `radioGroupClassNames.root` instead.
+ */
 export declare const radioGroupClassName = "fui-RadioGroup";
 
+export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
+
 /**
  * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
  */
@@ -75,7 +86,7 @@ export declare type RadioGroupSlots = {
     /**
      * The radio group root.
      */
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
 };
 
 /**
@@ -85,6 +96,16 @@ export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required
     context: RadioGroupContextValue;
 };
 
+/**
+ * Data for the onChange event for Radio.
+ */
+export declare type RadioOnChangeData = {
+    /**
+     * The value prop of this Radio item.
+     */
+    value: string;
+};
+
 /**
  * Radio Props
  */
@@ -106,6 +127,13 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
      * Disable this Radio item.
      */
     disabled?: boolean;
+    /**
+     * Callback when this Radio is selected in its group.
+     *
+     * **Note:** `onChange` is NOT called when this Radio is deselected.
+     * Use RadioGroup's `onChange` event to determine when the selection in the group changes.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
 };
 
 export declare type RadioSlots = {

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Label } from '@fluentui/react-label';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type RadioSlots = {
@@ -45,6 +46,22 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
      * Disable this Radio item.
      */
     disabled?: boolean;
+    /**
+     * Callback when this Radio is selected in its group.
+     *
+     * **Note:** `onChange` is NOT called when this Radio is deselected.
+     * Use RadioGroup's `onChange` event to determine when the selection in the group changes.
+     */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
+};
+/**
+ * Data for the onChange event for Radio.
+ */
+export declare type RadioOnChangeData = {
+    /**
+     * The value prop of this Radio item.
+     */
+    value: string;
 };
 /**
  * State used in rendering Radio

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.types.js","sourceRoot":"../src/","sources":["components/Radio/Radio.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n  /**\n   * The root element of the Radio.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Radio's label.\n   */\n  label: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the radio's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * A circle outline, with a filled circle icon inside when the Radio is checked.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {\n  /**\n   * The value of the RadioGroup when this Radio item is selected.\n   */\n  value?: string;\n\n  /**\n   * The position of the label relative to the radio indicator.\n   *\n   * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n   * in which case it defaults to `below`.\n   *\n   * @defaultvalue after\n   */\n  labelPosition?: 'after' | 'below';\n\n  /**\n   * Disable this Radio item.\n   */\n  disabled?: boolean;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n"]}
+{"version":3,"file":"Radio.types.js","sourceRoot":"../src/","sources":["components/Radio/Radio.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n  /**\n   * The root element of the Radio.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Radio's label.\n   */\n  label: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the radio's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * A circle outline, with a filled circle icon inside when the Radio is checked.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {\n  /**\n   * The value of the RadioGroup when this Radio item is selected.\n   */\n  value?: string;\n\n  /**\n   * The position of the label relative to the radio indicator.\n   *\n   * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n   * in which case it defaults to `below`.\n   *\n   * @defaultvalue after\n   */\n  labelPosition?: 'after' | 'below';\n\n  /**\n   * Disable this Radio item.\n   */\n  disabled?: boolean;\n\n  /**\n   * Callback when this Radio is selected in its group.\n   *\n   * **Note:** `onChange` is NOT called when this Radio is deselected.\n   * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n   */\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n  /**\n   * The value prop of this Radio item.\n   */\n  value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n"]}

package/lib/components/Radio/useRadio.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
 import { RadioGroupContext } from '../../contexts/RadioGroupContext';
 /**
  * Create the state required to render Radio.
@@ -21,12 +21,13 @@ export const useRadio_unstable = (props, ref) => {
     defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
     labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',
     disabled = group.disabled,
-    required
+    required,
+    onChange
   } = props;
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['checked', 'defaultChecked']
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
   });
   const root = resolveShorthand(props.root, {
     required: true,
@@ -45,6 +46,9 @@ export const useRadio_unstable = (props, ref) => {
       ...nativeProps.primary
     }
   });
+  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+    value: ev.currentTarget.value
+  }));
   const label = resolveShorthand(props.label, {
     defaultProps: {
       htmlFor: input.id,

package/lib/components/Radio/useRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,QAAmE,2BAAnE;AACA,SAAS,iBAAT,QAAkC,kCAAlC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM,KAAK,GAAG,KAAK,CAAC,UAAN,CAAiB,iBAAjB,CAAd;AAEA,QAAM;AACJ,IAAA,IAAI,GAAG,KAAK,CAAC,IADT;AAEJ,IAAA,OAAO,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAhB,GAA4B,KAAK,CAAC,KAAN,KAAgB,KAAK,CAAC,KAAlD,GAA0D,SAFhE;AAGJ,IAAA,cAAc,GAAG,KAAK,CAAC,YAAN,KAAuB,SAAvB,GAAmC,KAAK,CAAC,YAAN,KAAuB,KAAK,CAAC,KAAhE,GAAwE,SAHrF;AAIJ,IAAA,aAAa,GAAG,KAAK,CAAC,MAAN,KAAiB,mBAAjB,GAAuC,OAAvC,GAAiD,OAJ7D;AAKJ,IAAA,QAAQ,GAAG,KAAK,CAAC,QALb;AAMJ,IAAA;AANI,MAOF,KAPJ;AASA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ;AAHyB,GAAD,CAA7C;AAMA,QAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACxC,IAAA,QAAQ,EAAE,IAD8B;AAExC,IAAA,YAAY,EAAE,WAAW,CAAC;AAFc,GAAb,CAA7B;AAKA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,QAAQ,EAAE,IADgC;AAE1C,IAAA,YAAY,EAAE;AACZ,MAAA,GADY;AAEZ,MAAA,IAAI,EAAE,OAFM;AAGZ,MAAA,EAAE,EAAE,KAAK,CAAC,QAAD,EAAW,WAAW,CAAC,OAAZ,CAAoB,EAA/B,CAHG;AAIZ,MAAA,IAJY;AAKZ,MAAA,OALY;AAMZ,MAAA,cANY;AAOZ,MAAA,QAPY;AAQZ,SAAG,WAAW,CAAC;AARH;AAF4B,GAAd,CAA9B;AAcA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,OAAO,EAAE,KAAK,CAAC,EADH;AAEZ,MAAA,QAFY;AAGZ,MAAA;AAHY;AAD4B,GAAd,CAA9B;AAQA,QAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAClD,IAAA,QAAQ,EAAE,IADwC;AAElD,IAAA,YAAY,EAAE;AACZ,qBAAe,IADH;AAEZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,IAAb;AAFE;AAFoC,GAAlB,CAAlC;AAQA,SAAO;AACL,IAAA,aADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,KAAK,EAAE,KAHG;AAIV,MAAA,SAAS,EAAE;AAJD,KAFP;AAQL,IAAA,IARK;AASL,IAAA,KATK;AAUL,IAAA,KAVK;AAWL,IAAA;AAXK,GAAP;AAaD,CAlEM","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const group = React.useContext(RadioGroupContext);\n\n  const {\n    name = group.name,\n    checked = group.value !== undefined ? group.value === props.value : undefined,\n    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked'],\n  });\n\n  const root = resolveShorthand(props.root, {\n    required: true,\n    defaultProps: nativeProps.root,\n  });\n\n  const input = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      ...nativeProps.primary,\n    },\n  });\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled,\n      required,\n    },\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    required: true,\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n  });\n\n  return {\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      label: Label,\n      indicator: 'div',\n    },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,EAA6D,uBAA7D,QAA4F,2BAA5F;AACA,SAAS,iBAAT,QAAkC,kCAAlC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM,KAAK,GAAG,KAAK,CAAC,UAAN,CAAiB,iBAAjB,CAAd;AAEA,QAAM;AACJ,IAAA,IAAI,GAAG,KAAK,CAAC,IADT;AAEJ,IAAA,OAAO,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAhB,GAA4B,KAAK,CAAC,KAAN,KAAgB,KAAK,CAAC,KAAlD,GAA0D,SAFhE;AAGJ,IAAA,cAAc,GAAG,KAAK,CAAC,YAAN,KAAuB,SAAvB,GAAmC,KAAK,CAAC,YAAN,KAAuB,KAAK,CAAC,KAAhE,GAAwE,SAHrF;AAIJ,IAAA,aAAa,GAAG,KAAK,CAAC,MAAN,KAAiB,mBAAjB,GAAuC,OAAvC,GAAiD,OAJ7D;AAKJ,IAAA,QAAQ,GAAG,KAAK,CAAC,QALb;AAMJ,IAAA,QANI;AAOJ,IAAA;AAPI,MAQF,KARJ;AAUA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;AAHyB,GAAD,CAA7C;AAMA,QAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACxC,IAAA,QAAQ,EAAE,IAD8B;AAExC,IAAA,YAAY,EAAE,WAAW,CAAC;AAFc,GAAb,CAA7B;AAKA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,QAAQ,EAAE,IADgC;AAE1C,IAAA,YAAY,EAAE;AACZ,MAAA,GADY;AAEZ,MAAA,IAAI,EAAE,OAFM;AAGZ,MAAA,EAAE,EAAE,KAAK,CAAC,QAAD,EAAW,WAAW,CAAC,OAAZ,CAAoB,EAA/B,CAHG;AAIZ,MAAA,IAJY;AAKZ,MAAA,OALY;AAMZ,MAAA,cANY;AAOZ,MAAA,QAPY;AAQZ,SAAG,WAAW,CAAC;AARH;AAF4B,GAAd,CAA9B;AAcA,EAAA,KAAK,CAAC,QAAN,GAAiB,uBAAuB,CAAC,KAAK,CAAC,QAAP,EAAiB,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,IAAA,KAAK,EAAE,EAAE,CAAC,aAAH,CAAiB;AAA1B,GAAP,CAA/B,CAAxC;AAEA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,OAAO,EAAE,KAAK,CAAC,EADH;AAEZ,MAAA,QAFY;AAGZ,MAAA;AAHY;AAD4B,GAAd,CAA9B;AAQA,QAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAClD,IAAA,QAAQ,EAAE,IADwC;AAElD,IAAA,YAAY,EAAE;AACZ,qBAAe,IADH;AAEZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,IAAb;AAFE;AAFoC,GAAlB,CAAlC;AAQA,SAAO;AACL,IAAA,aADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,KAAK,EAAE,KAHG;AAIV,MAAA,SAAS,EAAE;AAJD,KAFP;AAQL,IAAA,IARK;AASL,IAAA,KATK;AAUL,IAAA,KAVK;AAWL,IAAA;AAXK,GAAP;AAaD,CArEM","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const group = React.useContext(RadioGroupContext);\n\n  const {\n    name = group.name,\n    checked = group.value !== undefined ? group.value === props.value : undefined,\n    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required,\n    onChange,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const root = resolveShorthand(props.root, {\n    required: true,\n    defaultProps: nativeProps.root,\n  });\n\n  const input = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      ...nativeProps.primary,\n    },\n  });\n\n  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled,\n      required,\n    },\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    required: true,\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n  });\n\n  return {\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      label: Label,\n      indicator: 'div',\n    },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Radio/useRadioStyles.d.ts

@@ -1,5 +1,10 @@
-import type { RadioState } from './Radio.types';
+import type { RadioSlots, RadioState } from './Radio.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
 export declare const radioClassName = "fui-Radio";
+export declare const radioClassNames: SlotClassNames<RadioSlots>;
 /**
  * Apply styling to the Radio slots based on the state
  */

package/lib/components/Radio/useRadioStyles.js

@@ -1,9 +1,17 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
+
 export const radioClassName = 'fui-Radio';
-const indicatorClassName = 'fui-Radio__indicator';
-const labelClassName = 'fui-Radio__label'; // TODO replace these spacing constants with theme values once they're on the theme
+export const radioClassNames = {
+  root: 'fui-Radio',
+  indicator: 'fui-Radio__indicator',
+  input: 'fui-Radio__input',
+  label: 'fui-Radio__label'
+}; // TODO replace these spacing constants with theme values once they're on the theme
 
 const spacingHorizontalS = '8px';
 const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
@@ -30,23 +38,37 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   "focusIndicator": {
     "B486eqv": "f2hkw1w",
-    "c2y4jd": "fsofd9k",
+    "vchsgm": "fbiesyy",
+    "ozrjjd": ["fq2kn9", "f1jxwnad"],
+    "B7lelfh": "f1il7mou",
+    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
     "B8vm7ur": "f12sql3b",
     "f4hv8x": "f1i4q40k",
     "Gpan81": "fcrbge9",
-    "z7afg": "ft464mn",
     "rsjj6t": "fskqmiq",
-    "Bqsd8kq": "f2gy8jn",
-    "sfhsbh": "f1pke3uf",
-    "Bugh3ej": "f18xdlq9",
-    "hpanx6": "f1114nks",
+    "E86f5s": "f1kbdjx9",
+    "f5nhos": ["fw1d893", "fpuz8dn"],
+    "Bhtq6h7": "f14hlsw1",
+    "Bubk9yy": ["fpuz8dn", "fw1d893"],
+    "dzajus": "f1bkt4b4",
+    "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
+    "Byq6oy9": "fyyqeim",
+    "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
+    "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
+    "kq6z4e": ["f15nmyc0", "f1aneyfs"],
+    "l5tc3q": ["f3cpy5b", "f13v6kgv"],
+    "d1z3ck": ["f13v6kgv", "f3cpy5b"],
+    "epcuuz": "filx0we",
+    "Ba33l6n": ["f1horip2", "fgnx9ah"],
+    "va7z1g": "fkii2tb",
+    "Bmi6mq9": ["fgnx9ah", "f1horip2"],
     "Bjkpy09": "f1unftzx",
     "Jxg1p8": "f8rjbh6",
     "Bc94xmo": ["fxfgh6q", "f8l10fm"],
     "Bj23z95": ["f8l10fm", "fxfgh6q"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fe5j3v{row-gap:12px;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fe5j3v{row-gap:12px;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 
@@ -160,15 +182,15 @@ const useLabelStyles = /*#__PURE__*/__styles({
 
 export const useRadioStyles_unstable = state => {
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(radioClassName, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
+  state.root.className = mergeClasses(radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
   const indicatorStyles = useIndicatorStyles();
-  state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);
+  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
   const labelStyles = useLabelStyles();
 
   if (state.label) {
-    state.label.className = mergeClasses(labelClassName, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
+    state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
   }
 };
 //# sourceMappingURL=useRadioStyles.js.map

package/lib/components/Radio/useRadioStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;AACP,MAAM,kBAAkB,GAAG,sBAA3B;AACA,MAAM,cAAc,GAAG,kBAAvB,C,CAEA;;AACA,MAAM,kBAAkB,GAAG,KAA3B;AACA,MAAM,kBAAkB,GAAG,MAA3B,C,CAEA;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAiBA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAsFA,MAAM,kBAAkB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AAoBA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAeA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,cAHsB,EAIjC,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;AAQA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,WAAW,CAAC,IAAb,EAAmB,KAAK,CAAC,KAAN,CAAY,SAA/B,CAApC;AAEA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,kBAAD,EAAqB,eAAe,CAAC,IAArC,EAA2C,KAAK,CAAC,SAAN,CAAgB,SAA3D,CAAxC;AAEA,QAAM,WAAW,GAAG,cAAc,EAAlC;;AACA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,cADkC,EAElC,WAAW,CAAC,IAFsB,EAGlC,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,WAAW,CAAC,KAHb,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;AAMD;AACF,CAzBM","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioState } from './Radio.types';\n\nexport const radioClassName = 'fui-Radio';\nconst indicatorClassName = 'fui-Radio__indicator';\nconst labelClassName = 'fui-Radio__label';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n    rowGap: spacingHorizontalM,\n  },\n\n  focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n\n    ':enabled': {\n      cursor: 'pointer',\n    },\n\n    // When unchecked, hide the circle icon (child of the indicator)\n    [`:not(:checked) ~ .${indicatorClassName} > *`]: {\n      opacity: '0',\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    // Colors for the disabled state\n    ':disabled': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n\n  below: {\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassName,\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      labelClassName,\n      labelStyles.base,\n      state.labelPosition === 'below' && labelStyles.below,\n      state.label.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n    rowGap: spacingHorizontalM,\n  },\n\n  focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n\n    ':enabled': {\n      cursor: 'pointer',\n    },\n\n    // When unchecked, hide the circle icon (child of the indicator)\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${radioClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${radioClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    // Colors for the disabled state\n    ':disabled': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n\n  below: {\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      state.labelPosition === 'below' && labelStyles.below,\n      state.label.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,7 +5,7 @@ export declare type RadioGroupSlots = {
     /**
      * The radio group root.
      */
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
 };
 export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RadioGroupContextValue } from '../../contexts/RadioGroupContext';\n\nexport type RadioGroupSlots = {\n  /**\n   * The radio group root.\n   */\n  root: Slot<'div'>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n  /**\n   * The name of this radio group. This name is applied to all Radio items inside this group.\n   *\n   * If no name is provided, one will be generated so that all of the Radio items have the same name.\n   */\n  name?: string;\n\n  /**\n   * The selected Radio item in this group.\n   *\n   * This should be the `value` prop of one of the Radio items inside this group.\n   */\n  value?: string;\n\n  /**\n   * The default selected Radio item in this group.\n   *\n   * This should be the `value` prop of one of the Radio items inside this group.\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when the selected Radio item changes.\n   */\n  onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n  /**\n   * How the radio items are laid out in the group.\n   *\n   * @defaultvalue vertical\n   */\n  layout?: 'vertical' | 'horizontal' | 'horizontalStacked';\n\n  /**\n   * Disable all Radio items in this group.\n   */\n  disabled?: boolean;\n};\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n  /**\n   * The value of the newly selected Radio item.\n   */\n  value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n  Required<Pick<RadioGroupProps, 'layout'>> & {\n    context: RadioGroupContextValue;\n  };\n"]}
+{"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RadioGroupContextValue } from '../../contexts/RadioGroupContext';\n\nexport type RadioGroupSlots = {\n  /**\n   * The radio group root.\n   */\n  root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n  /**\n   * The name of this radio group. This name is applied to all Radio items inside this group.\n   *\n   * If no name is provided, one will be generated so that all of the Radio items have the same name.\n   */\n  name?: string;\n\n  /**\n   * The selected Radio item in this group.\n   *\n   * This should be the `value` prop of one of the Radio items inside this group.\n   */\n  value?: string;\n\n  /**\n   * The default selected Radio item in this group.\n   *\n   * This should be the `value` prop of one of the Radio items inside this group.\n   */\n  defaultValue?: string;\n\n  /**\n   * Callback when the selected Radio item changes.\n   */\n  onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n  /**\n   * How the radio items are laid out in the group.\n   *\n   * @defaultvalue vertical\n   */\n  layout?: 'vertical' | 'horizontal' | 'horizontalStacked';\n\n  /**\n   * Disable all Radio items in this group.\n   */\n  disabled?: boolean;\n};\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n  /**\n   * The value of the newly selected Radio item.\n   */\n  value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n  Required<Pick<RadioGroupProps, 'layout'>> & {\n    context: RadioGroupContextValue;\n  };\n"]}

package/lib/components/RadioGroup/useRadioGroupStyles.d.ts

@@ -1,5 +1,10 @@
-import { RadioGroupState } from './RadioGroup.types';
+import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `radioGroupClassNames.root` instead.
+ */
 export declare const radioGroupClassName = "fui-RadioGroup";
+export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
 /**
  * Apply styling to the RadioGroup slots based on the state
  */

package/lib/components/RadioGroup/useRadioGroupStyles.js

@@ -1,5 +1,12 @@
 import { __styles, mergeClasses } from '@griffel/react';
+/**
+ * @deprecated Use `radioGroupClassNames.root` instead.
+ */
+
 export const radioGroupClassName = 'fui-RadioGroup';
+export const radioGroupClassNames = {
+  root: 'fui-RadioGroup'
+};
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
@@ -19,6 +26,6 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useRadioGroupStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(radioGroupClassName, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
+  state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
 };
 //# sourceMappingURL=useRadioGroupStyles.js.map

package/lib/components/RadioGroup/useRadioGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,mBADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHL,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupState } from './RadioGroup.types';\n\nexport const radioGroupClassName = 'fui-RadioGroup';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    radioGroupClassName,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AACP,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE;AAD6D,CAA9D;;AAIP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBAAoB,CAAC,IADY,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHL,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAMD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioGroupClassNames.root` instead.\n */\nexport const radioGroupClassName = 'fui-RadioGroup';\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Label } from '@fluentui/react-label';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type RadioSlots = {
@@ -45,6 +46,22 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
      * Disable this Radio item.
      */
     disabled?: boolean;
+    /**
+     * Callback when this Radio is selected in its group.
+     *
+     * **Note:** `onChange` is NOT called when this Radio is deselected.
+     * Use RadioGroup's `onChange` event to determine when the selection in the group changes.
+     */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
+};
+/**
+ * Data for the onChange event for Radio.
+ */
+export declare type RadioOnChangeData = {
+    /**
+     * The value prop of this Radio item.
+     */
+    value: string;
 };
 /**
  * State used in rendering Radio

package/lib-commonjs/components/Radio/useRadio.js

@@ -33,12 +33,13 @@ const useRadio_unstable = (props, ref) => {
     defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
     labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',
     disabled = group.disabled,
-    required
+    required,
+    onChange
   } = props;
   const nativeProps = react_utilities_1.getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['checked', 'defaultChecked']
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
   });
   const root = react_utilities_1.resolveShorthand(props.root, {
     required: true,
@@ -57,6 +58,9 @@ const useRadio_unstable = (props, ref) => {
       ...nativeProps.primary
     }
   });
+  input.onChange = react_utilities_1.useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+    value: ev.currentTarget.value
+  }));
   const label = react_utilities_1.resolveShorthand(props.label, {
     defaultProps: {
       htmlFor: input.id,

package/lib-commonjs/components/Radio/useRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const group = React.useContext(RadioGroupContext);\n\n  const {\n    name = group.name,\n    checked = group.value !== undefined ? group.value === props.value : undefined,\n    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked'],\n  });\n\n  const root = resolveShorthand(props.root, {\n    required: true,\n    defaultProps: nativeProps.root,\n  });\n\n  const input = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      ...nativeProps.primary,\n    },\n  });\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled,\n      required,\n    },\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    required: true,\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n  });\n\n  return {\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      label: Label,\n      indicator: 'div',\n    },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const group = React.useContext(RadioGroupContext);\n\n  const {\n    name = group.name,\n    checked = group.value !== undefined ? group.value === props.value : undefined,\n    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required,\n    onChange,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const root = resolveShorthand(props.root, {\n    required: true,\n    defaultProps: nativeProps.root,\n  });\n\n  const input = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      ...nativeProps.primary,\n    },\n  });\n\n  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled,\n      required,\n    },\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    required: true,\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n  });\n\n  return {\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      label: Label,\n      indicator: 'div',\n    },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Radio/useRadioStyles.d.ts

@@ -1,5 +1,10 @@
-import type { RadioState } from './Radio.types';
+import type { RadioSlots, RadioState } from './Radio.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
 export declare const radioClassName = "fui-Radio";
+export declare const radioClassNames: SlotClassNames<RadioSlots>;
 /**
  * Apply styling to the Radio slots based on the state
  */

package/lib-commonjs/components/Radio/useRadioStyles.js

@@ -3,17 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRadioStyles_unstable = exports.radioClassName = void 0;
+exports.useRadioStyles_unstable = exports.radioClassNames = exports.radioClassName = void 0;
 
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
+
 
 exports.radioClassName = 'fui-Radio';
-const indicatorClassName = 'fui-Radio__indicator';
-const labelClassName = 'fui-Radio__label'; // TODO replace these spacing constants with theme values once they're on the theme
+exports.radioClassNames = {
+  root: 'fui-Radio',
+  indicator: 'fui-Radio__indicator',
+  input: 'fui-Radio__input',
+  label: 'fui-Radio__label'
+}; // TODO replace these spacing constants with theme values once they're on the theme
 
 const spacingHorizontalS = '8px';
 const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
@@ -40,23 +48,37 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
   },
   "focusIndicator": {
     "B486eqv": "f2hkw1w",
-    "c2y4jd": "fsofd9k",
+    "vchsgm": "fbiesyy",
+    "ozrjjd": ["fq2kn9", "f1jxwnad"],
+    "B7lelfh": "f1il7mou",
+    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
     "B8vm7ur": "f12sql3b",
     "f4hv8x": "f1i4q40k",
     "Gpan81": "fcrbge9",
-    "z7afg": "ft464mn",
     "rsjj6t": "fskqmiq",
-    "Bqsd8kq": "f2gy8jn",
-    "sfhsbh": "f1pke3uf",
-    "Bugh3ej": "f18xdlq9",
-    "hpanx6": "f1114nks",
+    "E86f5s": "f1kbdjx9",
+    "f5nhos": ["fw1d893", "fpuz8dn"],
+    "Bhtq6h7": "f14hlsw1",
+    "Bubk9yy": ["fpuz8dn", "fw1d893"],
+    "dzajus": "f1bkt4b4",
+    "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
+    "Byq6oy9": "fyyqeim",
+    "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
+    "Bi8bqab": ["f1aneyfs", "f15nmyc0"],
+    "kq6z4e": ["f15nmyc0", "f1aneyfs"],
+    "l5tc3q": ["f3cpy5b", "f13v6kgv"],
+    "d1z3ck": ["f13v6kgv", "f3cpy5b"],
+    "epcuuz": "filx0we",
+    "Ba33l6n": ["f1horip2", "fgnx9ah"],
+    "va7z1g": "fkii2tb",
+    "Bmi6mq9": ["fgnx9ah", "f1horip2"],
     "Bjkpy09": "f1unftzx",
     "Jxg1p8": "f8rjbh6",
     "Bc94xmo": ["fxfgh6q", "f8l10fm"],
     "Bj23z95": ["f8l10fm", "fxfgh6q"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fe5j3v{row-gap:12px;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fe5j3v{row-gap:12px;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 
@@ -170,15 +192,15 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
 
 const useRadioStyles_unstable = state => {
   const rootStyles = useRootStyles();
-  state.root.className = react_1.mergeClasses(exports.radioClassName, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
   const inputStyles = useInputStyles();
-  state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputStyles.base, state.input.className);
   const indicatorStyles = useIndicatorStyles();
-  state.indicator.className = react_1.mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);
+  state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
   const labelStyles = useLabelStyles();
 
   if (state.label) {
-    state.label.className = react_1.mergeClasses(labelClassName, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
+    state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
   }
 };
 

package/lib-commonjs/components/Radio/useRadioStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioState } from './Radio.types';\n\nexport const radioClassName = 'fui-Radio';\nconst indicatorClassName = 'fui-Radio__indicator';\nconst labelClassName = 'fui-Radio__label';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n    rowGap: spacingHorizontalM,\n  },\n\n  focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n\n    ':enabled': {\n      cursor: 'pointer',\n    },\n\n    // When unchecked, hide the circle icon (child of the indicator)\n    [`:not(:checked) ~ .${indicatorClassName} > *`]: {\n      opacity: '0',\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    // Colors for the disabled state\n    ':disabled': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n\n  below: {\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassName,\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      labelClassName,\n      labelStyles.base,\n      state.labelPosition === 'below' && labelStyles.below,\n      state.label.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,SAAS,EAAE,sBAF8C;AAGzD,EAAA,KAAK,EAAE,kBAHkD;AAIzD,EAAA,KAAK,EAAE;AAJkD,CAA9C,C,CAOb;;AACA,MAAM,kBAAkB,GAAG,KAA3B;AACA,MAAM,kBAAkB,GAAG,MAA3B,C,CAEA;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAiBA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAsFA,MAAM,kBAAkB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AAoBA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAeA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,CAAC,cAHU,EAIrB,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,UAAU,CAAC,QAJzB,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;AAQA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,KAA7B,EAAoC,WAAW,CAAC,IAAhD,EAAsD,KAAK,CAAC,KAAN,CAAY,SAAlE,CAAxB;AAEA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,eAAA,CAAgB,SAA7B,EAAwC,eAAe,CAAC,IAAxD,EAA8D,KAAK,CAAC,SAAN,CAAgB,SAA9E,CAA5B;AAEA,QAAM,WAAW,GAAG,cAAc,EAAlC;;AACA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,eAAA,CAAgB,KADM,EAEtB,WAAW,CAAC,IAFU,EAGtB,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,WAAW,CAAC,KAHzB,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;AAMD;AACF,CAzBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n  root: 'fui-Radio',\n  indicator: 'fui-Radio__indicator',\n  input: 'fui-Radio__input',\n  label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n    rowGap: spacingHorizontalM,\n  },\n\n  focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n\n    ':enabled': {\n      cursor: 'pointer',\n    },\n\n    // When unchecked, hide the circle icon (child of the indicator)\n    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n      opacity: '0',\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${radioClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${radioClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${radioClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    // Colors for the disabled state\n    ':disabled': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n\n  below: {\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      state.labelPosition === 'below' && labelStyles.below,\n      state.label.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,7 +5,7 @@ export declare type RadioGroupSlots = {
     /**
      * The radio group root.
      */
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
 };
 export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {
     /**

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.d.ts

@@ -1,5 +1,10 @@
-import { RadioGroupState } from './RadioGroup.types';
+import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `radioGroupClassNames.root` instead.
+ */
 export declare const radioGroupClassName = "fui-RadioGroup";
+export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
 /**
  * Apply styling to the RadioGroup slots based on the state
  */

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js

@@ -3,11 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRadioGroupStyles_unstable = exports.radioGroupClassName = void 0;
+exports.useRadioGroupStyles_unstable = exports.radioGroupClassNames = exports.radioGroupClassName = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
+/**
+ * @deprecated Use `radioGroupClassNames.root` instead.
+ */
+
 
 exports.radioGroupClassName = 'fui-RadioGroup';
+exports.radioGroupClassNames = {
+  root: 'fui-RadioGroup'
+};
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
@@ -27,7 +34,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useRadioGroupStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.radioGroupClassName, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
 };
 
 exports.useRadioGroupStyles_unstable = useRadioGroupStyles_unstable;

package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;;AAEb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,mBADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHjB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupState } from './RadioGroup.types';\n\nexport const radioGroupClassName = 'fui-RadioGroup';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    radioGroupClassName,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/RadioGroup/useRadioGroupStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,GAAsB,gBAAtB;AACA,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE;AAD6D,CAAxD;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA2B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,oBAAA,CAAqB,IADA,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,QAHjB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAMD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioGroupClassNames.root` instead.\n */\nexport const radioGroupClassName = 'fui-RadioGroup';\nexport const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {\n  root: 'fui-RadioGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'flex-start',\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\n/**\n * Apply styling to the RadioGroup slots based on the state\n */\nexport const useRadioGroupStyles_unstable = (state: RadioGroupState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    radioGroupClassNames.root,\n    styles.root,\n    state.layout === 'vertical' && styles.vertical,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "0.0.0-nightly-20220311-0445.1",
+  "version": "0.0.0-nightly-20220316-0419.1",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,14 +27,14 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220311-0445.1"
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220316-0419.1"
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.159-beta.10",
-    "@fluentui/react-label": "0.0.0-nightly-20220311-0445.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20220311-0445.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20220311-0445.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20220311-0445.1",
+    "@fluentui/react-label": "0.0.0-nightly-20220316-0419.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20220316-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220316-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220316-0419.1",
     "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },