@planningcenter/tapestry-react 2.10.0-rc.1 → 2.10.0-rc.3

package/dist/cjs/Button/Button.js

@@ -31,6 +31,8 @@ var _utils = require("../utils");
 
 var _useAccessibilityViolation = require("../hooks/use-accessibility-violation");
 
+var _designTokens = require("../designTokens");
+
 var _Input = _interopRequireDefault(require("./Input"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -78,7 +80,7 @@ function Button(_ref) {
     inline: true,
     lineHeight: lineHeight,
     position: 'relative',
-    radius: 4,
+    radius: _designTokens.designTokens.borderRadius,
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',

package/dist/cjs/Input/Inline.js

@@ -15,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _InputField = _interopRequireDefault(require("./InputField"));
 
+var _designTokens = require("../designTokens");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -49,7 +51,7 @@ function Inline(_ref) {
     paddingHorizontal: 0.5,
     paddingVertical: 0,
     placeholderColor: light ? 'light-5' : 'foregroundTertiary',
-    radius: 4,
+    radius: _designTokens.designTokens.inputRadius,
     stroke: undefined
   }, restProps));
 }

package/dist/cjs/Input/InputBox.js

@@ -37,6 +37,8 @@ var _InputContext = _interopRequireDefault(require("./InputContext"));
 
 var _utils = require("./utils");
 
+var _designTokens = require("../designTokens");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -305,7 +307,7 @@ var InputBox = /*#__PURE__*/function (_Component) {
       alignment: _StackView["default"].CENTER,
       shrink: 0,
       minHeight: boxSize,
-      radius: 4,
+      radius: _designTokens.designTokens.inputRadius,
       position: "relative",
       cursor: "text",
       outline: 0,

package/dist/cjs/NumberField/NumberField.js

@@ -62,10 +62,8 @@ var NumberField = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getParsedValues", function (value) {
       return {
         value: Number.parseFloat(value),
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        minValue: Number.parseFloat(_this.props.min),
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        maxValue: Number.parseFloat(_this.props.max)
+        minValue: _this.props.min,
+        maxValue: _this.props.max
       };
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clampValue", function (valueToCheck) {
@@ -90,23 +88,22 @@ var NumberField = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (event) {
       var _this$getParsedValues3 = _this.getParsedValues(event.target.value),
-          value = _this$getParsedValues3.value,
           minValue = _this$getParsedValues3.minValue,
           maxValue = _this$getParsedValues3.maxValue;
 
+      var value = Number.parseFloat(event.target.value);
+
       if (value < minValue) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(minValue);
+        _this.props.onChange(minValue.toString());
       } else if (value > maxValue) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(maxValue);
-      } else if (isNaN(event.target.value)) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(_this.clampValue(value));
+        _this.props.onChange(maxValue.toString());
+      } else if (isNaN(value)) {
+        value = _this.clampValue(value);
+
+        _this.props.onChange(value.toString());
       }
 
       if (_this.props.onBlur) {
-        // @ts-ignore
         _this.props.onBlur(event);
       }
 
@@ -115,12 +112,10 @@ var NumberField = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stepValue", function (baseValue, step) {
       var nextValue = _this.clampValue(baseValue + step);
 
-      var parsedValue = Number.parseFloat( // @ts-ignore Expected 1 arguments, but got 2.ts(2554)
-      baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue);
+      var parsedValue = Number.parseFloat(baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue.toString());
 
       if (_this.isValueValid(parsedValue)) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(parsedValue);
