react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/field/Field.js

@@ -0,0 +1,460 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Field = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _cell = _interopRequireDefault(require("../cell"));
+var _dialog = _interopRequireDefault(require("../dialog"));
+var _string = require("../../utils/string");
+var _validate = require("../../utils/validate");
+var _tokens = require("./tokens");
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const Field = exports.Field = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    tokensOverride,
+    label,
+    labelWidth: labelWidthProp,
+    labelAlign: labelAlignProp,
+    inputAlign: inputAlignProp,
+    controlAlign: controlAlignProp,
+    required = false,
+    colon = false,
+    intro,
+    description,
+    tooltip,
+    error = false,
+    errorMessage,
+    errorMessageAlign = 'left',
+    disabled = false,
+    readOnly = false,
+    clearable = false,
+    clearTrigger: clearTriggerProp,
+    clearIcon,
+    leftIcon,
+    rightIcon,
+    prefix,
+    suffix: suffixProp,
+    button,
+    extra,
+    value: valueProp,
+    defaultValue = '',
+    type = 'text',
+    rows: rowsProp,
+    autoSize = false,
+    formatter,
+    formatTrigger: formatTriggerProp,
+    showWordLimit = false,
+    onOverlimit,
+    onClear,
+    onClick,
+    onClickInput,
+    onClickLeftIcon,
+    onClickRightIcon,
+    border,
+    center,
+    clickable,
+    isLink,
+    arrowDirection,
+    size,
+    titleStyle,
+    contentStyle,
+    inputStyle,
+    labelStyle,
+    introStyle,
+    errorMessageStyle,
+    style,
+    androidRipple,
+    children,
+    placeholderTextColor,
+    onFocus,
+    onBlur,
+    onPressIn,
+    onChangeText,
+    maxLength,
+    ...restInputProps
+  } = props;
+  const tokens = (0, _tokens.useFieldTokens)(tokensOverride);
+  const labelWidth = labelWidthProp ?? tokens.defaults.labelWidth;
+  const labelAlign = labelAlignProp ?? tokens.defaults.labelAlign;
+  const inputAlign = inputAlignProp ?? tokens.defaults.inputAlign;
+  const controlAlign = controlAlignProp ?? tokens.defaults.controlAlign;
+  const clearTrigger = clearTriggerProp ?? tokens.defaults.clearTrigger;
+  const rows = rowsProp ?? tokens.defaults.rows;
+  const formatTrigger = formatTriggerProp ?? tokens.defaults.formatTrigger;
+  const mergedTitleStyle = (0, _react().useMemo)(() => [{
+    width: labelWidth,
+    minWidth: labelWidth,
+    maxWidth: labelWidth,
+    flexBasis: labelWidth,
+    marginRight: tokens.spacing.labelGap,
+    flexShrink: 0,
+    flexGrow: 0
+  }, titleStyle], [labelWidth, titleStyle, tokens.spacing.labelGap]);
+  const resolvedSuffix = suffixProp ?? button;
+  const resolvedDescription = intro ?? description;
+  const resolvedPlaceholderColor = placeholderTextColor ?? (disabled ? tokens.colors.disabled : tokens.colors.placeholder);
+  const isTextarea = type === 'textarea';
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = (0, _react().useState)(defaultValue);
+  const value = isControlled ? valueProp ?? '' : internalValue;
+  const [focused, setFocused] = (0, _react().useState)(false);
+  const [pressingClear, setPressingClear] = (0, _react().useState)(false);
+  const inputRef = (0, _react().useRef)(null);
+  const introId = (0, _react().useId)();
+  const errorId = (0, _react().useId)();
+  const describedBy = (0, _react().useMemo)(() => {
+    const ids = [(0, _validate.isRenderable)(errorMessage) ? errorId : null, (0, _validate.isRenderable)(resolvedDescription) ? introId : null].filter(Boolean);
+    return ids.length ? ids : undefined;
+  }, [errorId, errorMessage, introId, resolvedDescription]);
+  const lineHeight = tokens.defaults.textareaLineHeight;
+  const autoSizeConfig = autoSize && (0, _validate.isObject)(autoSize) ? autoSize : undefined;
+  const minRows = !isTextarea ? 1 : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.minRows) ? Math.max(1, autoSizeConfig.minRows) : Math.max(1, rows);
+  const maxRows = !isTextarea ? undefined : autoSizeConfig && (0, _validate.isDef)(autoSizeConfig.maxRows) ? Math.max(1, autoSizeConfig.maxRows) : undefined;
+  const minHeight = isTextarea ? Math.max(tokens.sizes.textareaMinHeight, minRows * lineHeight) : undefined;
+  const maxHeight = isTextarea && maxRows ? Math.max(tokens.sizes.textareaMinHeight, maxRows * lineHeight) : undefined;
+  const [textareaHeight, setTextareaHeight] = (0, _react().useState)(minHeight);
+  const formatValue = (0, _react().useCallback)((inputValue, trigger = 'onChange') => formatter && trigger === formatTrigger ? formatter(inputValue) : inputValue, [formatTrigger, formatter]);
+  const updateValue = (0, _react().useCallback)((next, trigger = 'onChange') => {
+    const formatted = formatValue(next, trigger);
+    if (!isControlled) {
+      setInternalValue(formatted);
+    }
+    onChangeText?.(formatted);
+  }, [formatValue, isControlled, onChangeText]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    clear: () => updateValue(''),
+    get nativeElement() {
+      return inputRef.current;
+    }
+  }));
+  const finalTextAlign = controlAlign !== 'left' ? controlAlign : inputAlign;
+  const showClear = clearable && !readOnly && (value ?? '') !== '' && (clearTrigger === 'always' || clearTrigger === 'focus' && (focused || pressingClear));
+  const handleChangeText = (0, _react().useCallback)(text => {
+    let next = text ?? '';
+    if (type === 'number' || type === 'digit') {
+      const allowDot = type === 'number';
+      next = (0, _string.formatNumberInput)(next, allowDot, allowDot);
+    }
+    if ((0, _validate.isFiniteNumber)(maxLength) && maxLength >= 0 && next.length > maxLength) {
+      onOverlimit?.(next);
+      next = next.slice(0, maxLength);
+    }
+    updateValue(next, 'onChange');
+  }, [maxLength, onOverlimit, type, updateValue]);
+  const handleFocus = (0, _react().useCallback)(event => {
+    setFocused(true);
+    onFocus?.(event);
+    if (readOnly) {
+      inputRef.current?.blur();
+    }
+  }, [onFocus, readOnly]);
+  const handleBlur = (0, _react().useCallback)(event => {
+    updateValue(value ?? '', 'onBlur');
+    setFocused(false);
+    onBlur?.(event);
+  }, [onBlur, updateValue, value]);
+  const handlePressIn = (0, _react().useCallback)(event => {
+    onPressIn?.(event);
+    onClickInput?.();
+  }, [onClickInput, onPressIn]);
+  const handleContentSizeChange = (0, _react().useCallback)(event => {
+    if (!isTextarea) return;
+    const contentHeight = event.nativeEvent.contentSize?.height ?? 0;
+    if (!contentHeight) return;
+    let nextHeight = contentHeight;
+    if (autoSize) {
+      nextHeight = Math.max(minHeight ?? contentHeight, contentHeight);
+      if (maxHeight) {
+        nextHeight = Math.min(nextHeight, maxHeight);
+      }
+    } else if (minHeight) {
+      nextHeight = Math.max(minHeight, contentHeight);
+    }
+    setTextareaHeight(nextHeight);
+  }, [autoSize, isTextarea, maxHeight, minHeight]);
+  const handleClear = (0, _react().useCallback)(() => {
+    updateValue('');
+    inputRef.current?.clear?.();
+    inputRef.current?.focus?.();
+    onClear?.();
+  }, [onClear, updateValue]);
+  const renderLabel = () => {
+    if (!(0, _validate.isRenderable)(label)) return null;
+    const isPlain = (0, _validate.isText)(label);
+    const content = isPlain ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [{
+        color: disabled ? tokens.colors.disabled : tokens.colors.label,
+        fontSize: tokens.typography.labelSize,
+        textAlign: labelAlign
+      }, labelStyle],
+      numberOfLines: 1
+    }, label, colon ? ':' : '') : label;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: tokens.layout.labelRow
+    }, content, (0, _validate.isRenderable)(tooltip) ? renderTooltip() : null);
+  };
+  const renderTooltip = () => {
+    if (!(0, _validate.isRenderable)(tooltip)) return null;
+    const defaultIcon = /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().QuestionO, {
+      size: tokens.sizes.icon,
+      fill: tokens.colors.tooltip,
+      color: tokens.colors.tooltip
+    });
+    let icon = defaultIcon;
+    let dialogProps = {
+      message: tooltip
+    };
+    if (! /*#__PURE__*/_react().default.isValidElement(tooltip) && !(0, _validate.isText)(tooltip)) {
+      const {
+        icon: customIcon,
+        ...rest
+      } = tooltip;
+      icon = customIcon ?? defaultIcon;
+      dialogProps = rest;
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      style: [tokens.layout.tooltip, {
+        marginLeft: tokens.spacing.rightIconGap
+      }],
+      onPress: () => _dialog.default.show(dialogProps),
+      accessibilityRole: "button"
+    }, icon);
+  };
+  const renderLeftIcon = () => {
+    if (!leftIcon) return null;
+    const content = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [tokens.layout.leftIcon, {
+        marginRight: tokens.spacing.leftIconGap,
+        minWidth: tokens.sizes.icon
+      }]
+    }, leftIcon);
+    if (!onClickLeftIcon) return content;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      onPress: onClickLeftIcon,
+      accessibilityRole: "button"
+    }, content);
+  };
+  const renderRightIcon = () => {
+    if (!rightIcon) return null;
+    const node = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [tokens.layout.rightIcon, {
+        paddingHorizontal: tokens.spacing.rightIconGap
+      }]
+    }, rightIcon);
+    if (!onClickRightIcon) return node;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      onPress: onClickRightIcon,
+      accessibilityRole: "button"
+    }, node);
+  };
+  const renderClearIcon = () => {
+    if (!showClear) return null;
+    const webMouseDownProps = _reactNative().Platform.OS === 'web' ? {
+      onMouseDown: event => {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+      }
+    } : undefined;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+      style: [tokens.layout.clearIcon, {
+        paddingHorizontal: tokens.spacing.rightIconGap
+      }]
+    }, webMouseDownProps, {
+      onPressIn: () => setPressingClear(true),
+      onPressOut: () => setPressingClear(false),
+      onPress: handleClear,
+      accessibilityRole: "button"
+    }), /*#__PURE__*/_react().default.isValidElement(clearIcon) ? clearIcon : /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Clear, {
+      size: tokens.sizes.clearIcon,
+      fill: tokens.colors.clear,
+      color: tokens.colors.clear
+    }));
+  };
+  const renderControl = () => {
+    if ((0, _validate.isRenderable)(children)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: [tokens.layout.children, {
+          minHeight: tokens.sizes.controlMinHeight
+        }]
+      }, children);
+    }
+    const inputStyles = [isTextarea ? tokens.layout.textarea : tokens.layout.input, {
+      color: disabled ? tokens.colors.disabled : error ? tokens.colors.error : tokens.colors.input,
+      fontSize: tokens.typography.inputSize,
+      textAlign: finalTextAlign,
+      ...(isTextarea ? {
+        lineHeight,
+        height: textareaHeight,
+        minHeight
+      } : {
+        minHeight: tokens.sizes.controlMinHeight
+      })
+    }, inputStyle];
+    return /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
+      ref: inputRef,
+      style: inputStyles,
+      value: value,
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onPressIn: handlePressIn,
+      editable: !disabled && !readOnly,
+      secureTextEntry: type === 'password',
+      multiline: isTextarea,
+      numberOfLines: isTextarea ? rows : undefined,
+      keyboardType: restInputProps.keyboardType ?? (0, _utils.mapKeyboardType)(type),
+      placeholderTextColor: resolvedPlaceholderColor,
+      onContentSizeChange: isTextarea ? handleContentSizeChange : undefined
+      // @ts-ignore
+      ,
+      accessibilityDescribedBy: describedBy,
+      clearButtonMode: "never"
+    }, restInputProps));
+  };
+  const renderWordLimit = () => {
+    if (!showWordLimit || maxLength === undefined || maxLength === null) {
+      return null;
+    }
+    const currentCount = (value ?? '').length;
+    const content = (0, _validate.isFunction)(showWordLimit) ? showWordLimit({
+      currentCount,
+      maxLength
+    }) : `${currentCount}/${maxLength}`;
+    if (content === null || content === false) return null;
+    if ((0, _validate.isText)(content)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [tokens.layout.wordLimit, {
+          color: tokens.colors.wordLimit,
+          fontSize: tokens.typography.wordLimitSize ?? 12,
+          textAlign: 'right',
+          alignSelf: 'flex-end',
+          marginTop: tokens.spacing.wordLimitMarginTop
+        }]
+      }, content);
+    }
+    return content;
+  };
+  const renderMessage = () => {
+    if (!(0, _validate.isRenderable)(errorMessage)) return null;
+    if ((0, _validate.isText)(errorMessage)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        nativeID: errorId,
+        style: [tokens.layout.message, {
+          color: tokens.colors.error,
+          fontSize: tokens.typography.messageSize,
+          textAlign: errorMessageAlign,
+          marginTop: tokens.spacing.messageMarginTop
+        }, errorMessageStyle],
+        accessibilityLiveRegion: "polite"
+      }, errorMessage);
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      nativeID: errorId,
+      style: [tokens.layout.message, {
+        alignSelf: _utils.alignMap[errorMessageAlign],
+        marginTop: tokens.spacing.messageMarginTop
+      }],
+      accessibilityLiveRegion: "polite"
+    }, errorMessage);
+  };
+  const renderIntro = () => {
+    if (!(0, _validate.isRenderable)(resolvedDescription)) return null;
+    if ((0, _validate.isText)(resolvedDescription)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        nativeID: introId,
+        style: [tokens.layout.message, {
+          color: tokens.colors.intro,
+          fontSize: tokens.typography.introSize,
+          textAlign: controlAlign,
+          marginTop: tokens.spacing.introMarginTop
+        }, introStyle]
+      }, resolvedDescription);
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      nativeID: introId,
+      style: {
+        marginTop: tokens.spacing.introMarginTop
+      }
+    }, resolvedDescription);
+  };
+  const contentWrapperStyle = (0, _react().useMemo)(() => [{
+    width: '100%',
+    justifyContent: _utils.alignMap[controlAlign]
+  }, contentStyle], [contentStyle, controlAlign]);
+  const renderAffix = node => {
+    if ((0, _validate.isText)(node)) {
+      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+        style: [tokens.layout.affixText, {
+          color: tokens.colors.input,
+          fontSize: tokens.typography.inputSize
+        }],
+        numberOfLines: 1
+      }, node);
+    }
+    return node;
+  };
+  return /*#__PURE__*/_react().default.createElement(_cell.default, {
+    title: renderLabel(),
+    icon: renderLeftIcon(),
+    required: required,
+    border: border,
+    center: center,
+    size: size,
+    clickable: clickable,
+    isLink: isLink,
+    arrowDirection: arrowDirection,
+    extra: extra,
+    titleStyle: mergedTitleStyle,
+    style: style,
+    contentStyle: contentWrapperStyle,
+    accessibilityState: error ? {
+      invalid: true
+    } : undefined,
+    accessibilityLabel: (0, _validate.isText)(label) ? String(label) : undefined,
+    onPress: onClick,
+    android_ripple: androidRipple
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.body
+  }, prefix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.prefix, {
+      paddingRight: tokens.spacing.prefixGap
+    }]
+  }, renderAffix(prefix)) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.controlWrapper, {
+      minHeight: tokens.sizes.controlMinHeight
+    }]
+  }, renderControl(), renderClearIcon()), renderRightIcon(), resolvedSuffix ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.suffix, {
+      paddingLeft: tokens.spacing.suffixGap
+    }]
+  }, renderAffix(resolvedSuffix)) : null), renderWordLimit(), renderMessage(), renderIntro());
+});
+Field.displayName = 'Field';
+var _default = exports.default = Field;

