@canonical/react-components 4.5.4 → 4.6.1

package/dist/components/RadioInput/RadioInput.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Required = exports.Inline = exports.Disabled = exports.Default = exports.Children = void 0;
+exports.default = exports.Success = exports.Required = exports.Inline = exports.Help = exports.Error = exports.Disabled = exports.Default = exports.Children = exports.Caution = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _RadioInput = _interopRequireDefault(require("./RadioInput"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -48,6 +48,13 @@ const Default = exports.Default = {
   }),
   name: "Default"
 };
+const Caution = exports.Caution = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Caution",
+    caution: "This is a caution message"
+  }),
+  name: "Caution"
+};
 const Children = exports.Children = {
   render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
     label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "I agree to", /*#__PURE__*/_react.default.createElement("a", {
@@ -65,6 +72,27 @@ const Disabled = exports.Disabled = {
   }),
   name: "Disabled"
 };
+const Error = exports.Error = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Error",
+    error: "This is an error message"
+  }),
+  name: "Error"
+};
+const Help = exports.Help = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    label: "Help",
+    help: "This is a help message"
+  }),
+  name: "Help"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+    inline: true,
+    label: "Inline"
+  }),
+  name: "Inline"
+};
 const Required = exports.Required = {
   render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
     label: "Required",
@@ -73,11 +101,10 @@ const Required = exports.Required = {
   }),
   name: "Required"
 };
-const Inline = exports.Inline = {
+const Success = exports.Success = {
   render: () => /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
-    label: "Inline",
-    name: "RadioInput",
-    inline: true
+    label: "Success",
+    success: "This is a success message"
   }),
-  name: "Inline"
+  name: "Success"
 };

package/dist/esm/components/ActionButton/ActionButton.d.ts

@@ -1,7 +1,6 @@
-import React, { MouseEventHandler } from "react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import React from "react";
 import type { ButtonProps } from "../Button";
