@fluentui/react-radio 0.0.0-nightly-20230502-0418.1 → 0.0.0-nightly-20230504-0417.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-radio",
   "entries": [
     {
-      "date": "Tue, 02 May 2023 04:24:32 GMT",
-      "tag": "@fluentui/react-radio_v0.0.0-nightly-20230502-0418.1",
-      "version": "0.0.0-nightly-20230502-0418.1",
+      "date": "Thu, 04 May 2023 04:24:48 GMT",
+      "tag": "@fluentui/react-radio_v0.0.0-nightly-20230504-0417.1",
+      "version": "0.0.0-nightly-20230504-0417.1",
       "comments": {
         "prerelease": [
           {
@@ -16,50 +16,50 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-radio",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230502-0418.1",
-            "commit": "bc9c2da8914b65acc704e187bb87f580f29789a3"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230504-0417.1",
+            "commit": "433bf105e0be3c4383e246e823c6c1a56a6aea0f"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,25 +1,25 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Tue, 02 May 2023 04:24:32 GMT and should not be manually modified.
+This log was last generated on Thu, 04 May 2023 04:24:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230502-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20230502-0418.1)
+## [0.0.0-nightly-20230504-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20230504-0417.1)
 
-Tue, 02 May 2023 04:24:32 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.11..@fluentui/react-radio_v0.0.0-nightly-20230502-0418.1)
+Thu, 04 May 2023 04:24:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.1.11..@fluentui/react-radio_v0.0.0-nightly-20230504-0417.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-field to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230502-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/bc9c2da8914b65acc704e187bb87f580f29789a3) by beachball)
+- Bump @fluentui/react-field to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230504-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/433bf105e0be3c4383e246e823c6c1a56a6aea0f) by beachball)
 
 ## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.1.11)
 

package/dist/index.d.ts

@@ -0,0 +1,219 @@
+/// <reference types="react" />
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Radio component is a wrapper for a radio button with a label.
+ */
+export declare const Radio: ForwardRefComponent<RadioProps>;
+
+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>;
+
+export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
+
+export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'>;
+
+export declare type RadioGroupContextValues = {
+    radioGroup: RadioGroupContextValue;
+};
+
+/**
+ * Data for the onChange event for RadioGroup.
+ */
+export declare type RadioGroupOnChangeData = {
+    /**
+     * The value of the newly selected Radio item.
+     */
+    value: string;
+};
+
+export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {
+    /**
+     * The name of this radio group. This name is applied to all Radio items inside this group.
+     *
+     * If no name is provided, one will be generated so that all of the Radio items have the same name.
+     */
+    name?: string;
+    /**
+     * The selected Radio item in this group.
+     *
+     * This should be the `value` prop of one of the Radio items inside this group.
+     */
+    value?: string;
+    /**
+     * The default selected Radio item in this group.
+     *
+     * This should be the `value` prop of one of the Radio items inside this group.
+     */
+    defaultValue?: string;
+    /**
+     * Callback when the selected Radio item changes.
+     */
+    onChange?: (ev: React_2.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;
+    /**
+     * How the radio items are laid out in the group.
+     *
+     * @default vertical
+     */
+    layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';
+    /**
+     * Disable all Radio items in this group.
+     */
+    disabled?: boolean;
+    /**
+     * Require a selection in this group. Adds the `required` prop to all child Radio items.
+     */
+    required?: boolean;
+};
+
+export declare const RadioGroupProvider: React_2.Provider<RadioGroupContextValue | undefined>;
+
+export declare type RadioGroupSlots = {
+    /**
+     * The radio group root.
+     */
+    root: NonNullable<Slot<'div'>>;
+};
+
+/**
+ * State used in rendering RadioGroup
+ */
+export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
+
+/**
+ * Data for the onChange event for Radio.
+ */
+export declare type RadioOnChangeData = {
+    /**
+     * The value prop of this Radio item.
+     */
+    value: string;
+};
+
+/**
+ * Radio Props
+ */
+export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
+    /**
+     * The value of the RadioGroup when this Radio item is selected.
+     */
+    value?: string;
+    /**
+     * The position of the label relative to the radio indicator.
+     *
+     * This defaults to `after` unless the Radio is inside a RadioGroup with `layout="horizontalStacked"`,
+     * in which case it defaults to `below`.
+     *
+     * @defaultvalue after
+     */
+    labelPosition?: 'after' | 'below';
+    /**
+     * 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 = {
+    /**
+     * The root element of the Radio.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Radio>`.
+     * All other native props will be applied to the primary slot: `input`
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The Radio's label.
+     */
+    label: Slot<typeof Label>;
+    /**
+     * Hidden input that handles the radio's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,
+     * except `className` and `style`, which remain on the root slot.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /**
+     * A circle outline, with a filled circle icon inside when the Radio is checked.
+     */
+    indicator: NonNullable<Slot<'div'>>;
+};
+
+/**
+ * State used in rendering Radio
+ */
+export declare type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;
+
+/**
+ * Render the final JSX of Radio
+ */
+export declare const renderRadio_unstable: (state: RadioState) => JSX.Element;
+
+/**
+ * Render the final JSX of RadioGroup
+ */
+export declare const renderRadioGroup_unstable: (state: RadioGroupState, contextValues: RadioGroupContextValues) => JSX.Element;
+
+/**
+ * Create the state required to render Radio.
+ *
+ * The returned state can be modified with hooks such as useRadioStyles_unstable,
+ * before being passed to renderRadio_unstable.
+ *
+ * @param props - props from this instance of Radio
+ * @param ref - reference to `<input>` element of Radio
+ */
+export declare const useRadio_unstable: (props: RadioProps, ref: React_2.Ref<HTMLInputElement>) => RadioState;
+
+/**
+ * Create the state required to render RadioGroup.
+ *
+ * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,
+ * before being passed to renderRadioGroup_unstable.
+ *
+ * @param props - props from this instance of RadioGroup
+ * @param ref - reference to root HTMLElement of RadioGroup
+ */
+export declare const useRadioGroup_unstable: (props: RadioGroupProps, ref: React_2.Ref<HTMLDivElement>) => RadioGroupState;
+
+/**
+ * @deprecated Use useRadioGroupContextValue_unstable instead.
+ * RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.
+ */
+export declare const useRadioGroupContext_unstable: <T>(selector: (ctx: RadioGroupContextValue) => T) => T;
+
+/**
+ * Get the value of the RadioGroupContext.
+ */
+export declare const useRadioGroupContextValue_unstable: () => RadioGroupContextValue;
+
+export declare const useRadioGroupContextValues: (state: RadioGroupState) => RadioGroupContextValues;
+
+/**
+ * Apply styling to the RadioGroup slots based on the state
+ */
+export declare const useRadioGroupStyles_unstable: (state: RadioGroupState) => void;
+
+/**
+ * Apply styling to the Radio slots based on the state
+ */
+export declare const useRadioStyles_unstable: (state: RadioState) => void;
+
+export { }

