@procore/core-react 12.47.1 → 12.48.0

package/dist/NextTile/NextTile.js

@@ -3,11 +3,14 @@ var _excluded = ["children", "overlay", "onOverlayClick"],
   _excluded2 = ["children"],
   _excluded3 = ["children"],
   _excluded4 = ["children"],
-  _excluded5 = ["orientation", "children"],
+  _excluded5 = ["orientation", "children", "disabled", "tabIndex"],
   _excluded6 = ["orientation", "children"],
   _excluded7 = ["disabled", "checked", "defaultChecked", "orientation", "style", "className"],
-  _excluded8 = ["disabled", "checked", "defaultChecked", "orientation", "style", "className", "groupState"],
-  _excluded9 = ["role"];
+  _excluded8 = ["disabled", "checked", "defaultChecked", "orientation", "style", "className"],
+  _excluded9 = ["disabled", "checked", "defaultChecked", "orientation", "style", "className"],
+  _excluded0 = ["disabled", "checked", "defaultChecked", "orientation", "style", "className", "groupState"],
+  _excluded1 = ["children"],
+  _excluded10 = ["role"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -23,20 +26,29 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import React from 'react';
 import { useToggleState } from 'react-stately';
 import { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroup';
+import { CheckboxGroupTileNavContext, CheckboxGroupTileNavProvider } from '../CheckboxGroup/checkboxGroupTileNavigation';
 import { StyledActions } from '../Content/Content.styles';
-import { StyledFooter, StyledHeroMedia, StyledHeroOverlay, StyledHeroText, StyledInteractableTile, StyledLinkTile, StyledSelectableTile, StyledTileContent } from '../Tile/Tile.styles';
+import { StyledFooter, StyledHeroMedia, StyledHeroOverlay, StyledHeroText, StyledTileContent } from '../Tile/Tile.styles';
 import { addSubcomponents } from '../_utils/addSubcomponents';
 import { mergeRefs } from '../_utils/mergeRefs';
+import { StyledNextInteractableTile, StyledNextLinkTile, StyledNextSelectableTile, StyledNextTileFocusTarget, StyledNextTileInertContent } from './NextTile.styles';
 var heroTextGridTemplateColumns = 'auto 1fr';
+function NextTileInertContent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(StyledNextTileInertContent, {
+    inert: true
+  }, children);
+}
 var TileContext = /*#__PURE__*/React.createContext({
   orientation: 'portrait'
 });
-var HeroMedia = /*#__PURE__*/React.forwardRef(function HeroMedia(_ref, ref) {
-  var children = _ref.children,
-    _ref$overlay = _ref.overlay,
-    overlay = _ref$overlay === void 0 ? false : _ref$overlay,
-    onOverlayClick = _ref.onOverlayClick,
-    props = _objectWithoutProperties(_ref, _excluded);
+var NextTileRadioGroupInputContext = /*#__PURE__*/React.createContext(null);
+var HeroMedia = /*#__PURE__*/React.forwardRef(function HeroMedia(_ref2, ref) {
+  var children = _ref2.children,
+    _ref2$overlay = _ref2.overlay,
+    overlay = _ref2$overlay === void 0 ? false : _ref2$overlay,
+    onOverlayClick = _ref2.onOverlayClick,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useContext = React.useContext(TileContext),
     orientation = _React$useContext.orientation;
   var heroRef = React.useRef(null);
@@ -53,9 +65,9 @@ var HeroMedia = /*#__PURE__*/React.forwardRef(function HeroMedia(_ref, ref) {
     onClick: onOverlayClick
   }), children);
 });
-var HeroText = /*#__PURE__*/React.forwardRef(function HeroText(_ref2, ref) {
-  var children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded2);
+var HeroText = /*#__PURE__*/React.forwardRef(function HeroText(_ref3, ref) {
+  var children = _ref3.children,
+    props = _objectWithoutProperties(_ref3, _excluded2);
   var _React$useContext2 = React.useContext(TileContext),
     orientation = _React$useContext2.orientation;
   var heroRef = React.useRef(null);
@@ -75,38 +87,44 @@ var Content = /*#__PURE__*/React.forwardRef(function Content(props, ref) {
     ref: ref
   }, props));
 });
-var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref3, ref) {
-  var children = _ref3.children,
-    props = _objectWithoutProperties(_ref3, _excluded3);
+var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref4, ref) {
+  var children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded3);
   return /*#__PURE__*/React.createElement(StyledFooter, _extends({
     ref: ref
   }, props), children);
 });