-import type { ClassName, PropsWithSpread } from "../../types";
+import type { PropsWithSpread } from "../../types";
 export declare const LOADER_MIN_DURATION = 400;
 export declare const SUCCESS_DURATION = 2000;
 export declare enum Label {
@@ -9,39 +8,15 @@ export declare enum Label {
     SUCCESS = "Action completed"
 }
 export type Props = PropsWithSpread<{
-    /**
-     * The appearance of the button.
-     */
-    appearance?: ButtonProps["appearance"];
-    /**
-     * The content of the button.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the button element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should display inline.
-     */
-    inline?: boolean;
     /**
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
-    /**
-     * Function for handling button click event.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
     success?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>;
+}, ButtonProps>;
 /**
  * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
  *
@@ -49,5 +24,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ children, className, disabled, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/esm/components/ActionButton/ActionButton.js

@@ -1,10 +1,11 @@
-var _excluded = ["appearance", "children", "className", "onClick", "disabled", "inline", "loading", "success"];
+var _excluded = ["children", "className", "disabled", "loading", "success"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import classNames from "classnames";
 import React, { useEffect, useRef, useState } from "react";
 import Icon from "../Icon";
+import Button from "../Button";
 export var LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
 export var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 
@@ -22,12 +23,9 @@ export var Label = /*#__PURE__*/function (Label) {
  */
 var ActionButton = _ref => {
   var {
-      appearance,
       children,
       className,
-      onClick,
       disabled = null,
-      inline = false,
       loading = false,
       success = false
     } = _ref,
@@ -98,26 +96,16 @@ var ActionButton = _ref => {
     }
     return () => window.clearTimeout(successTimeout);
   }, [showSuccess]);
-  var buttonClasses = classNames(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
-    "is-processing": showLoader || showSuccess,
-    "is-disabled": disabled === null ? showLoader : disabled,
-    "is-inline": inline
+  var buttonClasses = classNames(className, "p-action-button", {
+    "is-processing": showLoader || showSuccess
   });
   var showIcon = showLoader || showSuccess;
-  var isDisabled = disabled === null ? showLoader : disabled;
   var icon = showLoader && "spinner" || showSuccess && "success" || null;
-  var iconLight = appearance === "positive" || appearance === "negative";
-  var onClickDisabled = e => e.preventDefault();
-
-  // This component uses the base button element instead of the Button component
-  // as the button requires a ref and Button would have to be updated to use
-  // forwardRef which is not currently supported by components that use
-  // typescript generics.
-  return /*#__PURE__*/React.createElement("button", _extends({
+  var iconLight = buttonProps.appearance === "positive" || buttonProps.appearance === "negative";
+  return /*#__PURE__*/React.createElement(Button, _extends({
     className: buttonClasses,
     ref: ref,
-    onClick: isDisabled ? onClickDisabled : onClick,
-    "aria-disabled": isDisabled || undefined,
+    disabled: disabled === null ? showLoader : disabled,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

package/dist/esm/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ComponentType, ElementType, MouseEventHandler, ReactNode, Ref } from "react";
 import type { ClassName, ValueOf } from "../../types";
 export declare const ButtonAppearance: {
     readonly BASE: "base";
@@ -54,6 +54,10 @@ export type Props<P = null> = {
      * Whether the button should be small.
      */
     small?: boolean;
+    /**
+     * A ref to the button.
+     */
+    ref?: Ref<HTMLButtonElement>;
 } & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).

package/dist/esm/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "./CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
  *
  * Use the checkbox component to select one or more options.
  */
-declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => React.JSX.Element;
+declare const CheckboxInput: ({ label, indeterminate, caution, className, error, help, helpClassName, id, inline, success, ...checkboxProps }: Props) => React.JSX.Element;
 export default CheckboxInput;

package/dist/esm/components/CheckboxInput/CheckboxInput.js

@@ -1,9 +1,12 @@
-var _excluded = ["label", "indeterminate"];
+import _pt from "prop-types";
+var _excluded = ["label", "indeterminate", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from "react";
+import React, { useId } from "react";
+import classnames from "classnames";
 import CheckableInput from "./CheckableInput";
+import Field from "../Field";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
  *
@@ -12,13 +15,55 @@ import CheckableInput from "./CheckableInput";
 var CheckboxInput = _ref => {
   var {
       label,
-      indeterminate = false
+      indeterminate = false,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     checkboxProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(CheckableInput, _extends({
-    label: label,
+  var defaultInputId = useId();
+  var inputId = id || defaultInputId;
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: classnames(className, {
+      "p-checkbox--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    inline: inline,
+    isTickElement: true,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement(CheckableInput, _extends({}, checkboxProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    indeterminate: indeterminate,
+    inline: inline,
     inputType: "checkbox",
-    indeterminate: indeterminate
-  }, checkboxProps));
+    label: label
+  })));
+};
+CheckboxInput.propTypes = {
+  caution: _pt.node,
+  className: _pt.string,
+  error: _pt.node,
+  help: _pt.node,
+  helpClassName: _pt.string,
+  id: _pt.string,
+  inline: _pt.bool,
+  success: _pt.node
 };
 export default CheckboxInput;

package/dist/esm/components/CheckboxInput/CheckboxInput.stories.d.ts

@@ -4,8 +4,12 @@ declare const meta: Meta<typeof CheckboxInput>;
 export default meta;
 type Story = StoryObj<typeof CheckboxInput>;
 export declare const Default: Story;
-export declare const Children: Story;
+export declare const Caution: Story;
 export declare const Disabled: Story;
-export declare const Required: Story;
-export declare const Inline: Story;
+export declare const Error: Story;
+export declare const Help: Story;
 export declare const Indeterminate: Story;
+export declare const Inline: Story;
+export declare const LabelWithChildElements: Story;
+export declare const Required: Story;
+export declare const Success: Story;

package/dist/esm/components/CheckboxInput/CheckboxInput.stories.js

@@ -38,14 +38,12 @@ export default meta;
 export var Default = {
   name: "Default"
 };
-export var Children = {
+export var Caution = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
-    label: /*#__PURE__*/React.createElement(React.Fragment, null, "I agree to", /*#__PURE__*/React.createElement("a", {
-      href: "http://ubuntu.com/legal"
-    }, "Terms and Conditions")),
-    name: "CheckboxInput"
+    label: "Caution",
+    caution: "This is a caution message"
   }),
-  name: "Label with child elements"
+  name: "Caution"
 };
 export var Disabled = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
@@ -54,19 +52,19 @@ export var Disabled = {
   }),
   name: "Disabled"
 };
-export var Required = {
+export var Error = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
-    label: "Required",
-    required: true
+    label: "Error",
+    error: "This is an error message"
   }),
-  name: "Required"
+  name: "Error"
 };
-export var Inline = {
+export var Help = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
-    label: "Inline",
-    inline: true
+    label: "Help",
+    help: "This is a help message"
   }),
-  name: "Inline"
+  name: "Help"
 };
 export var Indeterminate = {
   render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
@@ -74,4 +72,34 @@ export var Indeterminate = {
     indeterminate: true
   }),
   name: "Indeterminate"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    inline: true,
+    label: "Inline"
+  }),
+  name: "Inline"
+};
+export var LabelWithChildElements = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "I agree to", /*#__PURE__*/React.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "CheckboxInput"
+  }),
+  name: "Label with child elements"
+};
+export var Required = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Required",
+    required: true
+  }),
+  name: "Required"
+};
+export var Success = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Success",
+    success: "This is a success message"
+  }),
+  name: "Success"
 };