+        _this.props.onChange(parsedValue.toString());
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "incrementValue", function () {
@@ -220,15 +215,13 @@ var NumberField = /*#__PURE__*/function (_Component) {
 
     if (pad && numberValue !== '') {
       numberValue = (0, _utils.padNumber)(numberValue, pad);
-    } // @ts-ignore Property 'min' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
-
+    }
 
-    if (parsed.min !== MIN_VALUE) {
+    if (parsed.minValue !== MIN_VALUE) {
       restProps.min = this.props.min;
-    } // @ts-ignore Property 'max' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
-
+    }
 
-    if (parsed.max !== MAX_VALUE) {
+    if (parsed.maxValue !== MAX_VALUE) {
       restProps.max = this.props.max;
     }
 

package/dist/cjs/NumberField/NumberField.test.js

@@ -6,6 +6,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -18,6 +20,10 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _NumberField = _interopRequireDefault(require("./NumberField"));
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 describe('value', function () {
   var TestApp = function TestApp(_ref) {
     var initialValue = _ref.value,
@@ -27,17 +33,21 @@ describe('value', function () {
         value = _useState[0],
         setValue = _useState[1];
 
-    return /*#__PURE__*/_react["default"].createElement(_NumberField["default"], (0, _extends2["default"])({}, props, {
+    var defaultProps = _objectSpread({
+      pad: 0,
+      highlightOnInteraction: false,
+      placeholder: '',
+      autoWidth: false
+    }, props);
+
+    return /*#__PURE__*/_react["default"].createElement(_NumberField["default"], (0, _extends2["default"])({
       "data-testid": "test",
-      value: value // @ts-ignore No overload matches this call.
-      // Overload 1 of 2, '(props: Props | Readonly<Props>): NumberField', gave the following error.
-      // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.
-      // Type 'void' is not assignable to type 'null'.
-      // Overload 2 of 2, '(props: Props, context: any): NumberField', gave the following error.
-      // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.ts(2769)
-      ,
-      onChange: setValue
-    }));
+      value: value,
+      onChange: function onChange(newValue) {
+        setValue(newValue);
+        return null;
+      }
+    }, defaultProps));
   };
 
   var setup = function setup(props) {

package/dist/cjs/Radio/Radio.js

@@ -83,28 +83,25 @@ var Radio = function Radio(_ref) {
     position: "relative"
   }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     innerRef: inputRef,
-    as: "input",
-    type: "radio" // @ts-ignore Type 'string | number' is not assignable to type 'string'.
-    // Type 'number' is not assignable to type 'string'.ts(2322)
+    as: "input" // Type '{ innerRef: MutableRefObject<undefined>; as: string; type: string; id: string; name: string; checked: boolean; value: any; disabled: boolean; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onFocus: (event: FocusEvent<...>) => void; onBlur: (event: FocusEvent<...>) => void; position: "absolute"; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any> & HTMLAttributes<any> & ImgHTMLAttributes<any> & { children?: any; ... 5 more ...; mediaQueries?: object; } & ... 4 more ... & Variants<...>'.
+    // @ts-ignore
     ,
-    id: id,
+    type: "radio",
+    id: typeof id === 'number' ? String(id) : id,
     name: name,
     checked: checked,
     value: value,
     disabled: disabled,
     onChange: function onChange(event) {
-      radioEmitter.emit(name, event.target); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
-
+      radioEmitter.emit(name, event.target);
       _onChange && _onChange(event);
     },
     onFocus: function onFocus(event) {
-      setFocus(true); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
-
+      setFocus(true);
       _onFocus && _onFocus(event);
     },
     onBlur: function onBlur(event) {
-      setFocus(false); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
-
+      setFocus(false);
       _onBlur && _onBlur(event);
     },
     position: "absolute",

package/dist/cjs/designTokens/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.designTokens = void 0;
+var designTokens = {
+  borderRadius: 4,
+  inputRadius: 4
+};
+exports.designTokens = designTokens;

package/dist/esm/Button/Button.js

@@ -15,6 +15,7 @@ import { StackView } from '../StackView';
 import Tooltip from '../Tooltip';
 import { mergeProps } from '../utils';
 import { useAccessibilityViolation } from '../hooks/use-accessibility-violation';
+import { designTokens } from '../designTokens';
 import Input from './Input';
 
 var _ref2 = /*#__PURE__*/React.createElement(Link, {
@@ -71,7 +72,7 @@ export function Button(_ref) {
     inline: true,
     lineHeight: lineHeight,
     position: 'relative',
-    radius: 4,
+    radius: designTokens.borderRadius,
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',

package/dist/esm/Input/Inline.js

@@ -8,6 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import InputField from './InputField';
+import { designTokens } from '../designTokens';
 
 function Inline(_ref) {
   var light = _ref.light,
@@ -40,7 +41,7 @@ function Inline(_ref) {
     paddingHorizontal: 0.5,
     paddingVertical: 0,
     placeholderColor: light ? 'light-5' : 'foregroundTertiary',
-    radius: 4,
+    radius: designTokens.inputRadius,
     stroke: undefined
   }, restProps));
 }

package/dist/esm/Input/InputBox.js

@@ -18,6 +18,7 @@ import Spinner from '../Spinner';
 import StackView from '../StackView';
 import InputContext from './InputContext';
 import { inputs, isTabbable } from './utils';
+import { designTokens } from '../designTokens';
 
 // temporary until InputBox is converted to a functional component
 function DocumentEscape(_ref) {
@@ -294,7 +295,7 @@ var InputBox = /*#__PURE__*/function (_Component) {
       alignment: StackView.CENTER,
       shrink: 0,
       minHeight: boxSize,
-      radius: 4,
+      radius: designTokens.inputRadius,
       position: "relative",
       cursor: "text",
       outline: 0,

package/dist/esm/NumberField/NumberField.js

@@ -47,10 +47,8 @@ var NumberField = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "getParsedValues", function (value) {
       return {
         value: Number.parseFloat(value),
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        minValue: Number.parseFloat(_this.props.min),
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        maxValue: Number.parseFloat(_this.props.max)
+        minValue: _this.props.min,
+        maxValue: _this.props.max
       };
     });
 
@@ -79,23 +77,22 @@ var NumberField = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
       var _this$getParsedValues3 = _this.getParsedValues(event.target.value),
-          value = _this$getParsedValues3.value,
           minValue = _this$getParsedValues3.minValue,
           maxValue = _this$getParsedValues3.maxValue;
 
+      var value = Number.parseFloat(event.target.value);
+
       if (value < minValue) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(minValue);
+        _this.props.onChange(minValue.toString());
       } else if (value > maxValue) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(maxValue);
-      } else if (isNaN(event.target.value)) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(_this.clampValue(value));
+        _this.props.onChange(maxValue.toString());
+      } else if (isNaN(value)) {
+        value = _this.clampValue(value);
+
+        _this.props.onChange(value.toString());
       }
 
       if (_this.props.onBlur) {
-        // @ts-ignore
         _this.props.onBlur(event);
       }
 
@@ -105,12 +102,10 @@ var NumberField = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "stepValue", function (baseValue, step) {
       var nextValue = _this.clampValue(baseValue + step);
 
-      var parsedValue = Number.parseFloat( // @ts-ignore Expected 1 arguments, but got 2.ts(2554)
-      baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue);
+      var parsedValue = Number.parseFloat(baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue.toString());
 
       if (_this.isValueValid(parsedValue)) {
-        // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-        _this.props.onChange(parsedValue);
+        _this.props.onChange(parsedValue.toString());
       }
     });
 
@@ -215,15 +210,13 @@ var NumberField = /*#__PURE__*/function (_Component) {
 
     if (pad && numberValue !== '') {
       numberValue = padNumber(numberValue, pad);
-    } // @ts-ignore Property 'min' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
-
+    }
 
-    if (parsed.min !== MIN_VALUE) {
+    if (parsed.minValue !== MIN_VALUE) {
       restProps.min = this.props.min;
-    } // @ts-ignore Property 'max' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
-
+    }
 
-    if (parsed.max !== MAX_VALUE) {
+    if (parsed.maxValue !== MAX_VALUE) {
       restProps.max = this.props.max;
     }
 

package/dist/esm/NumberField/NumberField.test.js

@@ -1,5 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import React, { useState } from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -14,17 +20,21 @@ describe('value', function () {
         value = _useState[0],
         setValue = _useState[1];
 
-    return /*#__PURE__*/React.createElement(NumberField, _extends({}, props, {
+    var defaultProps = _objectSpread({
+      pad: 0,
+      highlightOnInteraction: false,
+      placeholder: '',
+      autoWidth: false
+    }, props);
+
+    return /*#__PURE__*/React.createElement(NumberField, _extends({
       "data-testid": "test",
-      value: value // @ts-ignore No overload matches this call.
-      // Overload 1 of 2, '(props: Props | Readonly<Props>): NumberField', gave the following error.
-      // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.
-      // Type 'void' is not assignable to type 'null'.
-      // Overload 2 of 2, '(props: Props, context: any): NumberField', gave the following error.
-      // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.ts(2769)
-      ,
-      onChange: setValue
-    }));
+      value: value,
+      onChange: function onChange(newValue) {
+        setValue(newValue);
+        return null;
+      }
+    }, defaultProps));
   };
 
   var setup = function setup(props) {

package/dist/esm/Radio/Radio.js

@@ -65,28 +65,25 @@ var Radio = function Radio(_ref) {
     position: "relative"
   }, restProps), /*#__PURE__*/React.createElement(Box, {
     innerRef: inputRef,
-    as: "input",
-    type: "radio" // @ts-ignore Type 'string | number' is not assignable to type 'string'.
-    // Type 'number' is not assignable to type 'string'.ts(2322)
+    as: "input" // Type '{ innerRef: MutableRefObject<undefined>; as: string; type: string; id: string; name: string; checked: boolean; value: any; disabled: boolean; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onFocus: (event: FocusEvent<...>) => void; onBlur: (event: FocusEvent<...>) => void; position: "absolute"; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any> & HTMLAttributes<any> & ImgHTMLAttributes<any> & { children?: any; ... 5 more ...; mediaQueries?: object; } & ... 4 more ... & Variants<...>'.
+    // @ts-ignore
     ,
-    id: id,
+    type: "radio",
+    id: typeof id === 'number' ? String(id) : id,
     name: name,
     checked: checked,
     value: value,
     disabled: disabled,
     onChange: function onChange(event) {
-      radioEmitter.emit(name, event.target); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
-
+      radioEmitter.emit(name, event.target);
       _onChange && _onChange(event);
     },
     onFocus: function onFocus(event) {
-      setFocus(true); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
-
+      setFocus(true);
       _onFocus && _onFocus(event);
     },
     onBlur: function onBlur(event) {
-      setFocus(false); // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
-
+      setFocus(false);
       _onBlur && _onBlur(event);
     },
     position: "absolute",

package/dist/esm/designTokens/index.js

@@ -0,0 +1,4 @@
+export var designTokens = {
+  borderRadius: 4,
+  inputRadius: 4
+};

package/dist/types/Button/Button.d.ts

@@ -96,9 +96,7 @@ export declare namespace Button {
             close: any;
         }) => React.ReactNode);
         size?: "xs" | "sm" | "md" | "lg";
-        onClose: () => void; /**
-         * Pass styles for when the button is active.
-         */
+        onClose: () => void;
         onOpen: () => void;
     } & {
         children?: any;

package/dist/types/NumberField/NumberField.d.ts

@@ -30,7 +30,8 @@ declare type Props = {
     /**
      * Maps to the input's `onBlur` prop.
      */
-    onBlur?: () => null;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
     onKeyDown?: Function;
     /**
      * The amount of 0s to pad the value with.

package/dist/types/Radio/Radio.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare type RadioProps = {
     /**
      * Disables the radio component.
@@ -30,15 +31,15 @@ export declare type RadioProps = {
     /**
      * Maps to the internal input's `onChange` prop.
      */
-    onChange?: () => null;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Maps to the internal input's `onFocus` prop.
      */
-    onFocus?: () => null;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * Maps to the internal input's `onBlur` prop.
      */
-    onBlur?: () => null;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
 };
 declare const Radio: ({ checked, disabled, id, label, name, onBlur, onChange, onFocus, size, value, ...restProps }: RadioProps) => JSX.Element;
 export default Radio;

package/dist/types/designTokens/index.d.ts

@@ -0,0 +1,4 @@
+export declare const designTokens: {
+    borderRadius: number;
+    inputRadius: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.10.0-rc.1",
+  "version": "2.10.0-rc.3",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Button/Button.tsx

@@ -9,6 +9,7 @@ import { StackView, StackViewProps } from '../StackView'
 import Tooltip from '../Tooltip'
 import { mergeProps } from '../utils'
 import { useAccessibilityViolation } from '../hooks/use-accessibility-violation'
+import { designTokens } from '../designTokens'
 
 import Input from './Input'
 
@@ -164,7 +165,7 @@ export function Button({
     inline: true,
     lineHeight,
     position: 'relative',
-    radius: 4,
+    radius: designTokens.borderRadius,
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',

package/src/Input/Inline.js

@@ -2,6 +2,7 @@
 import React from 'react'
 
 import InputField from './InputField'
+import { designTokens } from '../designTokens'
 
 type Props = {
   /** Controls the color when hovered and focused. (Defaults `light ? 'light-0' : 'highlight'`  */
@@ -51,7 +52,7 @@ function Inline({
       paddingHorizontal={0.5}
       paddingVertical={0}
       placeholderColor={light ? 'light-5' : 'foregroundTertiary'}
-      radius={4}
+      radius={designTokens.inputRadius}
       stroke={undefined}
       {...restProps}
     />

package/src/Input/InputBox.js

@@ -11,6 +11,7 @@ import StackView from '../StackView'
 
 import InputContext from './InputContext'
 import { inputs, isTabbable } from './utils'
+import { designTokens } from '../designTokens'
 
 export type InputBoxProps = {
   /**
@@ -389,7 +390,7 @@ class InputBox extends Component<InputBoxProps> {
           alignment={StackView.CENTER}
           shrink={0}
           minHeight={boxSize}
-          radius={4}
+          radius={designTokens.inputRadius}
           position="relative"
           cursor="text"
           outline={0}

package/src/NumberField/NumberField.test.tsx

@@ -7,18 +7,22 @@ import NumberField from './NumberField'
 describe('value', () => {
   const TestApp = ({ value: initialValue, ...props }) => {
     const [value, setValue] = useState(initialValue)
+    const defaultProps = {
+      pad: 0,
+      highlightOnInteraction: false,
+      placeholder: '',
+      autoWidth: false,
+      ...props,
+    }
     return (
       <NumberField
-        {...props}
         data-testid="test"
         value={value}
-        // @ts-ignore No overload matches this call.
-        // Overload 1 of 2, '(props: Props | Readonly<Props>): NumberField', gave the following error.
-        // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.
-        // Type 'void' is not assignable to type 'null'.
-        // Overload 2 of 2, '(props: Props, context: any): NumberField', gave the following error.
-        // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.ts(2769)
-        onChange={setValue}
+        onChange={(newValue) => {
+          setValue(newValue)
+          return null
+        }}
+        {...defaultProps}
       />
     )
   }

package/src/NumberField/NumberField.tsx

@@ -42,7 +42,9 @@ type Props = {
   /**
    * Maps to the input's `onBlur` prop.
    */
-  onBlur?: () => null
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
+
+  onInput?: (event: React.FormEvent<HTMLInputElement>) => void
 
   onKeyDown?: Function
 
@@ -124,10 +126,8 @@ class NumberField extends Component<Props> {
   getParsedValues = (value) => {
     return {
       value: Number.parseFloat(value),
-      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-      minValue: Number.parseFloat(this.props.min),
-      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-      maxValue: Number.parseFloat(this.props.max),
+      minValue: this.props.min,
+      maxValue: this.props.max,
     }
   }
 
@@ -148,21 +148,18 @@ class NumberField extends Component<Props> {
   }
 
   handleBlur = (event) => {
-    const { value, minValue, maxValue } = this.getParsedValues(
-      event.target.value
-    )
+    const { minValue, maxValue } = this.getParsedValues(event.target.value)
+    let value = Number.parseFloat(event.target.value)
+
     if (value < minValue) {
-      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-      this.props.onChange(minValue)
+      this.props.onChange(minValue.toString())
     } else if (value > maxValue) {
-      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-      this.props.onChange(maxValue)
-    } else if (isNaN(event.target.value)) {
-      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-      this.props.onChange(this.clampValue(value))
+      this.props.onChange(maxValue.toString())
+    } else if (isNaN(value)) {
+      value = this.clampValue(value)
+      this.props.onChange(value.toString())
     }
     if (this.props.onBlur) {
-      // @ts-ignore
       this.props.onBlur(event)
     }
     this.firstTouch = true
@@ -171,12 +168,12 @@ class NumberField extends Component<Props> {
   stepValue = (baseValue, step) => {
     const nextValue = this.clampValue(baseValue + step)
     const parsedValue = Number.parseFloat(
-      // @ts-ignore Expected 1 arguments, but got 2.ts(2554)
-      baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue
+      baseValue.toString().indexOf('.') > -1
+        ? nextValue.toFixed(2)
+        : nextValue.toString()
     )
     if (this.isValueValid(parsedValue)) {
-      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
-      this.props.onChange(parsedValue)
+      this.props.onChange(parsedValue.toString())
     }
   }
 
@@ -265,13 +262,11 @@ class NumberField extends Component<Props> {
       numberValue = padNumber(numberValue, pad)
     }
 
-    // @ts-ignore Property 'min' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
-    if (parsed.min !== MIN_VALUE) {
+    if (parsed.minValue !== MIN_VALUE) {
       restProps.min = this.props.min
     }
 
-    // @ts-ignore Property 'max' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
-    if (parsed.max !== MAX_VALUE) {
+    if (parsed.maxValue !== MAX_VALUE) {
       restProps.max = this.props.max
     }
 
@@ -343,7 +338,6 @@ class NumberField extends Component<Props> {
       moveFocusOnMax,
       onChange,
       onBlur,
-      // @ts-ignore Property 'onInput' does not exist on type 'Readonly<Props>'.ts(2339)
       onInput,
       onKeyDown,
       pad,

package/src/Radio/Radio.tsx

@@ -52,17 +52,17 @@ export type RadioProps = {
   /**
    * Maps to the internal input's `onChange` prop.
    */
-  onChange?: () => null
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 
   /**
    * Maps to the internal input's `onFocus` prop.
    */
-  onFocus?: () => null
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void
 
   /**
    * Maps to the internal input's `onBlur` prop.
    */
-  onBlur?: () => null
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
 }
 
 const radioEmitter = mitt()
@@ -84,6 +84,7 @@ const Radio = ({
   const inputRef = useRef()
   const [localChecked, setLocalChecked] = useState(false)
   const [focus, setFocus] = useState(false)
+
   // Because radio components are grouped by the name prop we use an event emitter
   // as a way to toggle the state between each one
   useEffect(() => {
@@ -114,27 +115,24 @@ const Radio = ({
         <Box
           innerRef={inputRef}
           as="input"
+          // Type '{ innerRef: MutableRefObject<undefined>; as: string; type: string; id: string; name: string; checked: boolean; value: any; disabled: boolean; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onFocus: (event: FocusEvent<...>) => void; onBlur: (event: FocusEvent<...>) => void; position: "absolute"; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any> & HTMLAttributes<any> & ImgHTMLAttributes<any> & { children?: any; ... 5 more ...; mediaQueries?: object; } & ... 4 more ... & Variants<...>'.
+          // @ts-ignore
           type="radio"
-          // @ts-ignore Type 'string | number' is not assignable to type 'string'.
-          // Type 'number' is not assignable to type 'string'.ts(2322)
-          id={id}
+          id={typeof id === 'number' ? String(id) : id}
           name={name}
           checked={checked}
           value={value}
           disabled={disabled}
-          onChange={(event) => {
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
             radioEmitter.emit(name, event.target)
-            // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
             onChange && onChange(event)
           }}
           onFocus={(event) => {
             setFocus(true)
-            // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
             onFocus && onFocus(event)
           }}
           onBlur={(event) => {
             setFocus(false)
-            // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
             onBlur && onBlur(event)
           }}
           position="absolute"

package/src/designTokens/index.ts

@@ -0,0 +1,4 @@
+export const designTokens = {
+  borderRadius: 4,
+  inputRadius: 4,
+}