package/dist/cjs/field/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Field", {
+  enumerable: true,
+  get: function () {
+    return _Field.default;
+  }
+});
+Object.defineProperty(exports, "FieldGroup", {
+  enumerable: true,
+  get: function () {
+    return _cell.CellGroup;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useFieldTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.useFieldTokens;
+  }
+});
+var _Field = _interopRequireDefault(require("./Field"));
+var _cell = require("../cell");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Field.default;

package/dist/cjs/field/tokens.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const fieldLayout = _reactNative().StyleSheet.create({
+  body: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  controlWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: 0
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    outlineColor: 'transparent',
+    backgroundColor: 'transparent',
+    includeFontPadding: false,
+    textAlignVertical: 'center'
+  },
+  textarea: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    outlineColor: 'transparent',
+    backgroundColor: 'transparent',
+    textAlignVertical: 'top'
+  },
+  children: {
+    justifyContent: 'center'
+  },
+  leftIcon: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  rightIcon: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  prefix: {
+    justifyContent: 'center'
+  },
+  suffix: {
+    justifyContent: 'center'
+  },
+  affixText: {
+    includeFontPadding: false
+  },
+  clearIcon: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  labelWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+    flexGrow: 0,
+    minWidth: 0
+  },
+  labelRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: 0
+  },
+  tooltip: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  message: {},
+  wordLimit: {}
+});
+const createFieldTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    layout: fieldLayout,
+    defaults: {
+      labelWidth: 72,
+      labelAlign: 'left',
+      inputAlign: 'left',
+      controlAlign: 'left',
+      clearTrigger: 'focus',
+      formatTrigger: 'onChange',
+      rows: 2,
+      textareaLineHeight: 20
+    },
+    colors: {
+      label: palette.default[700],
+      input: palette.default[800],
+      placeholder: palette.default[300] ?? '#c8c9cc',
+      error: palette.danger[500],
+      disabled: palette.default[500],
+      intro: palette.default[600],
+      tooltip: palette.default[500],
+      clear: palette.default[500],
+      rightIcon: palette.default[500],
+      wordLimit: palette.default[600] ?? '#646566'
+    },
+    spacing: {
+      labelGap: spacing.none,
+      leftIconGap: spacing.xs,
+      rightIconGap: spacing.sm * 1,
+      prefixGap: spacing.sm * 1,
+      suffixGap: spacing.sm * 1,
+      messageMarginTop: spacing.none,
+      introMarginTop: spacing.none,
+      wordLimitMarginTop: spacing.none
+    },
+    typography: {
+      labelSize: fontSize.sm,
+      inputSize: fontSize.sm,
+      inputLineHeight: 24,
+      placeholderSize: fontSize.sm,
+      messageSize: 12,
+      introSize: 12,
+      wordLimitSize: fontSize.xs
+    },
+    sizes: {
+      icon: 16,
+      clearIcon: 16,
+      textareaMinHeight: 60,
+      controlMinHeight: 24
+    }
+  };
+};
+const useFieldTokens = exports.useFieldTokens = (0, _designSystem.createComponentTokensHook)('field', createFieldTokens);

package/dist/cjs/field/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapKeyboardType = exports.alignMap = void 0;
+const alignMap = exports.alignMap = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+const mapKeyboardType = type => {
+  switch (type) {
+    case 'number':
+      return 'decimal-pad';
+    case 'digit':
+      return 'number-pad';
+    case 'tel':
+      return 'phone-pad';
+    default:
+      return undefined;
+  }
+};
+exports.mapKeyboardType = mapKeyboardType;