@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/TextInput/TextInputBase.js

@@ -0,0 +1,256 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TextInput"));
+
+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 selectInputStyles = ({
+  backgroundColor,
+  color,
+  borderWidth = 0,
+  borderColor,
+  borderRadius,
+  paddingTop = 0,
+  paddingBottom = 0,
+  paddingLeft,
+  paddingRight = 0,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  icon,
+  iconSize = 0,
+  minLines,
+  maxLines,
+  width,
+  height
+}, inactive) => {
+  // Subtract border width from padding so overall input width/height doesn't
+  // jump around if the border width changes (avoiding NaN and negative padding)
+  const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
+
+  const textStyles = (0, _ThemeProvider.applyTextStyles)({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight
+  });
+
+  function linesToHeight(lines) {
+    const {
+      lineHeight: absoluteLineHeight
+    } = textStyles;
+    return lines !== undefined ? lines * absoluteLineHeight + paddingTop + paddingBottom : undefined;
+  }
+
+  const minHeight = linesToHeight(minLines);
+  const maxHeight = linesToHeight(maxLines);
+
+  const webStyles = _Platform.default.select({
+    web: {
+      outline: 'none',
+      cursor: inactive ? 'not-allowed' : undefined,
+      resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
+
+    }
+  });
+
+  const paddingWithIcon = iconSize + paddingRight;
+  return {
+    backgroundColor,
+    color,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    paddingLeft: offsetBorder(paddingLeft),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingTop: offsetBorder(paddingTop),
+    paddingBottom: offsetBorder(paddingBottom),
+    minHeight,
+    maxHeight,
+    width,
+    height,
+    ...textStyles,
+    ...webStyles
+  };
+};
+
+const selectOuterBorderStyles = ({
+  outerBackgroundColor,
+  outerBorderWidth,
+  outerBorderColor,
+  borderRadius
+}) => ({
+  background: outerBackgroundColor,
+  ...(0, _ThemeProvider.applyOuterBorder)({
+    outerBorderColor,
+    outerBorderWidth,
+    borderRadius
+  })
+});
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
+});
+
+const selectIconContainerStyles = ({
+  paddingRight,
+  paddingBottom
+}) => ({
+  paddingRight,
+  paddingBottom
+});
+
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(({
+  value,
+  height,
+  initialValue,
+  inactive,
+  readOnly,
+  onChange,
+  onChangeText,
+  onFocus,
+  onBlur,
+  onMouseOver,
+  onMouseOut,
+  tokens,
+  variant = {},
+  ...remainingProps
+}, ref) => {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+
+  const handleFocus = event => {
+    setIsFocused(true);
+    if (typeof onFocus === 'function') onFocus(event);
+  };
+
+  const handleBlur = event => {
+    setIsFocused(false);
+    if (typeof onBlur === 'function') onBlur(event);
+  };
+
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+
+  const handleMouseOver = event => {
+    setIsHovered(true);
+    if (typeof onMouseOver === 'function') onMouseOver(event);
+  };
+
+  const handleMouseOut = event => {
+    setIsHovered(false);
+    if (typeof onMouseOut === 'function') onMouseOut(event);
+  };
+
+  const {
+    currentValue,
+    setValue,
+    isControlled
+  } = (0, _utils.useInputValue)({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  });
+
+  const handleChangeText = event => {
+    var _event$nativeEvent, _event$target;
+
+    const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+    setValue(text, event);
+    if (typeof onChangeText === 'function') onChangeText(text, event);
+  };
+
+  const states = {
+    focus: isFocused,
+    hover: isHovered,
+    inactive
+  };
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  const inputProps = { ...remainingProps,
+    editable: !inactive,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onChange: handleChangeText,
+    defaultValue: initialValue,
+    // currentValue is being updated even if the input is not controlled, passing it down to the
+    // Input could lead to changing its state from uncontrolled to controlled
+    value: isControlled ? currentValue : undefined
+  };
+  const nativeInputStyle = selectInputStyles({ ...themeTokens,
+    height
+  }, inactive);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: selectOuterBorderStyles(themeTokens),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      ref: ref,
+      style: nativeInputStyle,
+      ...inputProps
+    }), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      pointerEvents: "none" // avoid hijacking input press events
+      ,
+      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+      })
+    })]
+  });
+});
+TextInputBase.displayName = 'TextInputBase';
+TextInputBase.propTypes = {
+  value: _propTypes.default.string,
+  height: _propTypes.default.number,
+  initialValue: _propTypes.default.string,
+  inactive: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onChangeText: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onMouseOver: _propTypes.default.func,
+  onMouseOut: _propTypes.default.func,
+  tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
+  variant: _utils.variantProp.propType
+};
+var _default = TextInputBase;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  iconContainer: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0
+  }
+});

