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

package/lib-commonjs/RadioGroup.d.ts

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

package/lib-commonjs/RadioGroup.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/RadioGroup/index"), exports);
+//# sourceMappingURL=RadioGroup.js.map

package/lib-commonjs/RadioGroup.js.map

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

package/lib-commonjs/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-commonjs/components/Radio/Radio.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const renderRadio_1 = /*#__PURE__*/require("./renderRadio");
+
+const useRadio_1 = /*#__PURE__*/require("./useRadio");
+
+const useRadioStyles_1 = /*#__PURE__*/require("./useRadioStyles");
+/**
+ * Radio component is a wrapper for a radio button with a label.
+ */
+
+
+exports.Radio = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useRadio_1.useRadio_unstable(props, ref);
+  useRadioStyles_1.useRadioStyles_unstable(state);
+  return renderRadio_1.renderRadio_unstable(state);
+});
+exports.Radio.displayName = 'Radio';
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Radio/Radio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,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-commonjs/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-commonjs/components/Radio/Radio.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Radio.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/Radio/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./Radio"), exports);
+
+tslib_1.__exportStar(require("./Radio.types"), exports);
+
+tslib_1.__exportStar(require("./renderRadio"), exports);
+
+tslib_1.__exportStar(require("./useRadio"), exports);
+
+tslib_1.__exportStar(require("./useRadioStyles"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Radio/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Radio';\nexport * from './Radio.types';\nexport * from './renderRadio';\nexport * from './useRadio';\nexport * from './useRadioStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/Radio/renderRadio.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderRadio_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of Radio
+ */
+
+
+const renderRadio_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.input, { ...slotProps.input
+  }), React.createElement(slots.indicator, { ...slotProps.indicator
+  }), slots.label && React.createElement(slots.label, { ...slotProps.label
+  }));
+};
+
+exports.renderRadio_unstable = renderRadio_unstable;
+//# sourceMappingURL=renderRadio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Radio/renderRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,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,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHlB,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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-commonjs/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;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadio_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+
+const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const RadioGroupContext_1 = /*#__PURE__*/require("../../contexts/RadioGroupContext");
+/**
+ * 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
+ */
+
+
+const useRadio_unstable = (props, ref) => {
+  const group = React.useContext(RadioGroupContext_1.RadioGroupContext);
+  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 === 'horizontalStacked' ? 'below' : 'after',
+    disabled = group.disabled,
+    required
+  } = props;
+  const nativeProps = react_utilities_1.getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked']
+  });
+  const root = react_utilities_1.resolveShorthand(props.root, {
+    required: true,
+    defaultProps: nativeProps.root
+  });
+  const input = react_utilities_1.resolveShorthand(props.input, {
+    required: true,
+    defaultProps: {
+      ref,
+      type: 'radio',
+      id: react_utilities_1.useId('radio-', nativeProps.primary.id),
+      name,
+      checked,
+      defaultChecked,
+      disabled,
+      ...nativeProps.primary
+    }
+  });
+  const label = react_utilities_1.resolveShorthand(props.label, {
+    defaultProps: {
+      htmlFor: input.id,
+      disabled,
+      required
+    }
+  });
+  const indicator = react_utilities_1.resolveShorthand(props.indicator, {
+    required: true,
+    defaultProps: {
+      'aria-hidden': true,
+      children: React.createElement(react_icons_1.CircleFilled, null)
+    }
+  });
+  return {
+    labelPosition,
+    components: {
+      root: 'span',
+      input: 'input',
+      label: react_label_1.Label,
+      indicator: 'div'
+    },
+    root,
+    input,
+    label,
+    indicator
+  };
+};
+
+exports.useRadio_unstable = useRadio_unstable;
+//# sourceMappingURL=useRadio.js.map

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

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

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

