@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.5

package/lib/TextInput/TextInput.js

@@ -0,0 +1,337 @@
+import React, { useState } from 'react';
+import { View, TextInput as NativeTextInput, Platform, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
+import { getTokensPropType, useInputValue, variantProp } from '../utils';
+import InputLabel from '../InputLabel';
+import Feedback from '../Feedback';
+import Box from '../Box';
+import useUniqueId from '../utils/useUniqueId';
+
+const selectInputStyles = ({
+  backgroundColor,
+  color,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight = 0,
+  fontName,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  icon,
+  iconSize = 0
+}, 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' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
+
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight
+  });
+  const webStyles = Platform.select({
+    web: {
+      outline: 'none',
+      cursor: inactive ? 'not-allowed' : undefined
+    }
+  });
+  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),
+    ...textStyles,
+    ...webStyles
+  };
+};
+
+const selectOuterBorderStyles = ({
+  outerBackgroundColor,
+  outerBorderWidth = 0,
+  outerBorderColor,
+  outerBorderRadius = 0
+}) => {
+  // Use negative margins so that the outer border doesn't expand the input's bounding box
+  const margin = -1 * outerBorderWidth; // Account for the border width since we style it as an outline
+
+  const borderRadius = outerBorderRadius + outerBorderWidth;
+  return {
+    background: outerBackgroundColor,
+    borderWidth: outerBorderWidth,
+    borderColor: outerBorderColor,
+    borderRadius,
+    marginTop: margin,
+    marginBottom: margin,
+    marginLeft: margin,
+    marginRight: margin
+  };
+};
+
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
+});
+
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+/**
+ * A basic text input component. Use in forms or individually to receive user's input.
+ * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextInput` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextInput`.
+ * If the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextInput` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * NOTE: In order to support more advanced usages all additional props will be passed down to the React Native's
+ * `TextInput` component. See <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native documentation</a> for
+ * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
+ * their implementation on the web.
+ */
+
+
+function TextInput({
+  value,
+  initialValue,
+  label,
+  hint,
+  hintPosition = 'inline',
+  feedback,
+  tooltip,
+  validation,
+  inactive,
+  readOnly,
+  onChange,
+  onChangeText,
+  onFocus,
+  onBlur,
+  onMouseOver,
+  onMouseOut,
+  tokens,
+  variant = {},
+  ...remainingProps
+}) {
+  const inputId = useUniqueId('text-input');
+  const hintId = useUniqueId('text-input-hint');
+  const feedbackId = useUniqueId('text-input-feedback');
+  const [isFocused, setIsFocused] = 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] = 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
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  });
+
+  const handleChangeText = text => {
+    setValue(text);
+    if (typeof onChangeText === 'function') onChangeText(text);
+  };
+
+  const states = {
+    focus: isFocused,
+    hover: isHovered,
+    inactive
+  };
+  const themeTokens = useThemeTokens('TextInput', tokens, { ...variant,
+    validation
+  }, states);
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  const hasValidationError = validation === 'error';
+  const inputProps = { ...remainingProps,
+    editable: !inactive,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onChangeText: handleChangeText,
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
+    // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert, so there's no need to include it here
+    hint && hintId]),
+    // introduced in RNW 0.15.0
+    accessibilityInvalid: hasValidationError,
+    // introduced in RNW 0.15.0
+    nativeID: inputId,
+    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
+  }; // TODO: use Stack instead of the Boxes
+
+  const feedbackVariant = {};
+
+  if (hasValidationError) {
+    feedbackVariant.state = 'error';
+  } else if (validation === 'success') {
+    feedbackVariant.state = 'success';
+  }
+
+  return /*#__PURE__*/React.createElement(View, null, label && /*#__PURE__*/React.createElement(Box, {
+    bottom: 1
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    label: label,
+    hint: hint,
+    hintPosition: hintPosition,
+    hintId: hintId,
+    tooltip: tooltip,
+    forId: inputId
+  })), /*#__PURE__*/React.createElement(View, {
+    style: selectOuterBorderStyles(themeTokens)
+  }, /*#__PURE__*/React.createElement(NativeTextInput, Object.assign({
+    style: selectInputStyles(themeTokens, inactive)
+  }, inputProps)), IconComponent && /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none" // avoid hijacking input press events
+    ,
+    style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: selectIconTokens(themeTokens)
+  }))), feedback && /*#__PURE__*/React.createElement(Box, {
+    top: 1
+  }, /*#__PURE__*/React.createElement(Feedback, {
+    title: feedback,
+    variant: feedbackVariant,
+    accessibilityRole: hasValidationError ? 'alert' : undefined
+  })));
+}
+
+const selectIconContainerStyles = ({
+  paddingRight
+}) => ({
+  paddingRight
+});
+
+TextInput.propTypes = {
+  /**
+   * The input label.
+   */
+  label: PropTypes.string,
+
+  /**
+   * If the `TextInput'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.string,
+
+  /**
+   * Use this to set the initial value of an uncontrolled `TextInput`.
+   * Updating `initialValue` will **not** update the actual value.
+   */
+  initialValue: PropTypes.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: PropTypes.string,
+
+  /**
+   * Position of the hint relative to label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: PropTypes.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: PropTypes.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /**
+   * Disables all user interactions with the input.
+   */
+  inactive: PropTypes.bool,
+
+  /**
+   * Makes it impossible to change the input's value.
+   */
+  readOnly: PropTypes.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.func,
+
+  /** @ignore */
+  onChangeText: PropTypes.func,
+
+  /** @ignore */
+  onFocus: PropTypes.func,
+
+  /** @ignore */
+  onBlur: PropTypes.func,
+
+  /** @ignore */
+  onMouseOver: PropTypes.func,
+
+  /** @ignore */
+  onMouseOut: PropTypes.func,
+  tokens: getTokensPropType('TextInput'),
+  variant: variantProp.propType
+};
+export default TextInput;
+const staticStyles = StyleSheet.create({
+  iconContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  }
+});