package/dist/esm/components/ConfirmationModal/ConfirmationModal.stories.js

@@ -2,6 +2,7 @@ import { useState } from "react";
 import React from "react";
 import ConfirmationModal from "./ConfirmationModal";
 import Input from "../Input";
+import Icon from "../Icon";
 var doNothing = () => {};
 var meta = {
   component: ConfirmationModal,
@@ -17,9 +18,15 @@ export var Default = {
       onClick: () => setModalOpen(true)
     }, "Open confirmation modal"), modalOpen ? /*#__PURE__*/React.createElement(ConfirmationModal, {
       title: "Confirm delete",
-      confirmButtonLabel: "Delete",
+      confirmButtonLabel: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+        name: "delete",
+        light: true
+      }), /*#__PURE__*/React.createElement("span", null, "Delete")),
       onConfirm: doNothing,
-      close: closeHandler
+      close: closeHandler,
+      confirmButtonProps: {
+        hasIcon: true
+      }
     }, /*#__PURE__*/React.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/React.createElement("br", null), "You cannot undo this action.")) : null);
   },
   name: "Default"

package/dist/esm/components/Field/Field.d.ts

@@ -42,6 +42,10 @@ export type Props = {
      * An id to give to the help element.
      */
     helpId?: string;
+    /**
+     * Whether the component is inline.
+     */
+    inline?: boolean;
     /**
      * Whether the component is wrapping a select element.
      */
@@ -87,5 +91,5 @@ export type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpAfterLabel, helpId, inline, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, stackedFieldColumns, stackedLabelColumns, success, validationId, ...props }: Props) => React.JSX.Element;
 export default Field;

package/dist/esm/components/Field/Field.js

@@ -1,4 +1,4 @@
-var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
+var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpAfterLabel", "helpId", "inline", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "stackedFieldColumns", "stackedLabelColumns", "success", "validationId"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -61,10 +61,14 @@ var generateContent = _ref2 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "p-form__control u-clearfix"
+  var WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/React.createElement(WrapperComponent, {
+    className: classNames("p-form__control", {
+      "u-clearfix": !inline
+    })
   }, isSelect ? /*#__PURE__*/React.createElement("div", {
     className: "p-form-validation__select-wrapper"
   }, children) : children, !labelFirst && labelNode, helpAfterLabel ? null : help, generateError(error, caution, success, validationId));
@@ -80,6 +84,7 @@ var Field = _ref3 => {
       helpClassName,
       helpAfterLabel,
       helpId,
+      inline,
       isSelect,
       isTickElement,
       label,
@@ -110,9 +115,11 @@ var Field = _ref3 => {
     caution,
     success,
     validationId,
-    helpAfterLabel
+    helpAfterLabel,
+    inline
   });
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var WrapperComponent = inline ? "span" : "div";
+  return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
     className: classNames("p-form__group", "p-form-validation", className, {
       "is-error": error,
       "is-caution": caution,

package/dist/esm/components/Input/Input.js

@@ -45,7 +45,6 @@ var Input = _ref => {
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
-  var fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
   var defaultInputId = useId();
   var inputId = id || defaultInputId;
   var validationId = useId();
@@ -68,22 +67,30 @@ var Input = _ref => {
       }
     }
   }, [takeFocus, takeFocusDelay]);
