@telus-uds/components-base 1.2.0 → 1.3.0

package/lib/utils/props/tokens.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
+// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
+// or components (e.g. Icon tokens)
+const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
+
+const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
+
+const getTokenNames = componentName => {
+  const componentTokenSchema = _systemThemeTokens.components[componentName];
+
+  if (!componentTokenSchema) {
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
+  }
+
+  return Object.keys(componentTokenSchema);
+};
+/**
+ * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
+ * or by a provided array of tokens. A prefix may be provided, for example:
+ *
+ * @example
+ * ```jsx
+ * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
+ * selectTokens('Button', themeTokens)
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns `{ backgroundColor, width }` where the values of those keys come from
+ * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
+ * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns tokens that are defined in the `Button` theme schema, from tokens with
+ * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
+ * selectTokens('Button', themeTokens, 'button')
+ * ```
+ *
+ * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
+ * @param {object} tokens - a source object of theme tokens
+ * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
+ * @returns {object} - subset of theme tokens
+ */
+
+
+exports.getTokenNames = getTokenNames;
+
+const selectTokens = (specifier, tokens, prefix) => {
+  const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
+  const filteredTokens = tokenNames.reduce((validTokens, key) => {
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
+    const token = tokens[prefixedKey];
+    return token !== undefined ? { ...validTokens,
+      [key]: token
+    } : validTokens;
+  }, {});
+  return filteredTokens;
+};
+/**
+ * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
+ * @typedef {{[key: string]: TokenValue}} TokensSet
+ * @typedef {(AppearanceSet) => TokensSet} TokensGetter
+ * @typedef {TokensSet|TokensGetter} TokensProp
+ */
+
+/**
+ * 'tokens' is an optional object prop on all themable components. Its keys must match the
+ * token keys in the component's theme schema.
+ *
+ * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
+ * where the main theming system doesn't apply. It is intentionally permissive about values.
+ *
+ * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
+ * @return {function} - a custom PropTypes validator
+ *
+ * @example
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in Component schema
+ *   tokens: getTokensPropType('Component')
+ * }
+ *
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in schemas for Component1 and Component2
+ *   tokens: getTokensPropType('Component1', 'Component2')
+ * }
+ */
+
+
+exports.selectTokens = selectTokens;
+
+const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
+  _propTypes.default.checkPropTypes({
+    [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
+  }, props, propName, componentName);
+
+  if (typeof props[propName] !== 'function') {
+    _propTypes.default.checkPropTypes({
+      [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+    }, props, propName, componentName);
+  }
+};
+/**
+ * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
+ *
+ * For example, for a set of tokens used in a common style, or for a set of tokens required by
+ * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
+ *
+ * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ *
+ * @param {string[]} componentTokenKeys - array of strings of token names
+ * @param {object} [options]
+ * @param {boolean} [options.partial] - if true, allows tokens to be undefined
+ * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
+ * @returns
+ */
+
+
+exports.getTokensPropType = getTokensPropType;
+
+const getTokensSetPropType = (componentTokenKeys, {
+  partial = false,
+  allowFunction = false
+} = {}) => {
+  const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
+
+  return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
+};
+
+exports.getTokensSetPropType = getTokensSetPropType;

package/lib/utils/props/variantProp.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
+ * @typedef {AppearanceSet} VariantProp
+ */
+var _default = {
+  /**
+   * 'variant' is an optional object prop on all themable components.
+   *
+   * Contains an object with keys that correspond to the current component theme's allowed
+   * appearances and values that correspond to the allowed values of that component.
+   *
+   * Since the particular keys and values depend on which theme is currently active,
+   * the exact shape of variant props is not enforced using PropTypes.
+   */
+  propType: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
+};
+exports.default = _default;

package/lib/utils/props/viewProps.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const viewPropTypes = {
+  pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
+  onLayout: _propTypes.default.func,
+  nativeID: _propTypes.default.string,
+  testID: _propTypes.default.string,
+  dataSet: _propTypes.default.object
+};
+var _default = {
+  /**
+   * Subset of `View` proptypes that could conceivably be needed on any component
+   * that renders a single View.
+   */
+  types: viewPropTypes,
+
+  /**
+   * Filters a props object, returning only cross-platform View props that are potentially
+   * relevant to any basic layout component that renders one View.
+   */
+  select: (0, _getPropSelector.default)(viewPropTypes)
+};
+exports.default = _default;

package/lib/utils/useResponsiveProp.js

@@ -40,7 +40,7 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  * For example, if passed `{ sm: 4, lg: 8 }`, it will return 8 on `xl` and `lg` viewports,
  * 4 on `md` and `sm` viewports, and `undefined` (or a provided `defaultValue`) on `xs` viewports.
  *
- * To generate propTypes for responsive props, see `responsiveProps` in `./utils/propTypes.js`.
+ * To generate propTypes for responsive props, see `responsiveProps` in `./utils/props/responsiveProps.js`.
  *
  * @param {*} prop - any value which may be an object with viewport keys
  * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport

package/lib/utils/useSpacingScale.js

@@ -13,10 +13,10 @@ var _useResponsiveProp = require("./useResponsiveProp");
 
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
- * @typedef {import('./propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('./propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('./propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('./propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('./props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
+ * @typedef {import('./props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 const resolveSpacingOptions = space => {
   if (!(space !== null && space !== void 0 && space.options)) return {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -54,8 +54,8 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.1-prerelease.0",
-    "@telus-uds/system-theme-tokens": "^1.2.0",
+    "@telus-uds/system-constants": "^1.0.1",
+    "@telus-uds/system-theme-tokens": "^1.2.1",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v1.1.0",
-  "changelog": "## [1.2.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.1.0...@telus-uds/components-base/v1.2.0) (2022-03-02)\n\n\n### Features\n\n* add withLinkRouter to support router integration ([#1324](https://github.com/telus/universal-design-system/issues/1324)) ([e56f491](https://github.com/telus/universal-design-system/commit/e56f491ac088a005f364330cfc70901532df7cea))\n* **component-base:** refactor ToggleSwitch to use input label and add tooltip support ([#1341](https://github.com/telus/universal-design-system/issues/1341)) ([979da1a](https://github.com/telus/universal-design-system/commit/979da1afb5b319df51026f44299d363f50f1be7d))\n* **components-base:** add ToggleSwitchGroup ([#1307](https://github.com/telus/universal-design-system/issues/1307)) ([402630a](https://github.com/telus/universal-design-system/commit/402630ad04c2d81c4f882fed564cf4ae33096cea))\n",
-  "releaseTag": "@telus-uds/components-base/v1.2.0",
-  "newVersion": "1.2.0",
+  "previousReleaseTag": "@telus-uds/components-base/v1.2.0",
+  "changelog": "## [1.3.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.2.0...@telus-uds/components-base/v1.3.0) (2022-03-21)\n\n\n### Features\n\n* **components-base:** add common system props handler and restructure props-related utils ([#1444](https://github.com/telus/universal-design-system/issues/1444)) ([ab655ec](https://github.com/telus/universal-design-system/commit/ab655ec61796b6a6d7094c2c42ceef8b5197c634))\n* **docs:** add tokens override documentation ([#1330](https://github.com/telus/universal-design-system/issues/1330)) ([49092e5](https://github.com/telus/universal-design-system/commit/49092e5d5f6c2d3a85de930a74a03afff8a60062))\n\n\n### Bug Fixes\n\n* **base:** inherit FlexGrid.Col responsive size if 0 ([#1419](https://github.com/telus/universal-design-system/issues/1419)) ([9defeb0](https://github.com/telus/universal-design-system/commit/9defeb0da08099afb83df9e7ee902f037cb4de02))\n* **ds-allium:** fix some errors in RN builds ([#1448](https://github.com/telus/universal-design-system/issues/1448)) ([8bc4778](https://github.com/telus/universal-design-system/commit/8bc477890f0183584fdc1009d7929b71d23820a3))\n",
+  "releaseTag": "@telus-uds/components-base/v1.3.0",
+  "newVersion": "1.3.0",
   "packageName": "@telus-uds/components-base"
 }

package/src/A11yText/index.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.

package/src/ActivityIndicator/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils/propTypes'
+import { getTokensPropType, variantProp } from '../utils/props'
 
 import Spinner from './Spinner'
 

package/src/Box/Box.jsx

@@ -12,11 +12,12 @@ import {
   getA11yPropsFromHtmlTag,
   layoutTags
 } from '../utils'
+
 /**
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('../utils/propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
 const selectBoxStyles = (tokens) => {

package/src/Button/Button.jsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 
 const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
   const getTokens = useThemeTokensCallback('Button', tokens, variant)

package/src/Button/ButtonGroup.jsx

@@ -10,13 +10,17 @@ import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   pressProps,
-  variantProp,
   getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
 const ButtonGroup = forwardRef(
   (
     {
@@ -51,14 +55,20 @@ const ButtonGroup = forwardRef(
       readOnly
     })
 
-    const a11y = a11yProps.select({
+    const systemProps = selectProps({
       accessibilityRole,
       ...rest
     })
-    const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
+    const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
     return (
-      <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens} ref={ref}>
+      <StackWrap
+        {...systemProps}
+        space={space}
+        direction={direction}
+        tokens={stackTokens}
+        ref={ref}
+      >
         {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
           const isSelected = currentValues.includes(id)
 
@@ -101,8 +111,7 @@ const ButtonGroup = forwardRef(
 ButtonGroup.displayName = 'ButtonGroup'
 
 ButtonGroup.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ButtonGroup'),
   variant: variantProp.propType,
   /**

package/src/Button/ButtonLink.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
+import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
 
 /**

package/src/Button/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
-import { variantProp } from '../utils/propTypes'
+import { variantProp, getTokensPropType } from '../utils/props'
 import A11yText from '../A11yText'
 
 export const textAndA11yText = ABBPropTypes.childrenOf(
@@ -8,6 +8,7 @@ export const textAndA11yText = ABBPropTypes.childrenOf(
 )
 
 const buttonPropTypes = {
+  tokens: getTokensPropType('Button'),
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/src/Card/Card.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import CardBase from './CardBase'
 
 /**

package/src/Card/CardBase.jsx

@@ -4,7 +4,9 @@ import { View } from 'react-native'
 
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType } from '../utils'
-import { a11yProps, viewProps } from '../utils/propTypes'
+import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // Ensure explicit selection of tokens
 const selectStyles = ({
@@ -39,7 +41,7 @@ const selectStyles = ({
  */
 const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
-  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
+  const props = selectProps(rest)
 
   return (
     <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
@@ -50,10 +52,9 @@ const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
 CardBase.displayName = 'CardBase'
 
 CardBase.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
-  tokens: getTokensPropType('Card'),
-  ...viewProps.types,
-  ...a11yProps.types
+  tokens: getTokensPropType('Card')
 }
 
 export default CardBase

package/src/Card/PressableCardBase.jsx

@@ -15,7 +15,7 @@ import {
   clickProps,
   withLinkRouter
 } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import CardBase from './CardBase'
 
 const tokenKeys = [

package/src/Checkbox/Checkbox.jsx

@@ -8,7 +8,7 @@ import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import { getTokensPropType, useInputValue, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import useUniqueId from '../utils/useUniqueId'
 
 const selectInputStyles = (

package/src/Divider/Divider.jsx

@@ -5,8 +5,8 @@ import { useThemeTokens } from '../ThemeProvider'
 import Spacer from '../Spacer'
 import { getTokensPropType, variantProp, spacingProps } from '../utils'
 /**
- * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
 
 /**

package/src/FlexGrid/FlexGrid.jsx

@@ -8,7 +8,15 @@ import Col from './Col'
 import { useViewport } from '../ViewportProvider'
 import GutterContext from './providers/GutterContext'
 import applyInheritance from './helpers'
-import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils'
+import {
+  a11yProps,
+  viewProps,
+  getA11yPropsFromHtmlTag,
+  layoutTags,
+  selectSystemProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
  * A mobile-first flexbox grid.
@@ -62,8 +70,7 @@ const FlexGrid = forwardRef(
 
     const props = {
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest),
-      ...viewProps.select(rest)
+      ...selectProps(rest)
     }
 
     return (
@@ -91,8 +98,7 @@ const styles = StyleSheet.create({
 })
 
 FlexGrid.propTypes = {
-  ...a11yProps.propTypes,
-  ...viewProps.types,
+  ...selectedSystemPropTypes,
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
    */

package/src/FlexGrid/helpers/index.js

@@ -1,10 +1,8 @@
 const applyInheritance = (sizes) => {
   let prevSize
   return sizes.map((size, index) => {
-    if (size) {
-      prevSize = size
-    }
     if (size !== undefined) {
+      prevSize = size
       return size
     }
     if (index) {

package/src/IconButton/IconButton.jsx

@@ -13,7 +13,7 @@ import {
   selectTokens,
   withLinkRouter
 } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import Icon from '../Icon'
 
 const selectOuterStyle = ({

package/src/Link/LinkBase.jsx

@@ -8,7 +8,7 @@ import {
   linkProps,
   getTokensPropType,
   clickProps
-} from '../utils/propTypes'
+} from '../utils/props'
 import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
 

package/src/List/List.jsx

@@ -2,7 +2,7 @@ import React, { cloneElement, forwardRef, Children } from 'react'
 import { View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { getTokensPropType, variantProp, componentPropType } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import ListItem from './ListItem'
 
 /**

package/src/Progress/Progress.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 

package/src/Progress/ProgressBar.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 

package/src/Radio/Radio.jsx

@@ -6,7 +6,7 @@ import RadioLabel from '../InputLabel/LabelContent'
 import RadioButton, { selectRadioButtonTokens } from './RadioButton'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import { getTokensPropType, useInputValue, useUniqueId, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import StackView from '../StackView'
 
 const selectContainerStyles = ({

package/src/Spacer/Spacer.jsx

@@ -4,8 +4,8 @@ import { StyleSheet, View } from 'react-native'
 
 import { useSpacingScale, spacingProps } from '../utils'
 /**
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
  */
 
 const selectSizeStyle = (size, direction) => ({

package/src/StackView/getStackedContent.jsx

@@ -7,7 +7,7 @@ import Spacer from '../Spacer'
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
- * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  */
 
 /**

package/src/StepTracker/StepTracker.jsx

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps } from '../utils/props'
 import { useViewport } from '../ViewportProvider'
 import useCopy from '../utils/useCopy'
 

package/src/Tags/Tags.jsx

@@ -8,13 +8,7 @@ import Icon from '../Icon'
 import { StackWrap, getStackedContent } from '../StackView'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  pressProps,
-  variantProp,
-  getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 import { getPressHandlersWithArgs } from '../utils/pressability'