@fluentui/react-radio 9.0.0-rc.2 → 9.0.0-rc.5

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

@@ -3,28 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRadioStyles_unstable = exports.radioClassNames = exports.radioClassName = void 0;
+exports.useRadioStyles_unstable = exports.radioClassNames = void 0;
 
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
-/**
- * @deprecated Use `radioClassNames.root` instead.
- */
 
-
-exports.radioClassName = 'fui-Radio';
 exports.radioClassNames = {
   root: 'fui-Radio',
   indicator: 'fui-Radio__indicator',
   input: 'fui-Radio__input',
   label: 'fui-Radio__label'
-}; // TODO replace these spacing constants with theme values once they're on the theme
-
-const spacingHorizontalS = '8px';
-const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
+}; // The indicator size is used by the indicator and label styles
 
 const indicatorSize = '16px';
 /**
@@ -35,19 +27,17 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "mc9l5x": "ftuwxu6",
     "qhf8xq": "f10pi13n",
-    "i8kkvl": "f4akndk",
-    "z8tnut": "fp9bwmr",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f150uoa4",
-    "uwmqm3": ["f177v4lu", "f19lj068"]
+    "z8tnut": "f1kwiid1",
+    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
+    "Byoj8tv": "f5b47ha",
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
   },
   "vertical": {
     "Beiy3e4": "f1vx9l62",
-    "Bt984gj": "f122n59",
-    "Belr9w4": "fe5j3v"
+    "Bt984gj": "f122n59"
   },
   "focusIndicator": {
-    "B486eqv": "f2hkw1w",
+    "Brovlpu": "ftqa4ok",
     "vchsgm": "fbiesyy",
     "ozrjjd": ["fq2kn9", "f1jxwnad"],
     "B7lelfh": "f1il7mou",
@@ -78,8 +68,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "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] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".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;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
+  "f": [".ftqa4ok:focus{outline-style:none;}"]
 });
 
 const useInputStyles = /*#__PURE__*/react_1.__styles({
@@ -173,17 +163,19 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "qb2dma": "f7nlbp4",
-    "famaaq": "f1xqy1su",
+    "famaaq": "f1xqy1su"
+  },
+  "after": {
+    "Frg6f3": ["f199hnxi", "fkujibs"],
     "B6of3ja": "fjzwpt6",
-    "t21cq0": ["f11qmguv", "f1tyq0we"],
-    "jrapky": "fh6j2fo",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"]
+    "jrapky": "fh6j2fo"
   },
   "below": {
+    "B6of3ja": "f1mevb6",
     "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;}"]
+  "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;}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1mevb6{margin-top:var(--spacingVerticalM);}", ".f17mccla{text-align:center;}"]
 });
 /**
  * Apply styling to the Radio slots based on the state
@@ -200,7 +192,7 @@ const useRadioStyles_unstable = state => {
   const labelStyles = useLabelStyles();
 
   if (state.label) {
-    state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
+    state.label.className = react_1.mergeClasses(exports.radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
   }
 };
 

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

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

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

@@ -3,15 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRadioGroupStyles_unstable = exports.radioGroupClassNames = exports.radioGroupClassName = void 0;
+exports.useRadioGroupStyles_unstable = exports.radioGroupClassNames = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
-/**
- * @deprecated Use `radioGroupClassNames.root` instead.
- */
-
 
-exports.radioGroupClassName = 'fui-RadioGroup';
 exports.radioGroupClassNames = {
   root: 'fui-RadioGroup'
 };

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

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

package/lib-commonjs/contexts/RadioGroupContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RadioGroupContext = void 0;
+exports.useRadioGroupContext_unstable = exports.RadioGroupProvider = exports.RadioGroupContext = void 0;
 
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 /**
@@ -12,4 +12,9 @@ const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-s
 
 
 exports.RadioGroupContext = /*#__PURE__*/react_context_selector_1.createContext({});
+exports.RadioGroupProvider = exports.RadioGroupContext.Provider;
+
+const useRadioGroupContext_unstable = selector => react_context_selector_1.useContextSelector(exports.RadioGroupContext, selector);
+
+exports.useRadioGroupContext_unstable = useRadioGroupContext_unstable;
 //# sourceMappingURL=RadioGroupContext.js.map