package/lib/Radio.js

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

package/lib/Radio.js.map

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

package/lib/RadioGroup.js

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

package/lib/RadioGroup.js.map

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

package/lib/components/Radio/Radio.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { renderRadio_unstable } from './renderRadio';
+import { useRadio_unstable } from './useRadio';
+import { useRadioStyles_unstable } from './useRadioStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Radio component is a wrapper for a radio button with a label.
+ */
+export const Radio = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useRadio_unstable(props, ref);
+  useRadioStyles_unstable(state);
+  useCustomStyleHook_unstable('useRadioStyles_unstable')(state);
+  return renderRadio_unstable(state);
+});
+Radio.displayName = 'Radio';
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","renderRadio_unstable","useRadio_unstable","useRadioStyles_unstable","useCustomStyleHook_unstable","Radio","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { RadioProps } from './Radio.types';\nimport { renderRadio_unstable } from './renderRadio';\nimport { useRadio_unstable } from './useRadio';\nimport { useRadioStyles_unstable } from './useRadioStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Radio component is a wrapper for a radio button with a label.\n */\nexport const Radio: ForwardRefComponent<RadioProps> = React.forwardRef((props, ref) => {\n  const state = useRadio_unstable(props, ref);\n\n  useRadioStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useRadioStyles_unstable')(state);\n\n  return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,KAAA,gBAAyCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQP,iBAAA,CAAkBK,KAAA,EAAOC,GAAA;EAEvCL,uBAAA,CAAwBM,KAAA;EAExBL,2BAAA,CAA4B,2BAA2BK,KAAA;EAEvD,OAAOR,oBAAA,CAAqBQ,KAAA;AAC9B;AAEAJ,KAAA,CAAMK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React"],"sources":["../../../src/components/Radio/Radio.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type 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'>, 'onChange' | '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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/Radio/index.js

@@ -0,0 +1,6 @@
+export * from './Radio';
+export * from './Radio.types';
+export * from './renderRadio';
+export * from './useRadio';
+export * from './useRadioStyles.styles';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/Radio/renderRadio.js

@@ -0,0 +1,13 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Radio
+ */
+export const renderRadio_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, /*#__PURE__*/createElement(slots.input, slotProps.input), /*#__PURE__*/createElement(slots.indicator, slotProps.indicator), slots.label && /*#__PURE__*/createElement(slots.label, slotProps.label));
+};
+//# sourceMappingURL=renderRadio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderRadio_unstable","state","slots","slotProps","root","input","indicator","label"],"sources":["../../../src/components/Radio/renderRadio.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { RadioSlots, RadioState } from './Radio.types';\n\n/**\n * Render the final JSX of Radio\n */\nexport const renderRadio_unstable = (state: RadioState) => {\n  const { slots, slotProps } = getSlotsNext<RadioSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.indicator {...slotProps.indicator} />\n      {slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,oBAAA,GAAwBC,KAAA,IAAsB;EACzD,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAyBE,KAAA;EAEtD,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,eAC5BN,aAfN,CAeOI,KAAA,CAAMG,KAAK,EAAKF,SAAA,CAAUE,KAAK,gBAChCP,aAhBN,CAgBOI,KAAA,CAAMI,SAAS,EAAKH,SAAA,CAAUG,SAAS,GACvCJ,KAAA,CAAMK,KAAK,iBAAIT,aAjBtB,CAiBuBI,KAAA,CAAMK,KAAK,EAAKJ,SAAA,CAAUI,KAAK;AAGtD"}