package/lib/TextInput/index.js

@@ -1,2 +1,23 @@
-import TextInput from './TextInput';
-export default TextInput;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _TextInput.default;
+  }
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.default;
+  }
+});
+
+var _TextInput = _interopRequireDefault(require("./TextInput"));
+
+var _TextArea = _interopRequireDefault(require("./TextArea"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/TextInput/propTypes.js

@@ -0,0 +1,42 @@
+"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 }; }
+
+const textInputPropTypes = {
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: _propTypes.default.string,
+
+  /**
+   * Use this to set the initial value of an uncontrolled input.
+   * Updating `initialValue` will **not** update the actual value.
+   */
+  initialValue: _propTypes.default.string,
+
+  /**
+   * Disables all user interactions with the input.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Makes it impossible to change the input's value.
+   */
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set.
+   * Will receive the input's value as an argument.
+   */
+  onChange: _propTypes.default.func
+};
+var _default = textInputPropTypes;
+exports.default = _default;

package/lib/ThemeProvider/ThemeProvider.js

@@ -1,28 +1,56 @@
-import React, { createContext, useState } from 'react';
-import PropTypes from 'prop-types';
-export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
-export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError); // TODO: develop this as theme metadata is added
-// https://github.com/telus/universal-design-system/issues/92
+"use strict";
 
-export const themeType = PropTypes.object;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 uninitialisedError = new Error('Theme context used outside of ThemeProvider');
+exports.uninitialisedError = uninitialisedError;
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
+exports.ThemeContext = ThemeContext;
+const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
+exports.ThemeSetterContext = ThemeSetterContext;
 
 const ThemeProvider = ({
   children,
   defaultTheme
 }) => {
-  const [theme, setTheme] = useState(defaultTheme);
-  return /*#__PURE__*/React.createElement(ThemeSetterContext.Provider, {
-    value: setTheme
-  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-    value: theme
-  }, children));
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
+  // This will intentionally break the application when attempting to use an invalid theme.
+  // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
+
+  (0, _utils.validateThemeTokensVersion)(theme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
+    value: setTheme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
+      value: theme,
+      children: children
+    })
+  });
 };
 
 ThemeProvider.propTypes = {
-  // TODO: implement a custom propType that validates schema version
-  // https://github.com/telus/universal-design-system/issues/92
-  children: PropTypes.node.isRequired,
-  defaultTheme: themeType.isRequired
+  children: _propTypes.default.node.isRequired,
+  defaultTheme: _propTypes.default.shape({
+    metadata: _propTypes.default.shape({
+      themeTokensVersion: _propTypes.default.string.isRequired
+    }).isRequired
+  }).isRequired
 };
-export default ThemeProvider;
+var _default = ThemeProvider;
+exports.default = _default;

package/lib/ThemeProvider/index.js

@@ -1,6 +1,61 @@
-import ThemeProvider from './ThemeProvider';
-export { default as useTheme } from './useTheme';
-export { default as useSetTheme } from './useSetTheme';
-export * from './useThemeTokens';
-export * from './utils';
-export default ThemeProvider;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useTheme: true,
+  useSetTheme: true
+};
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+Object.defineProperty(exports, "useSetTheme", {
+  enumerable: true,
+  get: function () {
+    return _useSetTheme.default;
+  }
+});
+exports.default = void 0;
+
+var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
+
+var _useThemeTokens = require("./useThemeTokens");
+
+Object.keys(_useThemeTokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useThemeTokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useThemeTokens[key];
+    }
+  });
+});
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ThemeProvider.default;
+exports.default = _default;

package/lib/ThemeProvider/useSetTheme.js

@@ -1,11 +1,24 @@
-import { useCallback, useContext } from 'react';
-import { ThemeSetterContext } from './ThemeProvider';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ThemeProvider = require("./ThemeProvider");
 
 const useSetTheme = () => {
   // Replace current theme with provided object
-  const setTheme = useContext(ThemeSetterContext); // Merge provided object into current theme
+  const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Fail fast if dev uses useSetTheme outside of ThemeProvider
+
+  if (setTheme instanceof Error) {
+    throw setTheme;
+  } // Merge provided object into current theme
+
 
-  const editTheme = useCallback(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
+  const editTheme = (0, _react.useCallback)(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
     ...newTheme
   })), [setTheme]);
   return {
@@ -14,4 +27,5 @@ const useSetTheme = () => {
   };
 };
 
-export default useSetTheme;
+var _default = useSetTheme;
+exports.default = _default;

package/lib/ThemeProvider/useTheme.js