package/lib/TextInput/index.js

@@ -0,0 +1,2 @@
+import TextInput from './TextInput';
+export default TextInput;

package/lib/ThemeProvider/ThemeProvider.js

@@ -1,8 +1,8 @@
 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 = createContext(uninitialisedError);
-export const ThemeSetterContext = createContext(uninitialisedError); // TODO: develop this as theme metadata is added
+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
 
 export const themeType = PropTypes.object;

package/lib/ThemeProvider/useThemeTokens.js

@@ -1,9 +1,21 @@
 import { useCallback } from 'react';
 import useTheme from './useTheme';
-import { getComponentTheme, getThemeTokens } from './utils';
+import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } from './utils';
+/**
+ * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
+ * @typedef {import('../utils/propTypes.js').TokensSet} TokensSet
+ */
+
 /**
  * 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.
+ *
+ * @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 = {}) => {
@@ -13,14 +25,30 @@ export const useThemeTokens = (componentName, tokens = {}, variants = {}, states
   return themeTokens;
 };
 /**
- * Returns a memoised function that behaves the same as useThemeTokens hook,
- * allowing tokens to be obtained inside callbacks and such other places where
- * calling useThemeTokens directly would be disallowed by React's hook rules.
+ * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
+ * 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.
+ * - 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()`.
+ *
+ * @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
+ * @returns {(states: AppearanceSet, tokenOverrides?: TokensProp) => TokensSet}
+ *    - callback function that returning an overridable tokens set for current state. Only pass
+ *      tokenOverrides in rare cases where tokens overrides are also generated outside hook scope,
+ *      e.g. if one theme tokens callback needs to pass certain token overrides to another.
  */
 