@@ -0,0 +1,6 @@
+import type { RadioState } from './Radio.types';
+export declare const radioClassName = "fui-Radio";
+/**
+ * Apply styling to the Radio slots based on the state
+ */
+export declare const useRadioStyles_unstable: (state: RadioState) => void;

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

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadioStyles_unstable = exports.radioClassName = void 0;
+
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+exports.radioClassName = 'fui-Radio';
+const indicatorClassName = 'fui-Radio__indicator';
+const labelClassName = 'fui-Radio__label'; // TODO replace these spacing constants with theme values once they're on the theme
+
+const spacingHorizontalS = '8px';
+const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
+
+const indicatorSize = '16px';
+/**
+ * Styles for the root slot
+ */
+
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "mc9l5x": "ftuwxu6",
+    "qhf8xq": "f10pi13n",
+    "i8kkvl": "f4akndk",
+    "z8tnut": "fp9bwmr",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f150uoa4",
+    "uwmqm3": ["f177v4lu", "f19lj068"]
+  },
+  "vertical": {
+    "Beiy3e4": "f1vx9l62",
+    "Bt984gj": "f122n59",
+    "Belr9w4": "fe5j3v"
+  },
+  "focusIndicator": {
+    "B486eqv": "f2hkw1w",
+    "c2y4jd": "fsofd9k",
+    "B8vm7ur": "f12sql3b",
+    "f4hv8x": "f1i4q40k",
+    "Gpan81": "fcrbge9",
+    "z7afg": "ft464mn",
+    "rsjj6t": "fskqmiq",
+    "Bqsd8kq": "f2gy8jn",
+    "sfhsbh": "f1pke3uf",
+    "Bugh3ej": "f18xdlq9",
+    "hpanx6": "f1114nks",
+    "Bjkpy09": "f1unftzx",
+    "Jxg1p8": "f8rjbh6",
+    "Bc94xmo": ["fxfgh6q", "f8l10fm"],
+    "Bj23z95": ["f8l10fm", "fxfgh6q"]
+  }
+}, {
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fe5j3v{row-gap:12px;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+
+const useInputStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "qhf8xq": "f1euv43f",
+    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
+    "Bhzewxz": "f15twtuk",
+    "a9b677": "fly5x3f",
+    "Bqenvij": "f1l02sjl",
+    "B7ck84d": "f1ewtqcl",
+    "B6of3ja": "f1hu3pq6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "f19f4twv",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "abs64n": "fk73vx1",
+    "By9lhj9": "fg45n87",
+    "Bojc29n": "fhb1dn5",
+    "p8xby4": "fiegpko",
+    "Bmzgt9v": "fdi60kf",
+    "un08vv": ["fz3jc1r", "f1fwo01y"],
+    "Bluxpkm": "f1m2gv5u",
+    "upm9ap": ["f1fwo01y", "fz3jc1r"],
+    "Bv6ccmg": "ft7ju8s",
+    "w6pjei": "f1ofw0le",
+    "drfev3": ["fothmfx", "f13qgzgl"],
+    "ujr3xk": "fp5vmb3",
+    "Bib2mth": ["f13qgzgl", "fothmfx"],
+    "za2ojl": "f1snis2b",
+    "Bu1fve0": "ff9psms",
+    "B42z6en": ["f1fg9ko4", "fqj7xkg"],
+    "mosl6v": "f1vebft2",
+    "e3wlmb": ["fqj7xkg", "f1fg9ko4"],
+    "swj8lc": "f1vtc7ej",
+    "kbzjta": "f1fj62aq",
+    "Bnazurh": ["fc4i2ph", "f137d5x6"],
+    "Enz1qu": "f1v2xs8c",
+    "B4rl0r3": ["f137d5x6", "fc4i2ph"],
+    "oi7lcb": "f14bpgh5",
+    "bwebxt": "f1ariq71",
+    "ax4tcq": ["fu58av6", "f1qj5h2v"],
+    "z2by79": "fptcwjq",
+    "Bpz2hdf": ["f1qj5h2v", "fu58av6"],
+    "Btliz3o": "filss48",
+    "Bre5bwy": "frtrqgn",
+    "Bayw8dt": ["f1v1lrlm", "fapcpph"],
+    "lb5vkw": "f49ptgb",
+    "yhmu5n": ["fapcpph", "f1v1lrlm"],
+    "Blcfbx4": "fgnwcez",
+    "yksgid": "f1l3wt4b",
+    "B78hamy": "fdubm5j",
+    "t61w4e": ["f11to73e", "f9u8p8h"],
+    "Dvncu9": "fw62pkm",
+    "qbflri": ["f9u8p8h", "f11to73e"],
+    "Byzt4r9": "fqaqzd4"
+  }
+}, {
+  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".fg45n87:enabled{cursor:pointer;}", ".fhb1dn5:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".fiegpko:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".fdi60kf:enabled:not(:checked)~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fz3jc1r:enabled:not(:checked)~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1fwo01y:enabled:not(:checked)~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1m2gv5u:enabled:not(:checked)~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".ft7ju8s:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".f1ofw0le:enabled:not(:checked):hover~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".fothmfx:enabled:not(:checked):hover~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13qgzgl:enabled:not(:checked):hover~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fp5vmb3:enabled:not(:checked):hover~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1snis2b:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".ff9psms:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1fg9ko4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqj7xkg:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vebft2:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1vtc7ej:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".f1fj62aq:enabled:checked~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".fc4i2ph:enabled:checked~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f137d5x6:enabled:checked~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f1v2xs8c:enabled:checked~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f14bpgh5:enabled:checked~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1ariq71:enabled:checked:hover~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fu58av6:enabled:checked:hover~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1qj5h2v:enabled:checked:hover~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".fptcwjq:enabled:checked:hover~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".filss48:enabled:checked:hover~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".frtrqgn:enabled:checked:hover:active~.fui-Radio__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f1v1lrlm:enabled:checked:hover:active~.fui-Radio__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fapcpph:enabled:checked:hover:active~.fui-Radio__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f49ptgb:enabled:checked:hover:active~.fui-Radio__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".fgnwcez:enabled:checked:hover:active~.fui-Radio__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1l3wt4b:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);}", ".fdubm5j:disabled~.fui-Radio__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f11to73e:disabled~.fui-Radio__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f9u8p8h:disabled~.fui-Radio__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fw62pkm:disabled~.fui-Radio__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fqaqzd4:disabled~.fui-Radio__indicator{color:var(--colorNeutralForegroundDisabled);}"]
+});
+
+const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "a9b677": "fjw5fx7",
+    "Bqenvij": "fd461yt",
+    "Be2twd7": "f1ugzwwg",
+    "B7ck84d": "f1ewtqcl",
+    "Bnnss6s": "fi64zpg",
+    "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
+    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
+    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
+    "Btl43ni": ["f1s8kh49", "f1djnp8u"],
+    "Bkfmm31": "f1w9h62z",
+    "Bkecrkj": "f1aehjj5"
+  }
+}, {
+  "d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}"]
+});
+
+const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "qb2dma": "f7nlbp4",
+    "famaaq": "f1xqy1su",
+    "B6of3ja": "fjzwpt6",
+    "t21cq0": ["f11qmguv", "f1tyq0we"],
+    "jrapky": "fh6j2fo",
+    "Frg6f3": ["f1tyq0we", "f11qmguv"]
+  },
+  "below": {
+    "fsow6f": "f17mccla"
+  }
+}, {
+  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f17mccla{text-align:center;}"]
+});
+/**
+ * Apply styling to the Radio slots based on the state
+ */
+
+
+const useRadioStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  state.root.className = react_1.mergeClasses(exports.radioClassName, rootStyles.base, rootStyles.focusIndicator, state.labelPosition === 'below' && rootStyles.vertical, state.root.className);
+  const inputStyles = useInputStyles();
+  state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
+  const indicatorStyles = useIndicatorStyles();
+  state.indicator.className = react_1.mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);
+  const labelStyles = useLabelStyles();
+
+  if (state.label) {
+    state.label.className = react_1.mergeClasses(labelClassName, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
+  }
+};
+
+exports.useRadioStyles_unstable = useRadioStyles_unstable;
+//# sourceMappingURL=useRadioStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioState } from './Radio.types';\n\nexport const radioClassName = 'fui-Radio';\nconst indicatorClassName = 'fui-Radio__indicator';\nconst labelClassName = 'fui-Radio__label';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    position: 'relative',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n    alignItems: 'center',\n    rowGap: spacingHorizontalM,\n  },\n\n  focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n\n    ':enabled': {\n      cursor: 'pointer',\n    },\n\n    // When unchecked, hide the circle icon (child of the indicator)\n    [`:not(:checked) ~ .${indicatorClassName} > *`]: {\n      opacity: '0',\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    // Colors for the disabled state\n    ':disabled': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    width: indicatorSize,\n    height: indicatorSize,\n    fontSize: '12px',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n    ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n\n  below: {\n    textAlign: 'center',\n  },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    radioClassName,\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.labelPosition === 'below' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      labelClassName,\n      labelStyles.base,\n      state.labelPosition === 'below' && labelStyles.below,\n      state.label.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,6 @@
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { RadioGroupProps } from './RadioGroup.types';
+/**
+ * A RadioGroup component presents a set of options where only one option can be selected.
+ */
+export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const renderRadioGroup_1 = /*#__PURE__*/require("./renderRadioGroup");
+
+const useRadioGroup_1 = /*#__PURE__*/require("./useRadioGroup");
+
+const useRadioGroupStyles_1 = /*#__PURE__*/require("./useRadioGroupStyles");
+/**
+ * A RadioGroup component presents a set of options where only one option can be selected.
+ */
+
+
+exports.RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useRadioGroup_1.useRadioGroup_unstable(props, ref);
+  useRadioGroupStyles_1.useRadioGroupStyles_unstable(state);
+  return renderRadioGroup_1.renderRadioGroup_unstable(state);
+});
+exports.RadioGroup.displayName = 'RadioGroup';
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","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';\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\n  useRadioGroupStyles_unstable(state);\n  return renderRadioGroup_unstable(state);\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { RadioGroupContextValue } from '../../contexts/RadioGroupContext';
+export declare type RadioGroupSlots = {
+    /**
+     * The radio group root.
+     */
+    root: Slot<'div'>;
+};
+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.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;
+};
+/**
+ * Data for the onChange event for RadioGroup.
+ */
+export declare type RadioGroupOnChangeData = {
+    /**
+     * The value of the newly selected Radio item.
+     */
+    value: string;
+};
+/**
+ * State used in rendering RadioGroup
+ */
+export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & {
+    context: RadioGroupContextValue;
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=RadioGroup.types.js.map