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

package/Spec.md

@@ -0,0 +1,292 @@
+# @fluentui/react-radio Spec
+
+A Radio allows a user to select a single value from two or more options. All Radios with the same `name` are considered to be part of the same group. However, a `RadioGroup` is recommended to add a group label, formatting, and other functionality.
+
+## Background
+
+### Prior Art
+
+- [OpenUI research](https://open-ui.org/components/radio-button.research)
+- [Epic](https://github.com/microsoft/fluentui/issues/19953)
+
+### Comparison of [Fabric ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) and [Stardust RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition)
+
+- All mentions of v7 or v8 refer to Fabric - `@fluentui/react` ([docsite](https://developer.microsoft.com/en-us/fluentui#/))
+- All mentions of v0 refer to Northstar - `@fluentui/react-northstar` ([docsite](https://fluentsite.z22.web.core.windows.net/))
+
+See Appendix for a detailed comparison of the two components.
+
+In Fabric the Radio component is represented by the [ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) component.
+Fabric creates options based on data passed in via the `options` prop.
+It uses the option's `key` property as the input value and holds the currently selected value in the `selectedKey` prop.
+Fabric also allows an image to serve as a label for an option.
+
+```tsx
+<ChoiceGroup
+  defaultSelectedKey="B"
+  options={[
+    { key: 'A', text: 'Option A' },
+    { key: 'B', text: 'Option B' },
+    { key: 'C', text: 'Option C', disabled: true },
+    { key: 'D', text: 'Option D' },
+  ]}
+  label="Pick one"
+  required={true}
+/>
+```
+
+In Northstar the Radio component is represented by the [RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition) component.
+Northstar creates options based on data passed in via the `items` prop.
+It uses the option's `value` property as the input value and holds the currently selected value in the `checkedValue` prop.
+
+```tsx
+<RadioGroup
+  onCheckedValueChange={handleChange}
+  items={[
+    { key: '1', label: 'Make your choice', value: '1' },
+    { key: '2', label: 'Another option', value: '2' },
+  ]}
+/>
+```
+
+## Variants
+
+### Layout
+
+#### Horizonal
+
+Inline positioning of the inputs and labels.
+
+![Horizontal group](./etc/images/horizontal-group.png)
+
+#### Horizonal stacked
+
+Positioning the label at the bottom of the radio inputs.
+
+![Horizontal group - stacked](./etc/images/horizontal-group-stacked.png)
+
+#### Vertical
+
+Default vertical positioning of Radio items.
+
+![Vertical group](./etc/images/vertical-group.png)
+
+#### Vertical with input
+
+Default positioning of Radio items with an input as its last Radio item.
+
+![Vertical group with input](./etc/images/vertical-group-with-input.png)
+
+### Vertical with dropdown
+
+Default positioning of Radio items with a dropdown as its last Radio item.
+
+![Vertical group with dropdown](./etc/images/vertical-group-with-dropdown.png)
+
+## API
+
+### Components
+
+| Component         | Purpose                                                                         |
+| ----------------- | ------------------------------------------------------------------------------- |
+| RadioGroup        | Wraps radio inputs. Provides RadioGroupContext and layout for the radio items.  |
+| RadioGroupContext | Provides some props like `name` to Radio items that are children of RadioGroup. |
+| Radio             | Represents a single radio item (input and label).                               |
+
+### RadioGroup
+
+Link to [RadioGroup.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/RadioGroup/RadioGroup.types.ts)
+
+| Prop           | Type                                                | Default value          | Purpose                                                  |
+| -------------- | --------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
+| (root)         | slot: `<div role="radiogroup">`                     |                        | The root slot has the radiogroup role.                   |
+| `name`         | `string`                                            | `useId('radiogroup-')` | Name property passed to child radios.                    |
+| `value`        | `string`                                            |                        | Currently selected value. Used only for controlled mode. |
+| `defaultValue` | `string`                                            |                        | Default selected value.                                  |
+| `disabled`     | `boolean`                                           | `false`                | Disables all radio items inside the group.               |
+| `layout`       | `"vertical" \| "horizontal" \| "horizontalStacked"` | `vertical`             | Specifies the layout of the radio items.                 |
+| `onChange`     | `(event, data: { value: string }) => void`          |                        | Callback when a radio item is selected.                  |
+
+### RadioGroupContext
+
+This is a context object provided by RadioGroup that allows all of the child Radio items to have the same name, and coordinate the selected item.
+
+The context contains the following props from RadioGroup:
+
+- `name`
+- `layout`
+- `defaultValue`
+- `value`
+- `disabled`
+
+### Radio
+
+Link to [Radio.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/Radio/Radio.types.ts)
+
+| Prop        | Type                         | Purpose                                                             |
+| ----------- | ---------------------------- | ------------------------------------------------------------------- |
+| (root)      | slot: `<span>`               | Wrapper for the input, indicator, and label                         |
+| `input`     | slot: `<input type="radio">` | Hidden input element that handles the radio's behavior.             |
+| `indicator` | slot: `<div>`                | The circular indicator to show the radio's checked/unchecked state. |
+| `label`     | slot: `<Label>`              | Label that will be rendered next to the radio indicator.            |
+| `value`     | `string`                     | The value of the RadioGroup when this Radio is selected             |
+| `checked`   | `boolean`                    | Whether the input is checked or not.                                |
+| `disabled`  | `boolean`                    | Whether the input is disabled or not.                               |
+
+## Sample Code
+
+A simple `RadioGroup`.
+
+```jsx
+<RadioGroup defaultValue="one">
+  <Radio value="one" label="Option One" />
+  <Radio value="two" label="Option Two" />
+  <Radio value="three" label="Option Three" />
+</RadioGroup>
+```
+
+`Radio` can be used without a `RadioGroup`, but it is then up to the user to add the same `name` to each item:
+
+```jsx
+<>
+  <Radio name="number" value="one" label="Option One" defaultChecked />
+  <Radio name="number" value="two" label="Option Two" />
+  <Radio name="number" value="three" label="Option Three" />
+</>
+```
+
+## Structure
+
+### Expected DOM structure
+
+```html
+<div role="radiogroup" class="fui-RadioGroup" name="radiogroup-0">
+  <span class="fui-Radio">
+    <input type="radio" id="radio-1" name="radiogroup-0" value="one" checked />
+    <div class="fui-Radio__indicator">
+      <svg><circle /></svg>
+    </div>
+    <label class="fui-Label" for="radio-1">Option One</label>
+  </span>
+
+  <span class="fui-Radio">
+    <input type="radio" id="radio-2" name="radiogroup-0" value="two" />
+    <div class="fui-Radio__indicator">
+      <svg><circle /></svg>
+    </div>
+    <label class="fui-Label" for="radio-2">Option Two</label>
+  </span>
+
+  <span class="fui-Radio">
+    <input type="radio" id="radio-3" name="radiogroup-0" value="three" />
+    <div class="fui-Radio__indicator">
+      <svg><circle /></svg>
+    </div>
+    <label class="fui-Label" for="radio-3">Option Three</label>
+  </span>
+</div>
+```
+
+## Behaviors
+
+### Mouse/Touch
+
+The Radio's hit target fills the entire space around the indicator and label (including the padding).
+
+### Keyboard
+
+RadioGroup inherits all of its mouse and keyboard behaviors from the browser's handling of `<input type="radio">`.
+
+- It has no special handling of clicks or keypresses for toggling beyond the built-in control.
+- The browser handles arrow key selection, and creating a single tab stop for the control.
+
+### Disabled
+
+- Individual Radio items can be disabled, in which case they are grayed out and can't be selected or focused.
+  - This interaction is built-into the browser by setting `disabled` on the `<input>` control.
+- The entire RadioGroup can be disabled, which uses RadioGroupContext to disable all of the individual Radio items.
+
+### Group Name
+
+- All Radio items in a group must have the same `name` for the browser to handle keyboarding and selection.
+- The RadioGroup provides its `name` through RadioGroupContext, and each Radio inside applies the `name`.
+- If a `name` is not provided on RadioGroup, a unique name is automatically generated with `useId`.
+
+## Accessibility
+
+### RadioGroup
+
+This implementation based on the [Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/) examples of Web Accessibility Tutorials (that follow WCAG).
+
+- The RadioGroup root is a `<div role="radiogroup">` to provide the default accessibility behavior of a radiogroup.
+- If a group label is added, the RadioGroup needs to have `aria-labelledby` referencing the label.
+
+### Radio
+
+- The Radio's primary slot is an `<input type="radio">`, with opacity 0, and covers the root.
+  - This way, the Radio's hit target fills the entire space around the indicator and label (including the padding).
+- The Radio's label is a `<label>` element with `for={input.id}` to associate it with the input slot.
+
+<!--
+## Migration
+TBD: Link to Migration guide
+-->
+
+# Appendix
+
+## v8 vs v0 comparison
+
+### RadioGroup (v0) vs ChoiceGroup (v8) prop mapping
+
+_⚠️ Props not included in this section are marked as deprecated and will not be considered._
+
+| Purpose                                                                                           | Fabric (v8)        | Northstar (v0)       | Matching                                   |
+| ------------------------------------------------------------------------------------------------- | ------------------ | -------------------- | ------------------------------------------ |
+| Called after radio group value is changed.                                                        | onChange           | onCheckedValueChange | Matching 🛠️                                |
+| The options/items for the group.                                                                  | options            | items                | Matching                                   |
+| Additional CSS styles to apply to the component instance.                                         | styles             | styles               | Matching                                   |
+| Initial checkedValue value.                                                                       | defaultSelectedKey | defaultCheckedValue  | Matching functionality, not implementation |
+| Value of the currently checked radio item.                                                        | selectedKey        | checkedValue         | Matching functionality, not implementation |
+| Theme - Override for theme site variables to allow modifications of component styling via themes. | theme              | variables            | Matching                                   |
+| ID of an element to use as the aria label for this ChoiceGroup.                                   | ariaLabelledBy     | -                    | -                                          |
+| Optional callback to access the `IChoiceGroup` interface.                                         | componentRef       | -                    | -                                          |
+| Descriptive label for the choice group.                                                           | label              | -                    | -                                          |
+| Accessibility behavior if overridden by the user.                                                 | -                  | accessibility        | -                                          |
+| An element type to render as (string or component).                                               | -                  | as                   | -                                          |
+| Additional CSS class name(s) to apply.                                                            | -                  | className            | -                                          |
+| A vertical radio group displays elements vertically.                                              | -                  | vertical             | -                                          |
+| -                                                                                                 | -                  | design               | -                                          |
+
+### RadioItem (v0) vs ChoiceGroupOption (v8) props mapping
+
+| Purpose                                                                         | Fabric (v8)        | Northstar (v0)   | Matching |
+| ------------------------------------------------------------------------------- | ------------------ | ---------------- | -------- |
+| A required key to uniquely identify the option.                                 | key (required)     | -                | -        |
+| The text string for the option.                                                 | text (required) ❓ | label            | Matching |
+| Call to provide customized styling that will layer on top of the variant rules. | styles             | styles           | Matching |
+| A radio item can appear disabled and be unable to change states.                | disabled           | disabled         | Matching |
+| Aria label of the option for the benefit of screen reader users.                | ariaLabel          | -                | -        |
+| Props for an icon to display with this option.                                  | iconProps          | -                | -        |
+| ID used on the option's input element.                                          | id                 | -                | -        |
+| Alt text if the option is an image.                                             | imageAlt           | -                | -        |
+| The width and height of the image in px for choice field.                       | imageSize          | -                | -        |
+| Image to display with this option.                                              | imageSrc           | -                | -        |
+| ID used on the option's label.                                                  | labelId            | -                | -        |
+| Used to customize option rendering.                                             | onRenderField      | -                | -        |
+| Used to customize label rendering.                                              | onRenderLabel      | -                | -        |
+| The src of image for choice field which is selected.                            | selectedImageSrc   | -                | -        |
+| Accessibility behavior if overridden by the user.                               | -                  | accessibility    | -        |
+| Whether or not radio item is checked.                                           | -                  | checked          | -        |
+| The checked radio item indicator can be customized.                             | -                  | checkedIndicator | -        |
+| Initial checked value.                                                          | -                  | defaultChecked   | -        |
+| The radio item indicator can be customized.                                     | -                  | indicator        | -        |
+| The HTML input name.                                                            | -                  | name             | -        |
+| Called after radio item checked state is changed.                               | -                  | onChange         | -        |
+| Called after radio item is clicked.                                             | -                  | onClick          | -        |
+| Whether should focus when checked                                               | -                  | shouldFocus      | -        |
+| The HTML input value.                                                           | -                  | value            | -        |
+| A vertical radio group displays elements vertically.                            | -                  | vertical         | -        |
+| -                                                                               | -                  | as               | -        |
+| -                                                                               | -                  | className        | -        |
+| -                                                                               | -                  | variables        | -        |
+| -                                                                               | -                  | design           | -        |

package/dist/react-radio.d.ts

@@ -0,0 +1,183 @@
+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';
+
+/**
+ * Radio component is a wrapper for a radio button with a label.
+ */
+export declare const Radio: ForwardRefComponent<RadioProps>;
+
+export declare const radioClassName = "fui-Radio";
+
+/**
+ * A RadioGroup component presents a set of options where only one option can be selected.
+ */
+export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
+
+export declare const radioGroupClassName = "fui-RadioGroup";
+
+/**
+ * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
+ */
+export declare const RadioGroupContext: React_2.Context<RadioGroupContextValue>;
+
+export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'layout' | 'value' | 'defaultValue' | 'disabled'>;
+
+/**
+ * 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.
+     *
+     * @defaultvalue vertical
+     */
+    layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
+    /**
+     * Disable all Radio items in this group.
+     */
+    disabled?: boolean;
+};
+
+export declare type RadioGroupSlots = {
+    /**
+     * The radio group root.
+     */
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering RadioGroup
+ */
+export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & {
+    context: RadioGroupContextValue;
+};
+
+/**
+ * Radio Props
+ */
+export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, '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;
+};
+
+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) => 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;
+
+/**
+ * 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.d.ts

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

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,"file":"Radio.js","sourceRoot":"../src/","sources":["Radio.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Radio/index';\n"]}

package/lib/RadioGroup.d.ts

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

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,"file":"RadioGroup.js","sourceRoot":"../src/","sources":["RadioGroup.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/RadioGroup/index';\n"]}

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

@@ -0,0 +1,6 @@
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { RadioProps } from './Radio.types';
+/**
+ * Radio component is a wrapper for a radio button with a label.
+ */
+export declare const Radio: ForwardRefComponent<RadioProps>;

package/lib/components/Radio/Radio.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { renderRadio_unstable } from './renderRadio';
+import { useRadio_unstable } from './useRadio';
+import { useRadioStyles_unstable } from './useRadioStyles';
+/**
+ * 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);
+  return renderRadio_unstable(state);
+});
+Radio.displayName = 'Radio';
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAEA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","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';\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  return renderRadio_unstable(state);\n});\n\nRadio.displayName = 'Radio';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,52 @@
+import { Label } from '@fluentui/react-label';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+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'>>;
+};
+/**
+ * Radio Props
+ */
+export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, '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;
+};
+/**
+ * State used in rendering Radio
+ */
+export declare type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Radio.types.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,5 @@
+export * from './Radio';
+export * from './Radio.types';
+export * from './renderRadio';
+export * from './useRadio';
+export * from './useRadioStyles';

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';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles';\n"]}

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

@@ -0,0 +1,5 @@
+import type { RadioState } from './Radio.types';
+/**
+ * Render the final JSX of Radio
+ */
+export declare const renderRadio_unstable: (state: RadioState) => JSX.Element;

package/lib/components/Radio/renderRadio.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Radio/renderRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAFF,EAGG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHlB,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { RadioProps, RadioState } from './Radio.types';
+/**
+ * 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.Ref<HTMLInputElement>) => RadioState;