@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/lib/HorizontalScroll/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    // English text from TDS Community `Tabs`
+    previousLabel: 'Move menu to the left',
+    nextLabel: 'Move menu to the right'
+  },
+  fr: {
+    previousLabel: 'Déplacer le menu vers la gauche',
+    nextLabel: 'Déplacer le menu vers la droite'
+  }
+};
+exports.default = _default;

package/lib/HorizontalScroll/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HorizontalScrollButton", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalScrollButton.default;
+  }
+});
+exports.horizontalScrollUtils = exports.default = void 0;
+
+var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
+
+var _itemPositions = require("./itemPositions");
+
+var _HorizontalScrollButton = _interopRequireDefault(require("./HorizontalScrollButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _HorizontalScroll.default;
+exports.default = _default;
+const horizontalScrollUtils = {
+  selectHorizontalScrollTokens: _HorizontalScroll.selectHorizontalScrollTokens,
+  useItemPositions: _itemPositions.useItemPositions,
+  getItemPositionScrollTarget: _itemPositions.getItemPositionScrollTarget,
+  getItemPositionLayoutHandler: _itemPositions.getItemPositionLayoutHandler,
+  itemPositionsPropType: _itemPositions.itemPositionsPropType
+};
+exports.horizontalScrollUtils = horizontalScrollUtils;

package/lib/HorizontalScroll/itemPositions.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.itemPositionsPropType = exports.useItemPositions = exports.getItemPositionLayoutHandler = exports.getItemPositionScrollTarget = void 0;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Utilities to assist scrolling a parent so that it snaps neatly to an appropriate child.
+
+/**
+ * @typedef ItemPositionPosition
+ * @property {number} [ItemPositionItem.start] - optional theme scale variants e.g. compact, wide
+ * @property {number} [ItemPositionItem.end] - optional override to force a particular pixel size
+ *
+ * @typedef {Object.<number, ItemPositionItem>} ItemPositionPositions - ref object of start/end coordinates
+ *
+ * @typedef ItemPositions
+ * @property {number} ItemPositions.contentWidth - current width of potentially-overflowing content inside scrollable
+ * @property {number} ItemPositions.containerWidth - current width of non-overflowing outer scroll container
+ * @property {number} ItemPositions.scrollOffset - current x position of the left edge of the visible section of the scrollable content
+ * @property {ItemPositionPositions} ItemPositions.positions - `{ start, end }` coordinates of each scrollable content item, by index
+ * @property {(targetX: number) => void)} ItemPositions.scrollTo - function to scroll to a co-ordinate, applying scrolling logic
+ * @property {() => void)} ItemPositions.setIsReady - function to call when layout has been calculated and itemPositions data is ready
+ */
+
+/**
+ * Takes a desired scroll target coordinate and returns a valid coordinate
+ * that, when not scrolling to one end or another, snaps to the start of an item,
+ * making sure any "scroll back" button doesn't overlap the first item.
+ *
+ * @param {number} x - the intended coordinate to scroll to
+ * @param {number} scrollMax - the highest posible coordinate to scroll to
+ * @param {ItemPositionPositions} positions - positions list from `useItemPositions` ref
+ * @param {number} [buttonClearance] - offset to allow space for a button
+ * @returns {number}
+ */
+const getItemPositionScrollTarget = (x, scrollMax, positions, buttonClearance = 0) => {
+  if (x <= 0) return 0;
+  if (x >= scrollMax) return scrollMax; // If not scrolling all the way to the start or end, stop
+  // where the first item is not coverred by the scroll previous button
+
+  const targetItem = Object.values(positions).find(({
+    start,
+    end
+  }) => start <= x && end > x); // If there's no target item we're landing at a gap between items
+
+  const targetX = targetItem ? targetItem.start : x;
+  return Math.max(0, targetX - buttonClearance);
+};
+/**
+ * Returns a handler for React Native's `onLayout` which updates the values of
+ * the ref object returned from `useItemPositions`.
+ *
+ * @param {ItemPositionPositions} positions
+ * @param {number} index
+ * @returns {function}
+ */
+
+
+exports.getItemPositionScrollTarget = getItemPositionScrollTarget;
+
+const getItemPositionLayoutHandler = (positions, index) => {
+  const handleLayout = ({
+    nativeEvent: {
+      layout: {
+        width,
+        x
+      }
+    }
+  }) => {
+    /* eslint-disable-next-line no-param-reassign */
+    positions[index] = {
+      start: x,
+      end: x + width
+    };
+  };
+
+  return handleLayout;
+};
+/**
+ * Wrapper for `useRef` which gives a mutable object in which item start/end coordinates,
+ * scrollTo method and content/container widths may be set and updated without causing a re-render.
+ *
+ * @returns {[ItemPositions, isReady: bool]} tuple array of:
+ *  - current ref object `{ positions, contentWidth, containerWidth, scrollOffset, scrollTo, setIsReady }`
+ *  - boolean that updates to `true` (causing a re-render) after the first time `setIsReady` is called
+ */
+
+
+exports.getItemPositionLayoutHandler = getItemPositionLayoutHandler;
+
+const useItemPositions = () => {
+  const [isReady, setIsReady] = (0, _react.useState)(false);
+  return [(0, _react.useRef)({
+    positions: {},
+    scrollTo: () => {},
+    contentWidth: 0,
+    containerWidth: 0,
+    scrollOffset: 0,
+    setIsReady
+  }).current, isReady];
+};
+/**
+ * PropType for the ref object returned by `useItemPositions`
+ */
+
+
+exports.useItemPositions = useItemPositions;
+
+const itemPositionsPropType = _propTypes.default.exact({
+  positions: _propTypes.default.objectOf(_propTypes.default.shape({
+    start: _propTypes.default.number,
+    end: _propTypes.default.number
+  })),
+  scrollTo: _propTypes.default.func,
+  contentWidth: _propTypes.default.number,
+  containerWidth: _propTypes.default.number,
+  scrollOffset: _propTypes.default.number,
+  setIsReady: _propTypes.default.func
+});
+
+exports.itemPositionsPropType = itemPositionsPropType;

package/lib/Icon/Icon.js

@@ -1,72 +1,81 @@
-import React from 'react';
-import { Platform, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, scaleWithText, variantProp } from '../utils';
+"use strict";
 
-const Icon = ({
-  IconSvg,
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.iconComponentPropTypes = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Icon = /*#__PURE__*/(0, _react.forwardRef)(({
+  icon: IconComponent,
+  accessibilityLabel,
   variant,
-  label,
-  titleId,
   tokens,
-  scalesWithText = false
-}) => {
-  const themeTokens = useThemeTokens('Icon', tokens, variant);
-  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
-  const iconContent = /*#__PURE__*/React.createElement(IconSvg, {
-    title: label,
-    titleId: titleId,
+  scalesWithText = false,
+  dataSet
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
+  const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
+  const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+    title: accessibilityLabel,
     size: size,
     color: themeTokens.color
   });
-  return Platform.OS === 'web' ? /*#__PURE__*/React.createElement(View // eslint-disable-next-line react-native/no-inline-styles
-  , {
+  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref // eslint-disable-next-line react-native/no-inline-styles
+    ,
     style: {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
       transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
-    }
-  }, iconContent) : iconContent;
-}; // Auto-generated SVG icon components wrap Icon and pass through these props:
-
-
-export const iconComponentPropTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Icon'),
+    },
+    dataSet: dataSet,
+    children: iconContent
+  }) : iconContent;
+});
+Icon.displayName = 'Icon';
+const iconComponentPropTypes = {
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Icon'),
 
   /**
    * Descriptive label used in web SVG title tag for accessibility
    */
-  label: PropTypes.string,
-
-  /**
-   * On web, this unique id is applied to <SVG> title and aria-labelledby attr
-   */
-  titleId: PropTypes.string
-}; // Auto-generated SVG icon components contain an inner SVG component taking these props:
-
-export const iconSvgPropTypes = {
-  title: iconComponentPropTypes.label,
-  titleId: iconComponentPropTypes.titleId,
-
-  /**
-   * The size of the SVG icon after resolving tokens
-   */
-  size: PropTypes.number,
+  accessibilityLabel: _propTypes.default.string,
 
   /**
-   * The color of the SVG icon after resolving tokens
+   * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  color: PropTypes.string
+  scalesWithText: _propTypes.default.bool
 };
+exports.iconComponentPropTypes = iconComponentPropTypes;
 Icon.propTypes = { ...iconComponentPropTypes,
 
   /**
-   * Function component containing this icon's SVG or native equivalent.
-   * UDS's SVGR config turns static SVG files into components that pass this to <Icon>.
+   * A valid UDS icon component imported from a UDS palette
+   * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
    */
-  IconSvg: PropTypes.func.isRequired
+  icon: _propTypes.default.elementType.isRequired
 };