package/lib/components/Radio/useRadio.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { CircleFilled } from '@fluentui/react-icons';
+import { Label } from '@fluentui/react-label';
+import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';
+import { useFocusWithin } from '@fluentui/react-tabster';
+/**
+ * Create the state required to render Radio.
+ *
+ * The returned state can be modified with hooks such as useRadioStyles_unstable,
+ * before being passed to renderRadio_unstable.
+ *
+ * @param props - props from this instance of Radio
+ * @param ref - reference to `<input>` element of Radio
+ */
+export const useRadio_unstable = (props, ref) => {
+  const group = useRadioGroupContextValue_unstable();
+  const {
+    name = group.name,
+    checked = group.value !== undefined ? group.value === props.value : undefined,
+    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
+    labelPosition = group.layout === 'horizontal-stacked' ? 'below' : 'after',
+    disabled = group.disabled,
+    required = group.required,
+    'aria-describedby': ariaDescribedBy = group['aria-describedby'],
+    onChange
+  } = props;
+  const nativeProps = getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
+  });
+  const root = resolveShorthand(props.root, {
+    required: true,
+    defaultProps: {
+      ref: useFocusWithin(),
+      ...nativeProps.root
+    }
+  });
+  const input = resolveShorthand(props.input, {
+    required: true,
+    defaultProps: {
+      ref,
+      type: 'radio',
+      id: useId('radio-', nativeProps.primary.id),
+      name,
+      checked,
+      defaultChecked,
+      disabled,
+      required,
+      'aria-describedby': ariaDescribedBy,
+      ...nativeProps.primary
+    }
+  });
+  input.onChange = mergeCallbacks(input.onChange, ev => {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+      value: ev.currentTarget.value
+    });
+  });
+  const label = resolveShorthand(props.label, {
+    defaultProps: {
+      htmlFor: input.id,
+      disabled: input.disabled
+    }
+  });
+  const indicator = resolveShorthand(props.indicator, {
+    required: true,
+    defaultProps: {
+      'aria-hidden': true,
+      children: /*#__PURE__*/React.createElement(CircleFilled, null)
+    }
+  });
+  return {
+    labelPosition,
+    components: {
+      root: 'span',
+      input: 'input',
+      label: Label,
+      indicator: 'div'
+    },
+    root,
+    input,
+    label,
+    indicator
+  };
+};
+//# sourceMappingURL=useRadio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","CircleFilled","Label","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useId","useRadioGroupContextValue_unstable","useFocusWithin","useRadio_unstable","props","ref","group","name","checked","value","undefined","defaultChecked","defaultValue","labelPosition","layout","disabled","required","ariaDescribedBy","onChange","nativeProps","primarySlotTagName","excludedPropNames","root","defaultProps","input","type","id","primary","ev","currentTarget","label","htmlFor","indicator","children","createElement","components"],"sources":["../../../src/components/Radio/useRadio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useRadioGroupContextValue_unstable } from '../../contexts/RadioGroupContext';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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 = useRadioGroupContextValue_unstable();\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 === 'horizontal-stacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required = group.required,\n    'aria-describedby': ariaDescribedBy = group['aria-describedby'],\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: {\n      ref: useFocusWithin<HTMLSpanElement>(),\n      ...nativeProps.root,\n    },\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      required,\n      'aria-describedby': ariaDescribedBy,\n      ...nativeProps.primary,\n    },\n  });\n\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled: input.disabled,\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAC7B,SAASC,KAAK,QAAQ;AACtB,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AACnF,SAASC,kCAAkC,QAAQ;AACnD,SAASC,cAAc,QAAQ;AAG/B;;;;;;;;;AASA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAAiD;EACpG,MAAMC,KAAA,GAAQL,kCAAA;EAEd,MAAM;IACJM,IAAA,GAAOD,KAAA,CAAMC,IAAI;IACjBC,OAAA,GAAUF,KAAA,CAAMG,KAAK,KAAKC,SAAA,GAAYJ,KAAA,CAAMG,KAAK,KAAKL,KAAA,CAAMK,KAAK,GAAGC,SAAS;IAC7EC,cAAA,GAAiBL,KAAA,CAAMM,YAAY,KAAKF,SAAA,GAAYJ,KAAA,CAAMM,YAAY,KAAKR,KAAA,CAAMK,KAAK,GAAGC,SAAS;IAClGG,aAAA,GAAgBP,KAAA,CAAMQ,MAAM,KAAK,uBAAuB,UAAU,OAAO;IACzEC,QAAA,GAAWT,KAAA,CAAMS,QAAQ;IACzBC,QAAA,GAAWV,KAAA,CAAMU,QAAQ;IACzB,oBAAoBC,eAAA,GAAkBX,KAAK,CAAC,mBAAmB;IAC/DY;EAAQ,CACT,GAAGd,KAAA;EAEJ,MAAMe,WAAA,GAActB,yBAAA,CAA0B;IAC5CO,KAAA;IACAgB,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,WAAW,kBAAkB;EACnD;EAEA,MAAMC,IAAA,GAAOvB,gBAAA,CAAiBK,KAAA,CAAMkB,IAAI,EAAE;IACxCN,QAAA,EAAU,IAAI;IACdO,YAAA,EAAc;MACZlB,GAAA,EAAKH,cAAA;MACL,GAAGiB,WAAA,CAAYG;IACjB;EACF;EAEA,MAAME,KAAA,GAAQzB,gBAAA,CAAiBK,KAAA,CAAMoB,KAAK,EAAE;IAC1CR,QAAA,EAAU,IAAI;IACdO,YAAA,EAAc;MACZlB,GAAA;MACAoB,IAAA,EAAM;MACNC,EAAA,EAAI1B,KAAA,CAAM,UAAUmB,WAAA,CAAYQ,OAAO,CAACD,EAAE;MAC1CnB,IAAA;MACAC,OAAA;MACAG,cAAA;MACAI,QAAA;MACAC,QAAA;MACA,oBAAoBC,eAAA;MACpB,GAAGE,WAAA,CAAYQ;IACjB;EACF;EAEAH,KAAA,CAAMN,QAAQ,GAAGpB,cAAA,CAAe0B,KAAA,CAAMN,QAAQ,EAAEU,EAAA;IAAM,OAAAV,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAWU,EAAA,EAAI;MAAEnB,KAAA,EAAOmB,EAAA,CAAGC,aAAa,CAACpB;IAAM;;EAErG,MAAMqB,KAAA,GAAQ/B,gBAAA,CAAiBK,KAAA,CAAM0B,KAAK,EAAE;IAC1CP,YAAA,EAAc;MACZQ,OAAA,EAASP,KAAA,CAAME,EAAE;MACjBX,QAAA,EAAUS,KAAA,CAAMT;IAClB;EACF;EAEA,MAAMiB,SAAA,GAAYjC,gBAAA,CAAiBK,KAAA,CAAM4B,SAAS,EAAE;IAClDhB,QAAA,EAAU,IAAI;IACdO,YAAA,EAAc;MACZ,eAAe,IAAI;MACnBU,QAAA,eAAUvC,KAAA,CAAAwC,aAAA,CAACvC,YAAA;IACb;EACF;EAEA,OAAO;IACLkB,aAAA;IACAsB,UAAA,EAAY;MACVb,IAAA,EAAM;MACNE,KAAA,EAAO;MACPM,KAAA,EAAOlC,KAAA;MACPoC,SAAA,EAAW;IACb;IACAV,IAAA;IACAE,KAAA;IACAM,KAAA;IACAE;EACF;AACF"}

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