-  var input;
   if (type === "checkbox") {
-    input = /*#__PURE__*/React.createElement(CheckboxInput, _extends({
+    return /*#__PURE__*/React.createElement(CheckboxInput, _extends({
       label: label,
-      labelClassName: labelClassName
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
-  } else if (type === "radio") {
-    input = /*#__PURE__*/React.createElement(RadioInput, _extends({
+  }
+  if (type === "radio") {
+    return /*#__PURE__*/React.createElement(RadioInput, _extends({
       label: label,
-      labelClassName: labelClassName
-    }, commonProps));
-  } else {
-    input = /*#__PURE__*/React.createElement("input", _extends({
-      className: classNames("p-form-validation__input", className),
-      ref: inputRef,
-      type: type
+      labelClassName: labelClassName,
+      caution: caution,
+      className: wrapperClassName,
+      error: error,
+      help: help,
+      helpClassName: helpClassName,
+      required: required,
+      success: success
     }, commonProps));
   }
   return /*#__PURE__*/React.createElement(Field, {
@@ -95,8 +102,7 @@ var Input = _ref => {
     helpAfterLabel: helpAfterLabel,
     helpClassName: helpClassName,
     helpId: helpId,
-    isTickElement: type === "checkbox" || type === "radio",
-    label: fieldLabel,
+    label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
@@ -104,6 +110,10 @@ var Input = _ref => {
     stackedLabelColumns: stackedLabelColumns,
     success: success,
     validationId: validationId
-  }, input);
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: classNames("p-form-validation__input", className),
+    ref: inputRef,
+    type: type
+  }, commonProps)));
 };
 export default Input;

package/dist/esm/components/RadioInput/RadioInput.d.ts

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
-export type Props = Omit<CheckableInputProps, "inputType">;
+export type Props = Omit<CheckableInputProps, "inputType"> & {
+    caution?: ReactNode;
+    className?: string;
+    error?: ReactNode;
+    help?: ReactNode;
+    helpClassName?: string;
+    id?: string;
+    inline?: boolean;
+    success?: ReactNode;
+    wrapperClassName?: string;
+};
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
  *
  * Use radio buttons to select one of the given set of options.
  */
-declare const RadioInput: ({ label, ...radioProps }: Props) => React.JSX.Element;
+declare const RadioInput: ({ label, caution, className, error, help, helpClassName, id, inline, success, ...radioProps }: Props) => React.JSX.Element;
 export default RadioInput;

package/dist/esm/components/RadioInput/RadioInput.js

@@ -1,9 +1,12 @@
-var _excluded = ["label"];
+import _pt from "prop-types";
+var _excluded = ["label", "caution", "className", "error", "help", "helpClassName", "id", "inline", "success"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from "react";
+import React, { useId } from "react";
+import classnames from "classnames";
 import CheckableInput from "../CheckboxInput/CheckableInput";
+import Field from "../Field";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
  *
@@ -11,12 +14,55 @@ import CheckableInput from "../CheckboxInput/CheckableInput";
  */
 var RadioInput = _ref => {
   var {
-      label
+      label,
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      inline,
+      success
     } = _ref,
     radioProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(CheckableInput, _extends({
+  var defaultInputId = useId();
+  var inputId = id || defaultInputId;
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: classnames(className, {
+      "p-radio--inline": inline
+    }),
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName,
+    helpId: helpId,
+    isTickElement: true,
+    success: success,
+    validationId: validationId,
+    inline: inline
+  }, /*#__PURE__*/React.createElement(CheckableInput, _extends({}, radioProps, {
+    "aria-describedby": help ? helpId : undefined,
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    id: inputId,
+    inline: inline,
     inputType: "radio",
     label: label
-  }, radioProps));
+  })));
+};
+RadioInput.propTypes = {
+  caution: _pt.node,
+  className: _pt.string,
+  error: _pt.node,
+  help: _pt.node,
+  helpClassName: _pt.string,
+  id: _pt.string,
+  inline: _pt.bool,
+  success: _pt.node,
+  wrapperClassName: _pt.string
 };
 export default RadioInput;