-export default Icon;
+var _default = Icon;
+exports.default = _default;

package/lib/Icon/IconText.js

@@ -1,9 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Platform, View } from 'react-native';
-import { iconComponentPropTypes } from './Icon';
-import { getStackedContent } from '../StackView';
-import { spacingProps } from '../utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Icon = _interopRequireWildcard(require("./Icon"));
+
+var _StackView = require("../StackView");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component
  * intended for use when creating components, not intended for use in applications on its own.
@@ -12,61 +35,67 @@ import { spacingProps } from '../utils';
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-
-const IconText = ({
+const IconText = /*#__PURE__*/(0, _react.forwardRef)(({
   space,
   iconPosition = 'left',
   icon: IconComponent,
   iconProps,
   children
-}) => {
-  const iconContent = IconComponent && /*#__PURE__*/React.createElement(IconComponent, Object.assign({
-    scalesWithText: true
-  }, iconProps)); // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
+}, ref) => {
+  var _iconProps$tokens;
+
+  const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }); // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
   // See abandoned issue https://github.com/facebook/react-native/issues/6529
 
-  const size = iconProps?.tokens?.size;
-  const iconAdjusted = Platform.OS === 'android' && iconContent && size ? /*#__PURE__*/React.createElement(View, {
+  const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
+  const iconAdjusted = _Platform.default.OS === 'android' && iconContent && size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: {
       transform: [{
         translateY: size * 0.2
       }]
-    }
-  }, iconContent) : iconContent;
-  return getStackedContent(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+    },
+    children: iconContent
+  }) : iconContent;
+  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
     space,
     direction: 'row'
   });