@@ -0,0 +1,72 @@
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+export const radioClassNames = {
+  root: 'fui-Radio',
+  indicator: 'fui-Radio__indicator',
+  input: 'fui-Radio__input',
+  label: 'fui-Radio__label'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSize = '16px';
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r18vxbm9", "r1631i6s", [".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18vxbm9:focus{outline-style:none;}", ".r18vxbm9:focus-visible{outline-style:none;}", ".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1631i6s:focus{outline-style:none;}", ".r1631i6s:focus-visible{outline-style:none;}", ".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1631i6s[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
+const useRootStyles = /*#__PURE__*/__styles({
+  vertical: {
+    Beiy3e4: "f1vx9l62",
+    Bt984gj: "f122n59"
+  }
+}, {
+  d: [".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;}"]
+});
+const useInputBaseClassName = /*#__PURE__*/__resetStyles("r9gx1vl", "r1uk1i2c", [".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r9gx1vl:enabled{cursor:pointer;}", ".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}", ".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r1uk1i2c:enabled{cursor:pointer;}", ".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}", ".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"]);
+const useInputStyles = /*#__PURE__*/__styles({
+  below: {
+    a9b677: "fly5x3f",
+    Bqenvij: "f1je6zif"
+  }
+}, {
+  d: [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rid4516", null, [".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"]);
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = /*#__PURE__*/__styles({
+  base: {
+    qb2dma: "f7nlbp4",
+    z8tnut: "f1kwiid1",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f5b47ha",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  after: {
+    uwmqm3: ["fruq291", "f7x41pl"],
+    B6of3ja: "fjzwpt6",
+    jrapky: "fh6j2fo"
+  },
+  below: {
+    z8tnut: "f1ywm7hm",
+    fsow6f: "f17mccla"
+  }
+}, {
+  d: [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f17mccla{text-align:center;}"]
+});
+/**
+ * Apply styling to the Radio slots based on the state
+ */
+export const useRadioStyles_unstable = state => {
+  const {
+    labelPosition
+  } = state;
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+  const inputBaseClassName = useInputBaseClassName();
+  const inputStyles = useInputStyles();
+  state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
+  const indicatorBaseClassName = useIndicatorBaseClassName();
+  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
+  const labelStyles = useLabelStyles();
+  if (state.label) {
+    state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+  }
+};
+//# sourceMappingURL=useRadioStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","radioClassNames","root","indicator","input","label","indicatorSize","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","Bt984gj","d","useInputBaseClassName","useInputStyles","below","a9b677","Bqenvij","useIndicatorBaseClassName","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","after","B6of3ja","jrapky","fsow6f","useRadioStyles_unstable","state","labelPosition","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","labelStyles"],"sources":["../../../src/components/Radio/useRadioStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  position: 'relative',\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n  height: '100%',\n  boxSizing: 'border-box',\n  margin: 0,\n  opacity: 0,\n\n  ':enabled': {\n    cursor: 'pointer',\n    [`& ~ .${radioClassNames.label}`]: {\n      cursor: 'pointer',\n    },\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      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${radioClassNames.indicator}`]: {\n        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      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${radioClassNames.indicator}`]: {\n        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      cursor: 'default',\n    },\n    [`& ~ .${radioClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  below: {\n    width: '100%',\n    height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\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  overflow: 'hidden',\n\n  border: tokens.strokeWidthThin + ' solid',\n  borderRadius: tokens.borderRadiusCircular,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\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    marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n\n  below: {\n    paddingTop: tokens.spacingVerticalXS,\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 { labelPosition } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    radioClassNames.input,\n    inputBaseClassName,\n    labelPosition === 'below' && inputStyles.below,\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  state.indicator.className = mergeClasses(\n    radioClassNames.indicator,\n    indicatorBaseClassName,\n    state.indicator.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      radioClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n};\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ;AACxC,SAASC,MAAM,QAAQ;AACvB,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ;AAItE,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;EACNC,SAAA,EAAW;EACXC,KAAA,EAAO;EACPC,KAAA,EAAO;AACT;AAEA;AACA,MAAMC,aAAA,GAAgB;AAEtB,MAAMC,oBAAA,gBAAuBV,aAAA,guEAI7B;AAEA,MAAMW,aAAA,gBAAgBV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAKtB;AAEA,MAAMC,qBAAA,gBAAwBhB,aAAA,46GAsF9B;AAEA,MAAMiB,cAAA,gBAAiBhB,QAAA;EAAAiB,KAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,EAKvB;AAEA,MAAMM,yBAAA,gBAA4BrB,aAAA,4lBAiBlC;AAEA;AACA,MAAMsB,cAAA,gBAAiBrB,QAAA;EAAAsB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAb,KAAA;IAAAO,MAAA;IAAAO,MAAA;EAAA;AAAA;EAAAjB,CAAA;AAAA,EAmBvB;AAEA;;;AAGA,OAAO,MAAMkB,uBAAA,GAA2BC,KAAA,IAAsB;EAC5D,MAAM;IAAEC;EAAa,CAAE,GAAGD,KAAA;EAE1B,MAAME,iBAAA,GAAoB1B,oBAAA;EAC1B,MAAM2B,UAAA,GAAa1B,aAAA;EACnBuB,KAAA,CAAM7B,IAAI,CAACiC,SAAS,GAAGpC,YAAA,CACrBE,eAAA,CAAgBC,IAAI,EACpB+B,iBAAA,EACAD,aAAA,KAAkB,WAAWE,UAAA,CAAWzB,QAAQ,EAChDsB,KAAA,CAAM7B,IAAI,CAACiC,SAAS;EAGtB,MAAMC,kBAAA,GAAqBvB,qBAAA;EAC3B,MAAMwB,WAAA,GAAcvB,cAAA;EACpBiB,KAAA,CAAM3B,KAAK,CAAC+B,SAAS,GAAGpC,YAAA,CACtBE,eAAA,CAAgBG,KAAK,EACrBgC,kBAAA,EACAJ,aAAA,KAAkB,WAAWK,WAAA,CAAYtB,KAAK,EAC9CgB,KAAA,CAAM3B,KAAK,CAAC+B,SAAS;EAGvB,MAAMG,sBAAA,GAAyBpB,yBAAA;EAC/Ba,KAAA,CAAM5B,SAAS,CAACgC,SAAS,GAAGpC,YAAA,CAC1BE,eAAA,CAAgBE,SAAS,EACzBmC,sBAAA,EACAP,KAAA,CAAM5B,SAAS,CAACgC,SAAS;EAG3B,MAAMI,WAAA,GAAcpB,cAAA;EACpB,IAAIY,KAAA,CAAM1B,KAAK,EAAE;IACf0B,KAAA,CAAM1B,KAAK,CAAC8B,SAAS,GAAGpC,YAAA,CACtBE,eAAA,CAAgBI,KAAK,EACrBkC,WAAA,CAAYnB,IAAI,EAChBmB,WAAW,CAACP,aAAA,CAAc,EAC1BD,KAAA,CAAM1B,KAAK,CAAC8B,SAAS;EAEzB;AACF"}

package/lib/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { renderRadioGroup_unstable } from './renderRadioGroup';
+import { useRadioGroup_unstable } from './useRadioGroup';
+import { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';
+import { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A RadioGroup component presents a set of options where only one option can be selected.
+ */
+export const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useRadioGroup_unstable(props, ref);
+  const contextValues = useRadioGroupContextValues(state);
+  useRadioGroupStyles_unstable(state);
+  useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);
+  return renderRadioGroup_unstable(state, contextValues);
+});
+RadioGroup.displayName = 'RadioGroup';
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","renderRadioGroup_unstable","useRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroupContextValues","useCustomStyleHook_unstable","RadioGroup","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { RadioGroupProps } from './RadioGroup.types';\nimport { renderRadioGroup_unstable } from './renderRadioGroup';\nimport { useRadioGroup_unstable } from './useRadioGroup';\nimport { useRadioGroupStyles_unstable } from './useRadioGroupStyles.styles';\nimport { useRadioGroupContextValues } from '../../contexts/useRadioGroupContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A RadioGroup component presents a set of options where only one option can be selected.\n */\nexport const RadioGroup: ForwardRefComponent<RadioGroupProps> = React.forwardRef((props, ref) => {\n  const state = useRadioGroup_unstable(props, ref);\n  const contextValues = useRadioGroupContextValues(state);\n\n  useRadioGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useRadioGroupStyles_unstable')(state);\n\n  return renderRadioGroup_unstable(state, contextValues);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,sBAAsB,QAAQ;AACvC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQR,sBAAA,CAAuBM,KAAA,EAAOC,GAAA;EAC5C,MAAME,aAAA,GAAgBP,0BAAA,CAA2BM,KAAA;EAEjDP,4BAAA,CAA6BO,KAAA;EAE7BL,2BAAA,CAA4B,gCAAgCK,KAAA;EAE5D,OAAOT,yBAAA,CAA0BS,KAAA,EAAOC,aAAA;AAC1C;AAEAL,UAAA,CAAWM,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React"],"sources":["../../../src/components/RadioGroup/RadioGroup.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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   * @default vertical\n   */\n  layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';\n\n  /**\n   * Disable all Radio items in this group.\n   */\n  disabled?: boolean;\n\n  /**\n   * Require a selection in this group. Adds the `required` prop to all child Radio items.\n   */\n  required?: 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  Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;\n\nexport type RadioGroupContextValue = Pick<\n  RadioGroupProps,\n  'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required' | 'aria-describedby'\n>;\n\nexport type RadioGroupContextValues = {\n  radioGroup: RadioGroupContextValue;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

package/lib/components/RadioGroup/index.js

@@ -0,0 +1,6 @@
+export * from './RadioGroup';
+export * from './RadioGroup.types';
+export * from './renderRadioGroup';
+export * from './useRadioGroup';
+export * from './useRadioGroupStyles.styles';
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/RadioGroup/renderRadioGroup.js

@@ -0,0 +1,16 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+import { RadioGroupContext } from '../../contexts/RadioGroupContext';
+/**
+ * Render the final JSX of RadioGroup
+ */
+export const renderRadioGroup_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(RadioGroupContext.Provider, {
+    value: contextValues.radioGroup
+  }, /*#__PURE__*/createElement(slots.root, slotProps.root));
+};
+//# sourceMappingURL=renderRadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","RadioGroupContext","renderRadioGroup_unstable","state","contextValues","slots","slotProps","Provider","value","radioGroup","root"],"sources":["../../../src/components/RadioGroup/renderRadioGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { RadioGroupContextValues, RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Render the final JSX of RadioGroup\n */\nexport const renderRadioGroup_unstable = (state: RadioGroupState, contextValues: RadioGroupContextValues) => {\n  const { slots, slotProps } = getSlotsNext<RadioGroupSlots>(state);\n\n  return (\n    <RadioGroupContext.Provider value={contextValues.radioGroup}>\n      <slots.root {...slotProps.root} />\n    </RadioGroupContext.Provider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,iBAAiB,QAAQ;AAGlC;;;AAGA,OAAO,MAAMC,yBAAA,GAA4BA,CAACC,KAAA,EAAwBC,aAAA,KAA2C;EAC3G,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA8BG,KAAA;EAE3D,oBACEJ,aAfJ,CAeKE,iBAAA,CAAkBM,QAAQ;IAACC,KAAA,EAAOJ,aAAA,CAAcK;kBAC/CV,aAhBN,CAgBOM,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAGpC"}

package/lib/components/RadioGroup/useRadioGroup.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { getNativeElementProps, isHTMLElement, useEventCallback, useId } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render RadioGroup.
+ *
+ * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,
+ * before being passed to renderRadioGroup_unstable.
+ *
+ * @param props - props from this instance of RadioGroup
+ * @param ref - reference to root HTMLElement of RadioGroup
+ */
+export const useRadioGroup_unstable = (props, ref) => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props);
+  const generatedName = useId('radiogroup-');
+  const {
+    name = generatedName,
+    value,
+    defaultValue,
+    disabled,
+    layout = 'vertical',
+    onChange,
+    required
+  } = props;
+  return {
+    layout,
+    name,
+    value,
+    defaultValue,
+    disabled,
+    required,
+    components: {
+      root: 'div'
+    },
+    root: {
+      ref,
+      role: 'radiogroup',
+      ...getNativeElementProps('div', props, /*excludedPropNames:*/['onChange', 'name']),
+      onChange: useEventCallback(ev => {
+        if (onChange && isHTMLElement(ev.target, {
+          constructorName: 'HTMLInputElement'
+        }) && ev.target.type === 'radio') {
+          onChange(ev, {
+            value: ev.target.value
+          });
+        }
+      })
+    }
+  };
+};
+//# sourceMappingURL=useRadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useFieldControlProps_unstable","getNativeElementProps","isHTMLElement","useEventCallback","useId","useRadioGroup_unstable","props","ref","generatedName","name","value","defaultValue","disabled","layout","onChange","required","components","root","role","ev","target","constructorName","type"],"sources":["../../../src/components/RadioGroup/useRadioGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getNativeElementProps, isHTMLElement, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { RadioGroupProps, RadioGroupState } from './RadioGroup.types';\n\n/**\n * Create the state required to render RadioGroup.\n *\n * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,\n * before being passed to renderRadioGroup_unstable.\n *\n * @param props - props from this instance of RadioGroup\n * @param ref - reference to root HTMLElement of RadioGroup\n */\nexport const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HTMLDivElement>): RadioGroupState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const generatedName = useId('radiogroup-');\n\n  const { name = generatedName, value, defaultValue, disabled, layout = 'vertical', onChange, required } = props;\n\n  return {\n    layout,\n    name,\n    value,\n    defaultValue,\n    disabled,\n    required,\n    components: {\n      root: 'div',\n    },\n    root: {\n      ref,\n      role: 'radiogroup',\n      ...getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']),\n      onChange: useEventCallback(ev => {\n        if (\n          onChange &&\n          isHTMLElement(ev.target, { constructorName: 'HTMLInputElement' }) &&\n          ev.target.type === 'radio'\n        ) {\n          onChange(ev, { value: ev.target.value });\n        }\n      }),\n    },\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAG9E;;;;;;;;;AASA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAwBC,GAAA,KAAoD;EACjH;EACAD,KAAA,GAAQN,6BAAA,CAA8BM,KAAA;EAEtC,MAAME,aAAA,GAAgBJ,KAAA,CAAM;EAE5B,MAAM;IAAEK,IAAA,GAAOD,aAAA;IAAeE,KAAA;IAAOC,YAAA;IAAcC,QAAA;IAAUC,MAAA,GAAS;IAAYC,QAAA;IAAUC;EAAQ,CAAE,GAAGT,KAAA;EAEzG,OAAO;IACLO,MAAA;IACAJ,IAAA;IACAC,KAAA;IACAC,YAAA;IACAC,QAAA;IACAG,QAAA;IACAC,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAM;MACJV,GAAA;MACAW,IAAA,EAAM;MACN,GAAGjB,qBAAA,CAAsB,OAAOK,KAAA,EAAO,sBAAuB,CAAC,YAAY,OAAO,CAAC;MACnFQ,QAAA,EAAUX,gBAAA,CAAiBgB,EAAA,IAAM;QAC/B,IACEL,QAAA,IACAZ,aAAA,CAAciB,EAAA,CAAGC,MAAM,EAAE;UAAEC,eAAA,EAAiB;QAAmB,MAC/DF,EAAA,CAAGC,MAAM,CAACE,IAAI,KAAK,SACnB;UACAR,QAAA,CAASK,EAAA,EAAI;YAAET,KAAA,EAAOS,EAAA,CAAGC,MAAM,CAACV;UAAM;QACxC;MACF;IACF;EACF;AACF"}

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

@@ -0,0 +1,23 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const radioGroupClassNames = {
+  root: 'fui-RadioGroup'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f6jr5hl"
+  },
+  vertical: {
+    Beiy3e4: "f1vx9l62"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+});
+/**
+ * Apply styling to the RadioGroup slots based on the state
+ */
+export const useRadioGroupStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(radioGroupClassNames.root, styles.root, state.layout === 'vertical' && styles.vertical, state.root.className);
+};
+//# sourceMappingURL=useRadioGroupStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","radioGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","d","useRadioGroupStyles_unstable","state","styles","className","layout"],"sources":["../../../src/components/RadioGroup/useRadioGroupStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AAIzC,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EASlB;AAEA;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA2B;EACtE,MAAMC,MAAA,GAASR,SAAA;EACfO,KAAA,CAAMR,IAAI,CAACU,SAAS,GAAGZ,YAAA,CACrBC,oBAAA,CAAqBC,IAAI,EACzBS,MAAA,CAAOT,IAAI,EACXQ,KAAA,CAAMG,MAAM,KAAK,cAAcF,MAAA,CAAOL,QAAQ,EAC9CI,KAAA,CAAMR,IAAI,CAACU,SAAS;AAExB"}