package/lib-commonjs/contexts/RadioGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,gBAAqD,wBAAA,CAAA,aAAA,CAAc,EAAd,CAArD","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\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: Context<RadioGroupContextValue> = createContext({});\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/RadioGroupContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,iBAAA,gBAAqD,wBAAA,CAAA,aAAA,CAAc,EAAd,CAArD;AAEA,OAAA,CAAA,kBAAA,GAAqB,OAAA,CAAA,iBAAA,CAAkB,QAAvC;;AAEN,MAAM,6BAA6B,GAAO,QAAJ,IAC3C,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,iBAAnB,EAAsC,QAAtC,CADK;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\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: Context<RadioGroupContextValue> = createContext({});\n\nexport const RadioGroupProvider = RadioGroupContext.Provider;\n\nexport const useRadioGroupContext_unstable = <T>(selector: ContextSelector<RadioGroupContextValue, T>): T =>\n  useContextSelector(RadioGroupContext, selector);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRadioGroupContextValues = exports.RadioGroupContext = exports.useRadio_unstable = exports.useRadioStyles_unstable = exports.renderRadio_unstable = exports.radioClassNames = exports.radioClassName = exports.Radio = exports.useRadioGroup_unstable = exports.useRadioGroupStyles_unstable = exports.renderRadioGroup_unstable = exports.radioGroupClassNames = exports.radioGroupClassName = exports.RadioGroup = void 0;
+exports.useRadioGroupContext_unstable = exports.useRadioGroupContextValues = exports.RadioGroupProvider = exports.useRadio_unstable = exports.useRadioStyles_unstable = exports.renderRadio_unstable = exports.radioClassNames = exports.Radio = exports.useRadioGroup_unstable = exports.useRadioGroupStyles_unstable = exports.renderRadioGroup_unstable = exports.radioGroupClassNames = exports.RadioGroup = void 0;
 
 var RadioGroup_1 = /*#__PURE__*/require("./RadioGroup");
 
@@ -13,14 +13,6 @@ Object.defineProperty(exports, "RadioGroup", {
     return RadioGroup_1.RadioGroup;
   }
 });