-export const useThemeTokensCallback = componentName => {
+export const useThemeTokensCallback = (componentName, tokens = {}, variants = {}) => {
   const theme = useTheme();
   const componentTheme = getComponentTheme(theme, componentName);
-  const getThemeTokensCallback = useCallback((tokens, variants, states) => getThemeTokens(componentTheme, tokens, variants, states), [componentTheme]);
+  const getThemeTokensCallback = useCallback((states, tokenOverrides) => {
+    const appearances = mergeAppearances(variants, states);
+    const resolvedTokens = resolveTokens(tokens, tokenOverrides, appearances);
+    return getThemeTokens(componentTheme, resolvedTokens, appearances);
+  }, [componentTheme, tokens, variants]);
   return getThemeTokensCallback;
 };

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -1,3 +1,9 @@
+/**
+ * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
+ * @typedef {import('../../utils/propTypes.js').TokensSet} TokensSet
+ */
+
 /**
  * General utilities around working with theme tokens
  */
@@ -28,25 +34,47 @@ export const doesThemeConditionApply = ([key, value], appearances) => {
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
+/**
+ * Turns a tokens prop and an optional tokens override prop (either or both of which may be a tokens getter function)
+ * into one tokens set object where overrides are applied over the resolved default tokens.
+ *
+ * @param {TokensProp} defaultTokens - a set of tokens or tokens getter function which may be overridden
+ * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
+ * @param {AppearanceSet} [appearances] - optional appearance set to pass to tokens getter functions
+ * @returns {TokensSet} - object containing resolved tokens with overrides applied
+ */
+
+export const resolveTokens = (defaultTokens, tokenOverrides, appearances = {}) => {
+  const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
 
-const mergeTokens = (tokensProp, themeTokens, appearances) => {
-  const overrideTokens = typeof tokensProp === 'function' ? tokensProp(appearances) : tokensProp;
-  return Object.entries(overrideTokens).reduce((mergedTokens, [tokenName, tokenValue]) => tokenValue === undefined ? mergedTokens : { ...mergedTokens,
+  if (!tokenOverrides) return resolve(defaultTokens);
+  return Object.entries(resolve(tokenOverrides)).reduce((mergedTokens, [tokenName, tokenValue]) => tokenValue === undefined ? mergedTokens : { ...mergedTokens,
     [tokenName]: tokenValue
-  }, themeTokens);
+  }, resolve(defaultTokens));
 };
+/**
+ * Merges variants over states. Must be merged in that order to allow static showcases of a state,
+ * e.g. `<Button variant={{ pressed: true }} />` where button's pressed state is `false` by default.
+ * Returns an empty object if both variants and states are undefined.
+ *
+ * @param {AppearanceSet} [variants]
+ * @param {AppearanceSet} [states]
+ * @returns {AppearanceSet}
+ */
 
+export const mergeAppearances = (variants = {}, states) => states ? { ...states,
+  ...variants
+} : variants;
 export const getThemeTokens = ({
   rules = [],
   tokens: defaultThemeTokens = {}
-}, tokensProp, variants = {}, states = {}) => {
-  const appearances = { ...states,
-    ...variants
-  }; // TODO: if in dev mode, validate the appearances and provided propTokens
+}, tokensProp, variants = {}, states) => {
+  const appearances = mergeAppearances(variants, states); // TODO: if in dev mode, validate the appearances and provided propTokens
+  // Get the theme's default tokens set and merge tokens from applicable theme rules over it
 
   const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? { ...mergedTokens,
     ...rule.tokens
   } : mergedTokens, defaultThemeTokens);
-  return tokensProp ? mergeTokens(tokensProp, themeTokens, appearances) : themeTokens;
+  return resolveTokens(themeTokens, tokensProp, appearances);
 };
 export const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -3,43 +3,23 @@ import PropTypes from 'prop-types';
 import { Platform, View, StyleSheet } from 'react-native';
 import ButtonBase from '../Button/ButtonBase';
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/propTypes';
+import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/propTypes';
 import { useInputValue } from '../utils/input';
 
-const selectButtonTokens = ({
-  borderColor,
-  borderWidth,
-  borderRadius,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  outerBorderRadius,
-  outerBackgroundColor,
-  backgroundColor,
-  opacity,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow
-}) => ({
-  borderColor,
-  borderWidth,
-  borderRadius,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  outerBorderRadius,
-  outerBackgroundColor,
-  backgroundColor,
-  opacity,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow,
-  width: null // make it wrap around our track width
+const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
+  // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+  width: null
+}); // Map and rename icon-specific tokens to name used within Icon
+
 
+const selectIconTokens = ({
+  iconSize,
+  iconColor,
+  iconOpacity
+}) => ({
+  opacity: iconOpacity,
+  size: iconSize,
+  color: iconColor
 });
 
 const selectTrackStyles = ({
@@ -77,16 +57,6 @@ const selectSwitchStyles = ({
   })
 });
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor,
-  iconOpacity
-}) => ({
-  opacity: iconOpacity,
-  size: iconSize,
-  color: iconColor
-});
-
 const ToggleSwitch = ({
   value,
   initialValue,
@@ -96,7 +66,7 @@ const ToggleSwitch = ({
   variant,
   accessibilityRole = 'switch'
 }) => {
-  const getTokens = useThemeTokensCallback('ToggleSwitch');
+  const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
   const {
     currentValue,
     setValue
@@ -108,7 +78,7 @@ const ToggleSwitch = ({
 
   const handlePress = () => setValue(!currentValue);
 
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(tokens, variant, buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   return /*#__PURE__*/React.createElement(ButtonBase, {
     selected: currentValue,
@@ -120,7 +90,7 @@ const ToggleSwitch = ({
     },
     onPress: handlePress
   }, buttonState => {
-    const themeTokens = getTokens(tokens, variant, buttonState);
+    const themeTokens = getTokens(buttonState);
     const IconComponent = themeTokens.icon;
     const switchStyles = selectSwitchStyles(themeTokens);
     const trackStyles = selectTrackStyles(themeTokens);

package/lib/Typography/Typography.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Platform, Text, View } from 'react-native';
@@ -38,8 +36,6 @@ const selectTextStyles = ({
   color,
   lineHeight,
   fontName,
-  marginTop,
-  marginBottom,
   textAlign,
   textTransform
 }) => applyTextStyles({
@@ -48,8 +44,6 @@ const selectTextStyles = ({
   color,
   lineHeight,
   fontName,
-  marginTop,
-  marginBottom,
   textAlign,
   textTransform
 }); // General-purpose flexible theme-neutral base component for text
@@ -82,7 +76,7 @@ const Typography = ({
     // Must be hyphenated, not camel case; `accessibilityLevel` only works on RNW >=0.15.1
     [headingLevel && 'aria-level']: headingLevel
   };
-  return block ? /*#__PURE__*/React.createElement(View, a11y, /*#__PURE__*/React.createElement(Text, textProps, children)) : /*#__PURE__*/React.createElement(Text, _extends({}, textProps, a11y), children);
+  return block ? /*#__PURE__*/React.createElement(View, a11y, /*#__PURE__*/React.createElement(Text, textProps, children)) : /*#__PURE__*/React.createElement(Text, Object.assign({}, textProps, a11y), children);
 };
 
 Typography.propTypes = { ...a11yProps.types,

package/lib/ViewportProvider/index.js

@@ -8,7 +8,7 @@ import { viewports } from '@telus-uds/system-constants'; // we are using Dimensi
 
 const lookupViewport = () => viewports.select(Dimensions.get('window').width);
 
-export const ViewportContext = createContext({});
+export const ViewportContext = /*#__PURE__*/createContext({});
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
  */

package/lib/index.js

@@ -1,17 +1,24 @@
 export { default as ActivityIndicator } from './ActivityIndicator';
 export { default as Box } from './Box';
 export * from './Button';
+export { default as Card } from './Card';
 export { default as Divider } from './Divider';
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
+export { default as Feedback } from './Feedback';
 export { default as FlexGrid } from './FlexGrid';
 export { default as Icon } from './Icon';
 export * from './Icon';
 export * from './Link';
+export { default as Pagination } from './Pagination';
 export { default as SideNav } from './SideNav';
+export { default as Spacer } from './Spacer';
+export { default as StackView } from './StackView';
+export * from './StackView';
+export { default as TextInput } from './TextInput';
 export { default as ToggleSwitch } from './ToggleSwitch';
 export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { default as ViewportProvider, useViewport } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider';
 export * from './utils';

package/lib/utils/index.js

@@ -1,3 +1,4 @@
 export * from './animation';
 export * from './input';
-export * from './propTypes';
+export * from './propTypes';
+export * from './spacing';

package/lib/utils/input.js

@@ -60,6 +60,7 @@ Consumers of this hook must be one of:
  *   currentValue: any
  *   setValue: (value: any) => void
  *   resetValue: () => void
+ *   isControlled: bool
  * }}
  */
 
@@ -91,7 +92,8 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   return {
     currentValue,
     setValue,
-    resetValue
+    resetValue,
+    isControlled
   };
 };
 /**