package/lib/contexts/RadioGroupContext.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
+ */
+export const RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
+const radioGroupContextDefaultValue = {};
+export const RadioGroupProvider = RadioGroupContext.Provider;
+/**
+ * Get the value of the RadioGroupContext.
+ */
+export const useRadioGroupContextValue_unstable = () => React.useContext(RadioGroupContext) || radioGroupContextDefaultValue;
+/**
+ * @deprecated Use useRadioGroupContextValue_unstable instead.
+ * RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.
+ */
+export const useRadioGroupContext_unstable = selector => selector(useRadioGroupContextValue_unstable());
+//# sourceMappingURL=RadioGroupContext.js.map

package/lib/contexts/RadioGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","RadioGroupContext","createContext","undefined","radioGroupContextDefaultValue","RadioGroupProvider","Provider","useRadioGroupContextValue_unstable","useContext","useRadioGroupContext_unstable","selector"],"sources":["../../src/contexts/RadioGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { RadioGroupContextValue } from '../RadioGroup';\n\n/**\n * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.\n */\nexport const RadioGroupContext = React.createContext<RadioGroupContextValue | undefined>(undefined);\n\nconst radioGroupContextDefaultValue: RadioGroupContextValue = {};\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\n/**\n * Get the value of the RadioGroupContext.\n */\nexport const useRadioGroupContextValue_unstable = () =>\n  React.useContext(RadioGroupContext) || radioGroupContextDefaultValue;\n\n/**\n * @deprecated Use useRadioGroupContextValue_unstable instead.\n * RadioGroupContext is no longer a selector context, and no longer benefits from having a selector.\n */\nexport const useRadioGroupContext_unstable = <T>(selector: (ctx: RadioGroupContextValue) => T): T =>\n  selector(useRadioGroupContextValue_unstable());\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAIvB;;;AAGA,OAAO,MAAMC,iBAAA,gBAAoBD,KAAA,CAAME,aAAa,CAAqCC,SAAA;AAEzF,MAAMC,6BAAA,GAAwD,CAAC;AAE/D,OAAO,MAAMC,kBAAA,GAAqBJ,iBAAA,CAAkBK,QAAQ;AAE5D;;;AAGA,OAAO,MAAMC,kCAAA,GAAqCA,CAAA,KAChDP,KAAA,CAAMQ,UAAU,CAACP,iBAAA,KAAsBG,6BAAA;AAEzC;;;;AAIA,OAAO,MAAMK,6BAAA,GAAoCC,QAAA,IAC/CA,QAAA,CAASH,kCAAA"}