-/* eslint-disable-next-line deprecation/deprecation */
-
-Object.defineProperty(exports, "radioGroupClassName", {
-  enumerable: true,
-  get: function () {
-    return RadioGroup_1.radioGroupClassName;
-  }
-});
 Object.defineProperty(exports, "radioGroupClassNames", {
   enumerable: true,
   get: function () {
@@ -54,14 +46,6 @@ Object.defineProperty(exports, "Radio", {
     return Radio_1.Radio;
   }
 });
-/* eslint-disable-next-line deprecation/deprecation */
-
-Object.defineProperty(exports, "radioClassName", {
-  enumerable: true,
-  get: function () {
-    return Radio_1.radioClassName;
-  }
-});
 Object.defineProperty(exports, "radioClassNames", {
   enumerable: true,
   get: function () {
@@ -89,10 +73,10 @@ Object.defineProperty(exports, "useRadio_unstable", {
 
 var index_1 = /*#__PURE__*/require("./contexts/index");
 
-Object.defineProperty(exports, "RadioGroupContext", {
+Object.defineProperty(exports, "RadioGroupProvider", {
   enumerable: true,
   get: function () {
-    return index_1.RadioGroupContext;
+    return index_1.RadioGroupProvider;
   }
 });
 Object.defineProperty(exports, "useRadioGroupContextValues", {
@@ -101,4 +85,10 @@ Object.defineProperty(exports, "useRadioGroupContextValues", {
     return index_1.useRadioGroupContextValues;
   }
 });
+Object.defineProperty(exports, "useRadioGroupContext_unstable", {
+  enumerable: true,
+  get: function () {
+    return index_1.useRadioGroupContext_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n  RadioGroup,\n  /* eslint-disable-next-line deprecation/deprecation */\n  radioGroupClassName,\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 {\n  Radio,\n  /* eslint-disable-next-line deprecation/deprecation */\n  radioClassName,\n  radioClassNames,\n  renderRadio_unstable,\n  useRadioStyles_unstable,\n  useRadio_unstable,\n} from './Radio';\nexport type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';\nexport { RadioGroupContext, useRadioGroupContextValues } from './contexts/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;;AAUF,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;;AAEhF,IAAA,OAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AAA4B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA","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 { RadioGroupProvider, useRadioGroupContextValues, useRadioGroupContext_unstable } from './contexts/index';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-radio",
-  "version": "9.0.0-rc.2",
+  "version": "9.0.0-rc.5",
   "description": "Fluent UI Radio component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -28,16 +28,16 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.5"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.7"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "9.0.0-rc.8",
+    "@fluentui/react-context-selector": "9.0.0-rc.9",
     "@fluentui/react-icons": "^2.0.166-rc.3",
-    "@fluentui/react-label": "9.0.0-beta.12",
-    "@fluentui/react-tabster": "9.0.0-rc.9",
-    "@fluentui/react-theme": "9.0.0-rc.7",
-    "@fluentui/react-utilities": "9.0.0-rc.8",
-    "@griffel/react": "1.0.3",
+    "@fluentui/react-label": "9.0.0-rc.4",
+    "@fluentui/react-tabster": "9.0.0-rc.12",
+    "@fluentui/react-theme": "9.0.0-rc.9",
+    "@fluentui/react-utilities": "9.0.0-rc.9",
+    "@griffel/react": "1.0.5",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib/Radio.d.ts

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

package/lib/RadioGroup.d.ts

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

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

@@ -1,6 +0,0 @@
-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.types.d.ts

@@ -1,69 +0,0 @@
-import * as React from 'react';
-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'>, '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.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
-};
-/**
- * Data for the onChange event for Radio.
- */
-export declare type RadioOnChangeData = {
-    /**
-     * The value prop of this Radio item.
-     */
-    value: string;
-};
-/**
- * State used in rendering Radio
- */
-export declare type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;

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

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

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

@@ -1,5 +0,0 @@
-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/useRadio.d.ts

@@ -1,12 +0,0 @@
-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/components/Radio/useRadioStyles.d.ts

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

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

@@ -1,6 +0,0 @@
-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/components/RadioGroup/RadioGroup.types.d.ts

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-export declare type RadioGroupSlots = {
-    /**
-     * The radio group root.
-     */
-    root: NonNullable<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.
-     *
-     * @default vertical
-     */
-    layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
-    /**
-     * Disable all Radio items in this group.
-     */
-    disabled?: boolean;
-    /**
-     * Require all Radio items in this group.
-     */
-    required?: 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'>> & Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;
-export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
-export declare type RadioGroupContextValues = {
-    radioGroup: RadioGroupContextValue;
-};

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

@@ -1,5 +0,0 @@
-export * from './RadioGroup';
-export * from './RadioGroup.types';
-export * from './renderRadioGroup';
-export * from './useRadioGroup';
-export * from './useRadioGroupStyles';

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

@@ -1,5 +0,0 @@
-import { RadioGroupContextValues, RadioGroupState } from './RadioGroup.types';
-/**
- * Render the final JSX of RadioGroup
- */
-export declare const renderRadioGroup_unstable: (state: RadioGroupState, contextValues: RadioGroupContextValues) => JSX.Element;

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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { RadioGroupProps, RadioGroupState } from './RadioGroup.types';
-/**
- * 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.Ref<HTMLDivElement>) => RadioGroupState;

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

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

package/lib/contexts/RadioGroupContext.d.ts

@@ -1,6 +0,0 @@
-import type { Context } from '@fluentui/react-context-selector';
-import type { RadioGroupContextValue } from '../RadioGroup';
-/**
- * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
- */
-export declare const RadioGroupContext: Context<RadioGroupContextValue>;

package/lib/contexts/index.d.ts

@@ -1,2 +0,0 @@
-export * from './RadioGroupContext';
-export * from './useRadioGroupContextValues';

package/lib/contexts/useRadioGroupContextValues.d.ts

@@ -1,2 +0,0 @@
-import type { RadioGroupContextValues, RadioGroupState } from '../RadioGroup';
-export declare const useRadioGroupContextValues: (state: RadioGroupState) => RadioGroupContextValues;

package/lib/index.d.ts

@@ -1,5 +0,0 @@
-export { RadioGroup, radioGroupClassName, radioGroupClassNames, renderRadioGroup_unstable, useRadioGroupStyles_unstable, useRadioGroup_unstable, } from './RadioGroup';
-export type { RadioGroupContextValue, RadioGroupContextValues, RadioGroupOnChangeData, RadioGroupProps, RadioGroupSlots, RadioGroupState, } from './RadioGroup';
-export { Radio, radioClassName, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable, } from './Radio';
-export type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio';
-export { RadioGroupContext, useRadioGroupContextValues } from './contexts/index';

package/lib-commonjs/Radio.d.ts

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

package/lib-commonjs/RadioGroup.d.ts

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

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

@@ -1,6 +0,0 @@
-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>;