@@ -1,8 +1,16 @@
-import { useContext } from 'react';
-import { ThemeContext } from './ThemeProvider';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ThemeProvider = require("./ThemeProvider");
 
 const useTheme = () => {
-  const theme = useContext(ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
+  const theme = (0, _react.useContext)(_ThemeProvider.ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
 
   if (theme instanceof Error) {
     throw theme;
@@ -11,4 +19,5 @@ const useTheme = () => {
   return theme;
 };
 
-export default useTheme;
+var _default = useTheme;
+exports.default = _default;

package/lib/ThemeProvider/useThemeTokens.js

@@ -1,6 +1,18 @@
-import { useCallback } from 'react';
-import useTheme from './useTheme';
-import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } from './utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeTokensCallback = exports.useThemeTokens = void 0;
+
+var _react = require("react");
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
  * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
@@ -11,28 +23,78 @@ import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } fr
  * Returns a complete set of theme tokens for a component based on which of the
  * component's theme rules apply to the current set of theme appearances.
  *
+ * When applying theme tokens as styles to a component, don't spread the theme tokens
+ * object, explicitly select each property. This way, if new theme tokens are added to the
+ * component's theme in a minor or patch release of the theme package, the appearance
+ * of the component in sites and apps will only change when the component itself is updated.
+ *
+ * @example
+ * const seletContainerTokens = ({ color, width, height }) => ({
+ *   backgroundColor: color, width, height
+ * })
+ * const MyComponent = ({ tokens, variant, children }) => {
+ *   const viewport = useViewport()
+ *   const themeTokens = useThemeTokens('MyComponent', tokens, variant, { viewport })
+ *   const style = seletContainerTokens(themeTokens)
+ *   return <View style={style}>{children}</View>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept an optional `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - every themed component should accept an optional `variants` prop specifying theme variants
  * @param {AppearanceSet} [states] - optional object containing current theme appearances dictated by user action or context
  * @returns {TokensSet} - the currently-applicable resolved set of theme tokens to apply
  */
-
-export const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const themeTokens = getThemeTokens(componentTheme, tokens, variants, states);
+const useThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const themeTokens = (0, _utils.getThemeTokens)(componentTheme, tokens, variants, states);
   return themeTokens;
 };
 /**
  * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
- * Scenarios where useThemeTokensCallback should be used instead of useThemeTokens include:
+ * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
  *
- * - Where tokens to be obtained from state accessible only in scopes like callbacks and render functions,
- *   where calling useThemeTokens directly would be disallowed by React's hook rules.
+ * - Where tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useThemeTokens directly would be disallowed by React's hook rules.
  * - Passing a tokens getter down via a child component's `tokens` prop, applying rules using the
  *   child component's current state. Consider wrapping the returned tokens in `selectTokens()`.
  *
+ * The function returned by `useThemeTokens` may be called with an object of state appearances to get an object
+ * of tokens, or may be passed as a `tokens` prop to other themed components or `useThemeTokens`/`useThemeTokensCallback`
+ * hooks.
+ *
+ * @example
+ * // Resolving tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getTokens = useThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const { color, width, height } = getTokens({ pressed })
+ *     return { backgroundColor: color, width, height }
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getTokens = useThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @example
+ * // Chaining multiple themes together, sharing the same variants and state
+ * const GlowingLink = ({ tokens, variant, children }) => {
+ *   // applies a small theme for a glowing effect, using same variants and states as "link"
+ *   const getGlowTokens = useThemeCallback('GlowingLink', tokens, variant)
+ *   // applies link state to get "Link" theme tokens and merge "GlowingLink" tokens on top
+ *   const getTokens = useThemeCallback('Link', getGlowTokens, variant)
+ *   // renders a link with both themes applied, both based on current link state
+ *   return <LinkBase tokens={getTokens}>{children}</LinkBase>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically
@@ -42,13 +104,18 @@ export const useThemeTokens = (componentName, tokens = {}, variants = {}, states
  *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
  */
 
-export const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
-  const theme = useTheme();
-  const componentTheme = getComponentTheme(theme, componentName);
-  const getThemeTokensCallback = useCallback((states, tokenOverrides) => {
-    const appearances = mergeAppearances(variants, states);
-    const resolvedTokens = resolveTokens(tokens, tokenOverrides, appearances);
-    return getThemeTokens(componentTheme, resolvedTokens, appearances);
+
+exports.useThemeTokens = useThemeTokens;
+
+const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const getThemeTokensCallback = (0, _react.useCallback)((states, tokenOverrides) => {
+    const appearances = (0, _utils.mergeAppearances)(variants, states);
+    const resolvedTokens = (0, _utils.resolveThemeTokens)(tokens, appearances, tokenOverrides);
+    return (0, _utils.getThemeTokens)(componentTheme, resolvedTokens, appearances);
   }, [componentTheme, tokens, variants]);
   return getThemeTokensCallback;
-};
+};
+
+exports.useThemeTokensCallback = useThemeTokensCallback;