-};
-
+});
+IconText.displayName = 'IconText';
 IconText.propTypes = {
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
    */
-  space: spacingProps.types.spacingValue,
+  space: _utils.spacingProps.types.spacingValue,
 
   /**
    * Whether the icon should be to the left of the content or the right of the content.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
 
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: PropTypes.func,
+  icon: _propTypes.default.func,
 
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
    * prop will be set as "true" so that the icon continues to match the size of the text
    * if users use accessibility settings to increase text size.
    */
-  iconProps: PropTypes.exact(iconComponentPropTypes),
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
 
   /**
    * Content to be rendered alongside the Icon component. Usually this should be a
    * `<Typography>` component, or a component that renders `<Text>`.
    */
-  children: PropTypes.node
+  children: _propTypes.default.node
 };
-export default IconText;
+var _default = IconText;
+exports.default = _default;

package/lib/Icon/index.js

@@ -1,4 +1,31 @@
-import Icon, { iconComponentPropTypes, iconSvgPropTypes } from './Icon';
-import IconText from './IconText';
-export default Icon;
-export { iconComponentPropTypes, iconSvgPropTypes, IconText };
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "iconComponentPropTypes", {
+  enumerable: true,
+  get: function () {
+    return _Icon.iconComponentPropTypes;
+  }
+});
+Object.defineProperty(exports, "IconText", {
+  enumerable: true,
+  get: function () {
+    return _IconText.default;
+  }
+});
+exports.default = void 0;
+
+var _Icon = _interopRequireWildcard(require("./Icon"));
+
+var _IconText = _interopRequireDefault(require("./IconText"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _Icon.default;
+exports.default = _default;

package/lib/IconButton/IconButton.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const selectOuterStyle = ({
+  backgroundColor,
+  borderRadius,
+  outerBorderWidth,
+  outerBorderColor,
+  outerBorderGap,
+  shadow
+}) => [{
+  backgroundColor,
+  ...(0, _ThemeProvider.applyShadowToken)(shadow),
+  ...(0, _ThemeProvider.applyOuterBorder)({
+    borderRadius,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap
+  }),
+  ..._Platform.default.select({
+    web: {
+      outline: 'none',
+      display: 'inline-flex'
+    }
+  })
+}, staticStyles.outer];
+
+const selectInnerStyle = ({
+  borderColor,
+  borderWidth = 0,
+  borderRadius,
+  padding = 0
+}) => ({
+  // Inner borders animate with the icon and should be treated like a themable feature of the icon
+  borderColor,
+  borderRadius,
+  borderWidth,
+  padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+
+});
+/**
+ * A pressable themeless base component that handles pressable states and passes tokens
+ * based on these to an outer border and a base Card component. Not intended to be used in
+ * apps or sites directly: build themed components on top of this.
+ */
+
+
+const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
+  tokens,
+  variant,
+  icon: IconComponent,
+  href,
+  hrefAttrs,
+  onPress,
+  accessibilityRole = href ? 'link' : 'button',
+  ...rest
+}, ref) => {
+  const a11y = _propTypes2.a11yProps.select({ ...rest,
+    accessibilityRole
+  });
+
+  const handlePress = _utils.linkProps.handleHref({
+    href,
+    onPress
+  });
+
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
+
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState)));
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    href: href,
+    onPress: handlePress,
+    hrefAttrs: hrefAttrs,
+    style: getOuterStyle,
+    ...a11y,
+    children: pressableState => {
+      const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectInnerStyle(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: IconComponent,
+          title: a11y.accessibilityLabel,
+          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
+        })
+      });
+    }
+  });
+});
+IconButton.displayName = 'IconButton';
+IconButton.propTypes = { ..._propTypes2.a11yProps.types,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('IconButton'),
+  icon: _propTypes.default.elementType.isRequired,
+  href: _propTypes.default.string,
+  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  onPress: _propTypes.default.func
+};
+
+const staticStyles = _StyleSheet.default.create({
+  outer: {
+    alignSelf: 'flex-start'
+  }
+});
+
+var _default = IconButton;
+exports.default = _default;

package/lib/IconButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _IconButton = _interopRequireDefault(require("./IconButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _IconButton.default;
+exports.default = _default;