-var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref4, ref) {
-  var children = _ref4.children,
-    props = _objectWithoutProperties(_ref4, _excluded4);
+var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref5, ref) {
+  var children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded4);
   return /*#__PURE__*/React.createElement(StyledActions, _extends({
     ref: ref
   }, props), children);
 });
-export var InteractableTile = /*#__PURE__*/React.forwardRef(function InteractableTile(_ref5, ref) {
-  var orientation = _ref5.orientation,
-    children = _ref5.children,
-    props = _objectWithoutProperties(_ref5, _excluded5);
-  return /*#__PURE__*/React.createElement(StyledInteractableTile, _extends({
+export var InteractableTile = /*#__PURE__*/React.forwardRef(function InteractableTile(_ref6, ref) {
+  var orientation = _ref6.orientation,
+    children = _ref6.children,
+    _ref6$disabled = _ref6.disabled,
+    disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+    tabIndex = _ref6.tabIndex,
+    props = _objectWithoutProperties(_ref6, _excluded5);
+  return /*#__PURE__*/React.createElement(StyledNextInteractableTile, _extends({}, props, {
     ref: ref,
-    $orientation: orientation
-  }, props), /*#__PURE__*/React.createElement(TileContext.Provider, {
+    $disabled: disabled,
+    $orientation: orientation,
+    "aria-disabled": disabled || undefined,
+    tabIndex: disabled ? -1 : tabIndex
+  }), /*#__PURE__*/React.createElement(TileContext.Provider, {
     value: {
       orientation: orientation
     }
-  }, children));
+  }, disabled ? /*#__PURE__*/React.createElement(NextTileInertContent, null, children) : children));
 });
-export var LinkTile = /*#__PURE__*/React.forwardRef(function LinkTile(_ref6, ref) {
-  var orientation = _ref6.orientation,
-    children = _ref6.children,
-    props = _objectWithoutProperties(_ref6, _excluded6);
-  return /*#__PURE__*/React.createElement(StyledLinkTile, _extends({
+export var LinkTile = /*#__PURE__*/React.forwardRef(function LinkTile(_ref7, ref) {
+  var orientation = _ref7.orientation,
+    children = _ref7.children,
+    props = _objectWithoutProperties(_ref7, _excluded6);
+  return /*#__PURE__*/React.createElement(StyledNextLinkTile, _extends({
     ref: ref,
     $orientation: orientation
   }, props), /*#__PURE__*/React.createElement(TileContext.Provider, {
@@ -117,42 +135,70 @@ export var LinkTile = /*#__PURE__*/React.forwardRef(function LinkTile(_ref6, ref
 });
 
 // Shared render component
-var CheckboxTileRender = function CheckboxTileRender(_ref7) {
-  var inputProps = _ref7.inputProps,
-    focusProps = _ref7.focusProps,
-    inputRef = _ref7.inputRef,
-    forwardedRef = _ref7.forwardedRef,
-    isDisabled = _ref7.isDisabled,
-    isSelected = _ref7.isSelected,
-    isFocusVisible = _ref7.isFocusVisible,
-    orientation = _ref7.orientation,
-    className = _ref7.className,
-    style = _ref7.style,
-    role = _ref7.role,
-    ariaLabelledby = _ref7['aria-labelledby'],
-    children = _ref7.children;
+var CheckboxTileRender = function CheckboxTileRender(_ref8) {
+  var inputProps = _ref8.inputProps,
+    focusProps = _ref8.focusProps,
+    inputRef = _ref8.inputRef,
+    forwardedRef = _ref8.forwardedRef,
+    isDisabled = _ref8.isDisabled,
+    isSelected = _ref8.isSelected,
+    orientation = _ref8.orientation,
+    className = _ref8.className,
+    style = _ref8.style,
+    tileSelectableRole = _ref8.tileSelectableRole,
+    ariaLabelledby = _ref8['aria-labelledby'],
+    children = _ref8.children,
+    checkboxGroupTileNav = _ref8.checkboxGroupTileNav,
+    tileValue = _ref8.tileValue;
   var fallbackId = useId();
-  return /*#__PURE__*/React.createElement(StyledSelectableTile, {
+  var ariaRole = tileSelectableRole === 'radiobutton' ? 'radio' : tileSelectableRole !== null && tileSelectableRole !== void 0 ? tileSelectableRole : 'checkbox';
+  var tabIndexForFocusTarget;
+  if (isDisabled) {
+    tabIndexForFocusTarget = -1;
+  } else if (checkboxGroupTileNav != null && tileValue != null) {
+    tabIndexForFocusTarget = checkboxGroupTileNav.getTabIndex(tileValue);
+  } else {
+    tabIndexForFocusTarget = 0;
+  }
+  var registerTileRefFromGroup = checkboxGroupTileNav === null || checkboxGroupTileNav === void 0 ? void 0 : checkboxGroupTileNav.registerTileRef;
+  var focusTargetRef = React.useCallback(function (element) {
+    if (registerTileRefFromGroup && tileValue != null) {
+      registerTileRefFromGroup(tileValue, element);
+    }
+  }, [registerTileRefFromGroup, tileValue]);
+  return /*#__PURE__*/React.createElement(StyledNextSelectableTile, {
     $disabled: isDisabled,
     $selected: isSelected,
-    $focused: isFocusVisible,
+    $role: tileSelectableRole === 'radiobutton' ? 'radiobutton' : 'checkbox',
     $orientation: orientation !== null && orientation !== void 0 ? orientation : 'portrait',
     $layoutless: true,
     className: className,
     style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    role: role !== null && role !== void 0 ? role : 'checkbox',
+  }, /*#__PURE__*/React.createElement(StyledNextTileFocusTarget, {
+    role: ariaRole,
     "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : fallbackId,
     "aria-checked": isSelected,
     "aria-disabled": isDisabled,
-    tabIndex: isDisabled ? -1 : 0,
+    tabIndex: tabIndexForFocusTarget,
+    ref: registerTileRefFromGroup != null && tileValue != null ? focusTargetRef : undefined,
     onClick: function onClick() {
       if (!isDisabled) {
         var _inputRef$current;
         (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
       }
     },
+    onFocus: function onFocus() {
+      if (checkboxGroupTileNav && tileValue != null) {
+        checkboxGroupTileNav.onTileFocus(tileValue);
+      }
+    },
     onKeyDown: function onKeyDown(e) {
+      if (checkboxGroupTileNav && tileValue != null && !isDisabled) {
+        checkboxGroupTileNav.onTileKeyDown(tileValue, e);
+        if (e.defaultPrevented) {
+          return;
+        }
+      }
       if (e.code === 'Space' || e.code === 'Enter') {
         e.preventDefault();
         if (!isDisabled) {
@@ -161,26 +207,83 @@ var CheckboxTileRender = function CheckboxTileRender(_ref7) {
         }
       }
     }
-  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({}, mergeProps(inputProps, focusProps, {
+    'aria-hidden': true
+  }), {
     ref: mergeRefs(inputRef, forwardedRef),
     tabIndex: -1
   }))), /*#__PURE__*/React.createElement(TileContext.Provider, {
     value: {
       orientation: orientation !== null && orientation !== void 0 ? orientation : 'portrait'
     }
-  }, children)));
+  }, /*#__PURE__*/React.createElement("div", {
+    id: fallbackId,
+    style: {
+      display: 'contents'
+    }
+  }, isDisabled ? /*#__PURE__*/React.createElement(NextTileInertContent, null, children) : children))));
 };
+var SingleRadioButtonTile = /*#__PURE__*/React.forwardRef(function SingleRadioButtonTile(_ref9, ref) {
+  var _radioGroupInput$name;
+  var _ref9$disabled = _ref9.disabled,
+    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
+    checked = _ref9.checked,
+    defaultChecked = _ref9.defaultChecked,
+    orientation = _ref9.orientation,
+    style = _ref9.style,
+    className = _ref9.className,
+    props_ = _objectWithoutProperties(_ref9, _excluded7);
+  var props = _objectSpread(_objectSpread({}, props_), {}, {
+    isDisabled: disabled,
+    isSelected: checked,
+    defaultSelected: defaultChecked
+  });
+  var inputRef = React.useRef(null);
+  var state = useToggleState(props);
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps;
+  var radioTileNavContext = React.useContext(CheckboxGroupTileNavContext);
+  var radioGroupInput = React.useContext(NextTileRadioGroupInputContext);
+  var fallbackRadioName = useId();
+  var radioName = (_radioGroupInput$name = radioGroupInput === null || radioGroupInput === void 0 ? void 0 : radioGroupInput.name) !== null && _radioGroupInput$name !== void 0 ? _radioGroupInput$name : fallbackRadioName;
+  var inputProps = {
+    type: 'radio',
+    name: radioName,
+    value: props.value,
+    checked: state.isSelected,
+    onChange: function onChange(e) {
+      if (e.target.checked) {
+        state.setSelected(true);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(CheckboxTileRender, {
+    inputProps: inputProps,
+    focusProps: focusProps,
+    inputRef: inputRef,
+    forwardedRef: ref,
+    isDisabled: disabled,
+    isSelected: state.isSelected,
+    orientation: orientation,
+    className: className,
+    style: style,
+    tileSelectableRole: "radiobutton",
+    "aria-labelledby": props['aria-labelledby'],
+    checkboxGroupTileNav: radioTileNavContext,
+    tileValue: props.value
+  }, props.children);
+});
 
-// Single checkbox implementation
-var SingleCheckboxTile = /*#__PURE__*/React.forwardRef(function SingleCheckboxTile(_ref8, ref) {
-  var _ref8$disabled = _ref8.disabled,
-    disabled = _ref8$disabled === void 0 ? false : _ref8$disabled,
-    checked = _ref8.checked,
-    defaultChecked = _ref8.defaultChecked,
-    orientation = _ref8.orientation,
-    style = _ref8.style,
-    className = _ref8.className,
-    props_ = _objectWithoutProperties(_ref8, _excluded7);
+// Single checkbox implementation (hooks live here; not used for `role="radiobutton"`)
+var SingleCheckboxTileInner = /*#__PURE__*/React.forwardRef(function SingleCheckboxTileInner(_ref0, ref) {
+  var _ref0$disabled = _ref0.disabled,
+    disabled = _ref0$disabled === void 0 ? false : _ref0$disabled,
+    checked = _ref0.checked,
+    defaultChecked = _ref0.defaultChecked,
+    orientation = _ref0.orientation,
+    style = _ref0.style,
+    className = _ref0.className,
+    props_ = _objectWithoutProperties(_ref0, _excluded8);
   var props = _objectSpread(_objectSpread({}, props_), {}, {
     isDisabled: disabled,
     isSelected: checked,
@@ -190,9 +293,9 @@ var SingleCheckboxTile = /*#__PURE__*/React.forwardRef(function SingleCheckboxTi
   var state = useToggleState(props);
   var _useCheckbox = useCheckbox(props, state, inputRef),
     inputProps = _useCheckbox.inputProps;
-  var _useFocusRing = useFocusRing(),
-    focusProps = _useFocusRing.focusProps,
-    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useFocusRing2 = useFocusRing(),
+    focusProps = _useFocusRing2.focusProps;
+  var tileNav = React.useContext(CheckboxGroupTileNavContext);
   return /*#__PURE__*/React.createElement(CheckboxTileRender, {
     inputProps: inputProps,
     focusProps: focusProps,
@@ -200,26 +303,58 @@ var SingleCheckboxTile = /*#__PURE__*/React.forwardRef(function SingleCheckboxTi
     forwardedRef: ref,
     isDisabled: disabled,
     isSelected: state.isSelected,
-    isFocusVisible: isFocusVisible,
     orientation: orientation,
     className: className,
     style: style,
-    role: props.role,
-    "aria-labelledby": props['aria-labelledby']
+    tileSelectableRole: props.role,
+    "aria-labelledby": props['aria-labelledby'],
+    checkboxGroupTileNav: tileNav,
+    tileValue: props.value
   }, props.children);
 });
+var SingleCheckboxTile = /*#__PURE__*/React.forwardRef(function SingleCheckboxTile(_ref1, ref) {
+  var _ref1$disabled = _ref1.disabled,
+    disabled = _ref1$disabled === void 0 ? false : _ref1$disabled,
+    checked = _ref1.checked,
+    defaultChecked = _ref1.defaultChecked,
+    orientation = _ref1.orientation,
+    style = _ref1.style,
+    className = _ref1.className,
+    props_ = _objectWithoutProperties(_ref1, _excluded9);
+  if (props_.role === 'radiobutton') {
+    return /*#__PURE__*/React.createElement(SingleRadioButtonTile, _extends({
+      ref: ref
+    }, props_, {
+      disabled: disabled,
+      checked: checked,
+      defaultChecked: defaultChecked,
+      orientation: orientation,
+      style: style,
+      className: className
+    }));
+  }
+  return /*#__PURE__*/React.createElement(SingleCheckboxTileInner, _extends({
+    ref: ref,
+    disabled: disabled,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    orientation: orientation,
+    style: style,
+    className: className
+  }, props_));
+});
 
 // Group checkbox implementation
-var GroupCheckboxTile = /*#__PURE__*/React.forwardRef(function GroupCheckboxTile(_ref9, ref) {
-  var _ref9$disabled = _ref9.disabled,
-    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
-    checked = _ref9.checked,
-    defaultChecked = _ref9.defaultChecked,
-    orientation = _ref9.orientation,
-    style = _ref9.style,
-    className = _ref9.className,
-    groupState = _ref9.groupState,
-    props_ = _objectWithoutProperties(_ref9, _excluded8);
+var GroupCheckboxTile = /*#__PURE__*/React.forwardRef(function GroupCheckboxTile(_ref10, ref) {
+  var _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    checked = _ref10.checked,
+    defaultChecked = _ref10.defaultChecked,
+    orientation = _ref10.orientation,
+    style = _ref10.style,
+    className = _ref10.className,
+    groupState = _ref10.groupState,
+    props_ = _objectWithoutProperties(_ref10, _excluded0);
   var props = _objectSpread(_objectSpread({}, props_), {}, {
     isDisabled: disabled,
     isSelected: checked,
@@ -228,11 +363,11 @@ var GroupCheckboxTile = /*#__PURE__*/React.forwardRef(function GroupCheckboxTile
   var inputRef = React.useRef(null);
   var _useCheckboxGroupItem = useCheckboxGroupItem(props, groupState, inputRef),
     inputProps = _useCheckboxGroupItem.inputProps;
-  var _useFocusRing2 = useFocusRing(),
-    focusProps = _useFocusRing2.focusProps,
-    isFocusVisible = _useFocusRing2.isFocusVisible;
+  var _useFocusRing3 = useFocusRing(),
+    focusProps = _useFocusRing3.focusProps;
   var isDisabled = groupState.isDisabled || disabled;
   var isSelected = groupState.isSelected(props.value);
+  var tileNav = React.useContext(CheckboxGroupTileNavContext);
   return /*#__PURE__*/React.createElement(CheckboxTileRender, {
     inputProps: inputProps,
     focusProps: focusProps,
@@ -240,12 +375,13 @@ var GroupCheckboxTile = /*#__PURE__*/React.forwardRef(function GroupCheckboxTile
     forwardedRef: ref,
     isDisabled: isDisabled,
     isSelected: isSelected,
-    isFocusVisible: isFocusVisible,
     orientation: orientation,
     className: className,
     style: style,
-    role: props.role,
-    "aria-labelledby": props['aria-labelledby']
+    tileSelectableRole: props.role,
+    "aria-labelledby": props['aria-labelledby'],
+    checkboxGroupTileNav: tileNav,
+    tileValue: props.value
   }, props.children);
 });
 
@@ -262,10 +398,46 @@ var CheckboxTile_ = /*#__PURE__*/React.forwardRef(function CheckboxTile(props, r
     ref: ref
   }));
 });
-function TileInner(_ref0, ref) {
-  var _ref0$role = _ref0.role,
-    role = _ref0$role === void 0 ? 'none' : _ref0$role,
-    props = _objectWithoutProperties(_ref0, _excluded9);
+var RadioButtonTile_ = /*#__PURE__*/React.forwardRef(function RadioButtonTile(props, ref) {
+  // `role` is NextTile’s API discriminant; the focus target uses ARIA `radio`.
+  // eslint-disable-next-line jsx-a11y/aria-role -- not a DOM role string; see CheckboxTileRender
+  return /*#__PURE__*/React.createElement(CheckboxTile_, _extends({}, props, {
+    ref: ref,
+    role: "radiobutton"
+  }));
+});
+
+/**
+ * Wrap sibling {@link NextTile} `role="radiobutton"` tiles to enable the same
+ * roving focus and arrow / Tab keyboard navigation as {@link CheckboxGroup}
+ * (without checkbox-group selection state). Use with a single shared `value` in
+ * the parent for a proper radio pattern. Arrow-key navigation follows a grid
+ * derived from the radiogroup width and tile layout (same approach as
+ * `ThumbnailGrid`).
+ *
+ * @since 12.42.0
+ */
+export var NextTileRadioGroup = /*#__PURE__*/React.forwardRef(function NextTileRadioGroup(_ref11, ref) {
+  var children = _ref11.children,
+    htmlProps = _objectWithoutProperties(_ref11, _excluded1);
+  var name = useId();
+  var tileNavContainerRef = React.useRef(null);
+  return /*#__PURE__*/React.createElement(CheckboxGroupTileNavProvider, {
+    containerRef: tileNavContainerRef
+  }, /*#__PURE__*/React.createElement(NextTileRadioGroupInputContext.Provider, {
+    value: {
+      name: name
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: mergeRefs(ref, tileNavContainerRef)
+  }, htmlProps, {
+    role: "radiogroup"
+  }), children)));
+});
+function TileInner(_ref12, ref) {
+  var _ref12$role = _ref12.role,
+    role = _ref12$role === void 0 ? 'none' : _ref12$role,
+    props = _objectWithoutProperties(_ref12, _excluded10);
   switch (role) {
     case 'none':
       return /*#__PURE__*/React.createElement(InteractableTile, _extends({
@@ -279,6 +451,10 @@ function TileInner(_ref0, ref) {
       return /*#__PURE__*/React.createElement(CheckboxTile_, _extends({
         ref: ref
       }, props));
+    case 'radiobutton':
+      return /*#__PURE__*/React.createElement(RadioButtonTile_, _extends({
+        ref: ref
+      }, props));
     default:
       return null;
   }
@@ -302,6 +478,14 @@ var Tile_ = /*#__PURE__*/React.forwardRef(TileInner);
  * </CheckboxGroup>
  * ```
  *
+ * Standalone radio tiles (same keyboard navigation as checkbox group):
+ * ```
+ * <NextTile.RadioGroup>
+ *   <NextTile role="radiobutton" value="a" checked={v === 'a'} onChange={...} />
+ *   <NextTile role="radiobutton" value="b" checked={v === 'b'} onChange={...} />
+ * </NextTile.RadioGroup>
+ * ```
+ *
  * @since 11.6.0
  */
 export var NextTile = addSubcomponents({
@@ -309,6 +493,7 @@ export var NextTile = addSubcomponents({
   Content: Content,
   Footer: Footer,
   HeroText: HeroText,
-  HeroMedia: HeroMedia
+  HeroMedia: HeroMedia,
+  RadioGroup: NextTileRadioGroup
 }, Tile_);
 //# sourceMappingURL=NextTile.js.map