package/lib/contexts/index.js

@@ -0,0 +1,3 @@
+export * from './RadioGroupContext';
+export * from './useRadioGroupContextValues';
+//# sourceMappingURL=index.js.map

package/lib/contexts/index.js.map

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

package/lib/contexts/useRadioGroupContextValues.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export const useRadioGroupContextValues = state => {
+  const {
+    name,
+    value,
+    defaultValue,
+    disabled,
+    layout,
+    required
+  } = state;
+  const ariaDescribedBy = state.root['aria-describedby'];
+  const radioGroup = React.useMemo(() => ({
+    name,
+    value,
+    defaultValue,
+    disabled,
+    layout,
+    required,
+    'aria-describedby': ariaDescribedBy
+  }), [name, value, defaultValue, disabled, layout, required, ariaDescribedBy]);
+  return {
+    radioGroup
+  };
+};
+//# sourceMappingURL=useRadioGroupContextValues.js.map

package/lib/contexts/useRadioGroupContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRadioGroupContextValues","state","name","value","defaultValue","disabled","layout","required","ariaDescribedBy","root","radioGroup","useMemo"],"sources":["../../src/contexts/useRadioGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupState } from '../RadioGroup';\n\nexport const useRadioGroupContextValues = (state: RadioGroupState): RadioGroupContextValues => {\n  const { name, value, defaultValue, disabled, layout, required } = state;\n  const ariaDescribedBy = state.root['aria-describedby'];\n\n  const radioGroup = React.useMemo<RadioGroupContextValue>(\n    () => ({\n      name,\n      value,\n      defaultValue,\n      disabled,\n      layout,\n      required,\n      'aria-describedby': ariaDescribedBy,\n    }),\n    [name, value, defaultValue, disabled, layout, required, ariaDescribedBy],\n  );\n\n  return { radioGroup };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAIvB,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAAoD;EAC7F,MAAM;IAAEC,IAAA;IAAMC,KAAA;IAAOC,YAAA;IAAcC,QAAA;IAAUC,MAAA;IAAQC;EAAQ,CAAE,GAAGN,KAAA;EAClE,MAAMO,eAAA,GAAkBP,KAAA,CAAMQ,IAAI,CAAC,mBAAmB;EAEtD,MAAMC,UAAA,GAAaX,KAAA,CAAMY,OAAO,CAC9B,OAAO;IACLT,IAAA;IACAC,KAAA;IACAC,YAAA;IACAC,QAAA;IACAC,MAAA;IACAC,QAAA;IACA,oBAAoBC;EACtB,IACA,CAACN,IAAA,EAAMC,KAAA,EAAOC,YAAA,EAAcC,QAAA,EAAUC,MAAA,EAAQC,QAAA,EAAUC,eAAA,CAAgB;EAG1E,OAAO;IAAEE;EAAW;AACtB"}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { RadioGroup, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable } from './RadioGroup';
+export { Radio, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';
+export { RadioGroupProvider, useRadioGroupContextValues, useRadioGroupContext_unstable, useRadioGroupContextValue_unstable } from './contexts/index';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RadioGroup","radioGroupClassNames","renderRadioGroup_unstable","useRadioGroupStyles_unstable","useRadioGroup_unstable","Radio","radioClassNames","renderRadio_unstable","useRadioStyles_unstable","useRadio_unstable","RadioGroupProvider","useRadioGroupContextValues","useRadioGroupContext_unstable","useRadioGroupContextValue_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  RadioGroup,\n  radioGroupClassNames,\n  renderRadioGroup_unstable,\n  useRadioGroupStyles_unstable,\n  useRadioGroup_unstable,\n} from './RadioGroup';\nexport type {\n  RadioGroupContextValue,\n  RadioGroupContextValues,\n  RadioGroupOnChangeData,\n  RadioGroupProps,\n  RadioGroupSlots,\n  RadioGroupState,\n} from './RadioGroup';\nexport { Radio, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport {\n  RadioGroupProvider,\n  useRadioGroupContextValues,\n  useRadioGroupContext_unstable, // eslint-disable-line deprecation/deprecation\n  useRadioGroupContextValue_unstable,\n} from './contexts/index';\n"],"mappings":"AAAA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB;AASP,SAASC,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ;AAEzG,SACEC,kBAAkB,EAClBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,kCAAkC,QAC7B"}

package/package.json

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

package/.swcrc

@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}